/* =========================================================
   30. THEME SYSTEM – LIGHT MODE OVERRIDES
   ========================================================= */

/* Body base */
body.mf-theme-light {
    background: radial-gradient(circle at top, #f7f8fc 0, #e4e7f3 45%, #dde0ec 100%);
    color: #101326;
}

    /* Header / Navbar */
    body.mf-theme-light .mf-nav-hybrid {
        background: rgba(255, 255, 255, 0.94);
        box-shadow: 0 4px 18px rgba(0, 0, 0, 0.1), inset 0 -1px 0 rgba(0, 0, 0, 0.06);
    }

        body.mf-theme-light .mf-nav-hybrid::after {
            background: linear-gradient( 90deg, rgba(255, 255, 255, 0), rgba(28, 141, 255, 0.6), rgba(255, 91, 0, 0.7), rgba(255, 255, 255, 0) );
            box-shadow: 0 0 8px rgba(28, 141, 255, 0.4);
        }

    body.mf-theme-light .mf-nav-logo {
        color: #1a4580;
        text-shadow: none;
    }

    body.mf-theme-light .mf-nav-links a {
        color: #202744;
    }

        body.mf-theme-light .mf-nav-links a:hover {
            color: #0a1022;
        }

    /* Secciones principales */
    body.mf-theme-light .mf-page-section,
    body.mf-theme-light .mf-grid-section,
    body.mf-theme-light .mf-section-gallery,
    body.mf-theme-light .mf-section-why,
    body.mf-theme-light .mf-section-steps,
    body.mf-theme-light .mf-page-section-alt,
    body.mf-theme-light .mf-page-header {
        background: linear-gradient(180deg, #f7f8fc 0, #e7e9f4 45%, #dde0ec 100%);
    }

    /* Hero panel y tarjetas principales */
    body.mf-theme-light .mf-hero-panel,
    body.mf-theme-light .mf-card,
    body.mf-theme-light .mf-feature,
    body.mf-theme-light .mf-gallery-card,
    body.mf-theme-light .mf-ticket-block,
    body.mf-theme-light .mf-ticket-summary,
    body.mf-theme-light .mf-page-aside,
    body.mf-theme-light .mf-step-card,
    body.mf-theme-light .mf-grid-panel,
    body.mf-theme-light .mf-grid-3-item,
    body.mf-theme-light .mf-grid-4-item,
    body.mf-theme-light .mf-stat-block,
    body.mf-theme-light .mf-metric-card,
    body.mf-theme-light .mf-feature-card,
    body.mf-theme-light .mf-accordion,
    body.mf-theme-light .mf-alert,
    body.mf-theme-light .mf-gallery-thumb {
        background: radial-gradient(circle at top, #ffffff 0, #edf0fb 60%, #e1e4f1 100%);
        border-color: rgba(13, 23, 48, 0.08);
        box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
        color: #13172a;
    }

    /* Textos dentro de esas tarjetas */
    body.mf-theme-light .mf-card-text,
    body.mf-theme-light .mf-card-list,
    body.mf-theme-light .mf-step-text,
    body.mf-theme-light .mf-gallery-text,
    body.mf-theme-light .mf-why-text,
    body.mf-theme-light .mf-ticket-block-text,
    body.mf-theme-light .mf-ticket-summary,
    body.mf-theme-light .mf-page-aside,
    body.mf-theme-light .mf-timeline-text,
    body.mf-theme-light .mf-acc-body,
    body.mf-theme-light .mf-alert-text {
        color: #343852;
    }

    /* Footer */
    body.mf-theme-light .mf-footer {
        background: linear-gradient(180deg, #e6e8f5 0, #d6d9eb 50%, #c8ccdf 100%);
        border-top-color: rgba(0, 0, 0, 0.08);
        box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.08);
    }

        body.mf-theme-light .mf-footer .container {
            color: #4b516b;
        }

        body.mf-theme-light .mf-footer span:last-child {
            color: #1c5fb8;
        }

    /* Alertas especiales (las que definimos como mf-alert-info / warning / success) */
    body.mf-theme-light .mf-alert-info {
        background: rgba(28, 141, 255, 0.12);
        border-color: rgba(28, 141, 255, 0.5);
        color: #12345a;
    }

    body.mf-theme-light .mf-alert-warning {
        background: rgba(255, 163, 0, 0.16);
        border-color: rgba(255, 163, 0, 0.6);
        color: #5b3900;
    }

    body.mf-theme-light .mf-alert-success {
        background: rgba(0, 170, 110, 0.16);
        border-color: rgba(0, 170, 110, 0.6);
        color: #064428;
    }

    /* Timeline */
    body.mf-theme-light .mf-timeline-card {
        background: radial-gradient(circle at top, #ffffff 0, #edf0fb 60%);
        border-color: rgba(15, 23, 42, 0.08);
    }

    body.mf-theme-light .mf-timeline-text {
        color: #3b415c;
    }

    /* Neon subrayado del menú en light: bajamos el glow */
    body.mf-theme-light .mf-nav-links a::after {
        box-shadow: 0 0 6px rgba(28, 141, 255, 0.5);
    }
/* =========================================================
   31. UI TOOLKIT – TABS
   ========================================================= */

.mf-tabs {
    display: inline-flex;
    gap: 0.4rem;
    padding: 0.25rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 0 16px rgba(0, 0, 0, 0.7);
}

.mf-tab {
    border: none;
    background: transparent;
    color: #cfd8ff;
    font-size: 0.82rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0.45rem 0.9rem;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

    .mf-tab.is-active {
        background: linear-gradient(135deg, var(--mf-blue), var(--mf-orange));
        color: var(--mf-white);
        box-shadow: 0 0 14px rgba(28, 141, 255, 0.6);
    }

.mf-tabs-content {
    max-width: 640px;
}

.mf-tab-panel {
    display: none;
    font-size: 0.9rem;
    color: #cfd6ef;
}

    .mf-tab-panel.is-active {
        display: block;
    }
/* =========================================================
   32. UI TOOLKIT – PRICING CARDS
   ========================================================= */

.mf-pricing-card {
    position: relative;
    border-radius: 1.2rem;
    padding: 1.5rem 1.3rem 1.4rem;
    background: radial-gradient(circle at top, #111b2b 0, #05060c 75%);
    border: 1px solid rgba(255,255,255,0.14);
    box-shadow: 0 0 20px rgba(0,0,0,0.85);
    font-size: 0.9rem;
    color: #cfd6ef;
}

.mf-pricing-featured {
    box-shadow: 0 0 26px rgba(28,141,255,0.7);
    border-color: rgba(28,141,255,0.7);
}

.mf-pricing-tag {
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #cfd8ff;
    opacity: 0.8;
}

.mf-pricing-title {
    margin-top: 0.4rem;
    font-size: 1.1rem;
    color: var(--mf-white);
}

.mf-pricing-price {
    margin-top: 0.2rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--mf-orange);
}

.mf-pricing-list {
    margin: 0.9rem 0 0;
    padding-left: 1.1rem;
    list-style: disc;
    color: #d7def4;
    font-size: 0.88rem;
}

    .mf-pricing-list li + li {
        margin-top: 0.16rem;
    }
/* =========================================================
   33. UI TOOLKIT – TESTIMONIAL CARD
   ========================================================= */

.mf-testimonial {
    border-radius: 1.1rem;
    padding: 1.4rem 1.5rem;
    background: radial-gradient(circle at top, #101b2c 0, #05060c 75%);
    border: 1px solid rgba(255,255,255,0.12);
    box-shadow: 0 0 20px rgba(0,0,0,0.8);
}

.mf-testimonial-header {
    display: flex;
    gap: 0.8rem;
    align-items: center;
    margin-bottom: 0.6rem;
}

.mf-testimonial-avatar {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 0.9rem;
    background: linear-gradient(135deg, var(--mf-blue), var(--mf-orange));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    font-weight: 700;
    color: white;
    text-shadow: 0 0 6px rgba(0,0,0,0.8);
}

.mf-testimonial-name {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
}

.mf-testimonial-meta {
    margin: 0;
    font-size: 0.8rem;
    color: #b5bddc;
}

.mf-testimonial-text {
    margin: 0.4rem 0 0;
    font-size: 0.9rem;
    color: #cfd6ef;
}
/* =========================================================
   34. UI TOOLKIT – 3D FEATURE CARD (MAXIFORGE)
   ========================================================= */

/* Wrapper general */
.mf-3dcard-container {
    position: relative;
    perspective: 1000px;
    max-width: 380px;
    width: 100%;
}

/* Fondo neon exterior */
.mf-3dcard-neon-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
}

.mf-3dcard-glow {
    position: absolute;
    inset: 0;
    border-radius: 24px;
}

.mf-3dcard-glow-1 {
    background: linear-gradient(to right, var(--mf-blue), #a855f7, var(--mf-orange));
    filter: blur(40px);
    opacity: 0.35;
    animation: mf-3d-pulse 2s infinite;
}

.mf-3dcard-glow-2 {
    background: linear-gradient(to right, var(--mf-orange), var(--mf-blue), #a855f7);
    filter: blur(30px);
    opacity: 0.22;
    animation: mf-3d-pulse 2s infinite 0.5s;
}

.mf-3dcard-glow-3 {
    background: linear-gradient(to right, #9333ea, var(--mf-blue), var(--mf-orange));
    filter: blur(22px);
    opacity: 0.4;
}

@keyframes mf-3d-pulse {
    0%, 100% {
        opacity: 0.3;
    }

    50% {
        opacity: 0.55;
    }
}

/* Card base */
.mf-3dcard {
    width: 100%;
    max-width: 420px; /* limita el ancho en el hero, evita monstruos gigantes */
    height: 340px; /* un pelín más baja para no empujar tanto hacia abajo */
    background: radial-gradient(circle at top, #101827 0, #050814 65%);
    border-radius: 24px;
    overflow: hidden;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.2s ease-out, box-shadow 0.3s ease;
    cursor: pointer;
    box-shadow: 0 25px 50px -18px rgba(0, 0, 0, 0.9);
}

/* Card del hero centrada dentro de su columna */
/* Card del hero centrada dentro de su columna */
.mf-hero-visual .mf-3dcard {
    margin: 0 auto;
    position: relative;
}

    /* Borde inferior neón para el card del hero */
    .mf-hero-visual .mf-3dcard::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 3px; /* fino */
        background: linear-gradient( 90deg, rgba(0, 0, 0, 0), var(--mf-orange), rgba(0, 0, 0, 0) );
        box-shadow: 0 0 12px var(--mf-orange);
        border-radius: 0 0 24px 24px; /* coincide con el borde del card */
        pointer-events: none;
    }


    .mf-3dcard:hover {
        box-shadow: 0 0 60px rgba(28, 141, 255, 0.6);
    }

/* Background interno */
.mf-3dcard-bg {
    position: absolute;
    inset: 0;
    border-radius: 24px;
    overflow: hidden;
}

.mf-3dcard-bg-image {
    position: absolute;
    inset: -5%;
    width: 110%;
    height: 110%;
    background: radial-gradient(circle at 20% 0, var(--mf-blue), transparent 55%), radial-gradient(circle at 80% 100%, var(--mf-orange), #050814 70%);
    transform: scale(1.1);
    transition: transform 0.2s ease-out;
}

.mf-3dcard-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient( to bottom right, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.7) );
}

/* Contenido principal */
.mf-3dcard-content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 24px;
    text-align: center;
    transition: transform 0.2s ease-out;
}

.mf-3dcard-title {
    font-size: 1.7rem;
    font-weight: 800;
    margin-bottom: 12px;
    background: linear-gradient(to right, var(--mf-blue), #a855f7, var(--mf-orange));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.mf-3dcard-subtitle {
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.95rem;
    max-width: 280px;
    margin-bottom: 22px;
    line-height: 1.5;
}

/* Features grid */
.mf-3dcard-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 24px;
    width: 100%;
    max-width: 290px;
}

.mf-3dcard-feature-box {
    background: rgba(5, 7, 16, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 12px;
    padding: 10px;
}

.mf-3dcard-feature-label {
    color: #f9a8d4;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.mf-3dcard-feature-value {
    color: #ffffff;
    font-size: 0.78rem;
    margin-top: 2px;
}

/* Botón inferior */
.mf-3dcard-btn-layer {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    transition: transform 0.2s ease-out;
}



/* Efectos extra */
.mf-3dcard-ambient {
    position: absolute;
    inset: 0;
    background: linear-gradient( to top right, transparent, rgba(28, 141, 255, 0.18), rgba(255, 91, 0, 0.16) );
    border-radius: 24px;
    pointer-events: none;
}

.mf-3dcard-border {
    position: absolute;
    inset: 0;
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    pointer-events: none;
}
.mf-hero-visual .mf-3dcard {
    margin: 0 auto;
}

/* Responsive tweak */
@media (max-width: 480px) {
    .mf-3dcard {
        height: 340px;
    }
}
/* =========================================================
   35. UI TOOLKIT – SPLIT BEFORE / AFTER
   ========================================================= */

.mf-split {
    position: relative;
    max-width: 720px;
    height: 360px;
    margin: 0 auto;
    border-radius: 1.2rem;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.18);
    box-shadow: 0 0 22px rgba(0,0,0,0.85);
}

.mf-split-img {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
}

.mf-split-img-top {
    width: 50%;
    overflow: hidden;
}

.mf-split-img-inner {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
}

/* Range invisible pero funcional */
.mf-split-range {
    position: absolute;
    inset: 0;
    width: 100%;
    opacity: 0;
    cursor: ew-resize;
}

/* Handle visual */
.mf-split-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mf-split-line {
    width: 2px;
    height: 100%;
    background: linear-gradient( 180deg, transparent, var(--mf-blue), var(--mf-orange), transparent );
    box-shadow: 0 0 16px rgba(28,141,255,0.8);
}

.mf-split-knob {
    position: absolute;
    width: 26px;
    height: 26px;
    border-radius: 999px;
    background: #050814;
    border: 2px solid var(--mf-blue);
    box-shadow: 0 0 14px rgba(28,141,255,0.8);
}
/* =========================================================
   36. UI TOOLKIT – NEON DIVIDER
   ========================================================= */

.mf-divider {
    display: flex;
    align-items: center;
    gap: 1rem;
    justify-content: center;
    margin: 0rem 0;
}

.mf-divider-line {
    flex: 1;
    height: 1px;
    background: linear-gradient( 90deg, rgba(255,255,255,0), var(--mf-blue), rgba(255,255,255,0) );
    box-shadow: 0 0 10px rgba(28,141,255,0.7);
}

.mf-divider-label {
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #cfd8ff;
}

/* =====================================================
   Add subtle background + reduce height (minimal change)
   ===================================================== */

.mf-divider {
    position: relative;
    padding: 0rem 0; /* antes era más alto */
    margin: 0rem 0; /* separa pero sin exagerar */
}

    /* Fondo suave similar al de las cards */
    .mf-divider::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 16px;
        background: rgba(255,255,255,0.02); /* tono muy suave */
        backdrop-filter: blur(10px); /* blur elegante */
        -webkit-backdrop-filter: blur(100px);
        z-index: -1;
    }

/* Mantiene tus líneas tal cual estaban */
.mf-divider-line {
    height: 1px;
}

/* =========================================================
   37. UI TOOLKIT – RATING STARS
   ========================================================= */

.mf-rate {
    display: inline-flex;
    gap: 0.3rem;
    font-size: 1.4rem;
    cursor: pointer;
}

.mf-rate-star {
    color: #4b566f;
    transition: color 0.18s ease, text-shadow 0.18s ease, transform 0.1s ease;
}

    .mf-rate-star.is-active {
        color: var(--mf-orange);
        text-shadow: 0 0 10px rgba(255,91,0,0.8);
    }

    .mf-rate-star:hover {
        transform: translateY(-1px);
    }
/* =========================================================
   38. UI TOOLKIT – MARQUEE
   ========================================================= */

.mf-marquee {
    overflow: hidden;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.18);
    background: radial-gradient(circle at top, #101827 0, #05060a 70%);
    box-shadow: 0 0 18px rgba(0,0,0,0.8);
}

.mf-marquee-track {
    display: inline-flex;
    gap: 2.5rem;
    padding: 0.65rem 2rem;
    white-space: nowrap;
    animation: mf-marquee-move 18s linear infinite;
}

    .mf-marquee-track span {
        font-size: 0.8rem;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: #cfd8ff;
    }

@keyframes mf-marquee-move {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}
/* =========================================================
   39. UI TOOLKIT – MOUSE FOLLOWER ORB
   ========================================================= */

.mf-mouse-orb {
    position: fixed;
    width: 26px;
    height: 26px;
    border-radius: 999px;
    pointer-events: none;
    z-index: 9999;
    background: radial-gradient(circle at 30% 20%, var(--mf-blue), var(--mf-orange));
    mix-blend-mode: screen;
    opacity: 0.25;
    transform: translate(-50%, -50%);
}
/* =========================================================
   40. UI TOOLKIT – HOTEND FLOAT (LIVE2D-ISH)
   ========================================================= */

.mf-hotend {
    position: relative;
    width: 120px;
    height: 200px;
    animation: mf-hotend-float 3.6s ease-in-out infinite;
}

.mf-hotend-head {
    position: absolute;
    top: 0;
    left: 18px;
    right: 18px;
    height: 56px;
    border-radius: 16px;
    background: linear-gradient(135deg, #0b1220, #1c8dff);
    box-shadow: 0 0 20px rgba(28,141,255,0.8);
}

.mf-hotend-body {
    position: absolute;
    top: 52px;
    left: 25px;
    right: 25px;
    height: 80px;
    border-radius: 10px;
    background: linear-gradient(180deg, #050814, #131a2b);
    border: 1px solid rgba(255,255,255,0.16);
}

.mf-hotend-nozzle {
    position: absolute;
    bottom: 40px;
    left: 52px;
    right: 52px;
    height: 32px;
    background: linear-gradient(180deg, #ffb347, #ff5b00);
    clip-path: polygon(50% 100%, 0 0, 100% 0);
    box-shadow: 0 0 16px rgba(255,91,0,0.8);
}

.mf-hotend-glow {
    position: absolute;
    bottom: 0;
    left: 10px;
    right: 10px;
    height: 26px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(28,141,255,0.7), transparent 70%);
    opacity: 0.7;
}

@keyframes mf-hotend-float {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}
/* =========================================================
   41. UI TOOLKIT – WHATSAPP FLOAT BUTTON
   ========================================================= */

.mf-whatsapp-btn {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    z-index: 9999;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1rem;
    border-radius: 999px;
    background: #25d366;
    color: #ffffff;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 0 22px rgba(0,0,0,0.8);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

    .mf-whatsapp-btn::before {
        content: "";
        font-family: "Font Awesome 5 Brands", system-ui, -apple-system;
        font-style: normal;
    }

    .mf-whatsapp-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 0 26px rgba(37,211,102,0.9);
    }


/* BLOQUES PRINCIPALES */

.mf-block-primary {
    padding: 5rem 0;
    background: radial-gradient(circle at top, #1C8DFF18, transparent 55%), radial-gradient(circle at bottom, #FF5B0015, transparent 60%), #050816;
    color: #f9fafb;
}

.mf-block-alt {
    padding: 5rem 0;
    background: radial-gradient(circle at top, #1C8DFF08, transparent 55%), #070c14;
    color: #e5e7eb;
}

/* Por si quieres un bloque aún más neutro tipo “panel dashboard” */
.mf-block-neutral {
    padding: 5rem 0;
    background: #0b101a;
    color: #e5e7eb;
}

/* Sub-navigation – integrated with main nav */
.mf-sandbox-nav {
    position: sticky;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: center; /* CENTRADO HORIZONTAL */
    gap: 1.75rem;
    padding: 0.6rem 2.5rem;
    background: radial-gradient(circle at top, #020617 0, #020617 55%, #020617 100%);
    border-top: 1px solid rgba(148, 163, 184, 0.35);
    border-bottom: 1px solid rgba(15, 23, 42, 0.9);
    border-radius: 0;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(15, 23, 42, 0.85);

    position: sticky;
    top: var(--mf-header-h);
    z-index: 1200; /* por encima del contenido, por debajo si quieres del header */
    margin-top: 0;
    /* Look & feel */
    backdrop-filter: blur(14px);
    background: rgba(10, 16, 28, 0.72);
    border-bottom: 1px solid rgba(71,85,105,0.35);
    /* Prevent “behind header” illusion */

}

    /* Línea neón superior – conecta visualmente con o header */
    .mf-sandbox-nav::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: -1px;
        height: 2px;
        background: linear-gradient( 90deg, rgba(0, 0, 0, 0), var(--mf-blue), var(--mf-orange), rgba(0, 0, 0, 0) );
        box-shadow: 0 0 10px rgba(28, 141, 255, 0.7);
        pointer-events: none;
    }

    /* Links */
    .mf-sandbox-nav a {
        position: relative;
        font-size: 0.84rem;
        text-decoration: none;
        color: #9ca3af;
        padding: 0.25rem 0;
        text-transform: uppercase;
        letter-spacing: 0.14em;
        white-space: nowrap;
        border-radius: 0;
        transition: color 0.18s ease;
        padding: 0.5em;
    }

        /* Subrayado neón */
        .mf-sandbox-nav a::after {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            bottom: -0.35rem;
            height: 2px;
            background: linear-gradient( 90deg, rgba(0, 0, 0, 0), var(--mf-blue), rgba(0, 0, 0, 0) );
            opacity: 0;
            transform: scaleX(0.3);
            transform-origin: center;
            border-radius: 999px;
            box-shadow: 0 0 8px rgba(28, 141, 255, 0.7);
            transition: opacity 0.18s ease, transform 0.18s ease;
        }

        .mf-sandbox-nav a:hover {
            color: #e5e7eb;
        }

        .mf-sandbox-nav a.is-active {
            color: #f9fafb;
        }

            .mf-sandbox-nav a:hover::after,
            .mf-sandbox-nav a.is-active::after {
                opacity: 1;
                transform: scaleX(1);
            }


/* ==========================================
   Horizontal showcase (image-focused cards)
   ========================================== */

.mf-horizontal-showcase {
    position: relative;
    height: 100vh;
    padding: 0;
    overflow: hidden;
}

.mf-horizontal-inner {
    height: 100%;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.mf-horizontal-track {
    display: flex;
    gap: 3rem;
    padding: 0 10vw;
    will-change: transform;
}

/* CARD BASE */

.mf-hcard {
    flex: 0 0 38vw; /* ancho suficiente para que haya scroll */
    max-width: 460px;
    min-height: 520px;
    border-radius: 1.75rem;
    background: rgba(5, 6, 10, 0.96);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transform-origin: center center;
    transition: transform 0.35s ease-out, box-shadow 0.3s ease-out;
}

/* MEDIA (IMAGEN) */

.mf-hcard-media {
    position: relative;
    flex: 0 0 65%;
    min-height: 300px;
    overflow: hidden;
}

    .mf-hcard-media::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at top left, rgba(28, 141, 255, 0.55), transparent 65%);
        mix-blend-mode: screen;
        pointer-events: none;
    }

    .mf-hcard-media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transform: scale(1.05);
        transition: transform 0.35s ease-out;
    }

.mf-hcard-chip {
    position: absolute;
    left: 1.1rem;
    bottom: 1.1rem;
    padding: 0.25rem 0.8rem;
    border-radius: 999px;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    background: rgba(0, 0, 0, 0.65);
    color: var(--mf-white);
    border: 1px solid rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(10px);
}

/* BODY (TEXTO + BOTÓN) */

.mf-hcard-body {
    flex: 1 1 auto;
    padding: 1.1rem 1.4rem 1.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.mf-hcard-index {
    font-size: 0.75rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0.7;
    margin: 0;
}

.mf-hcard-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 600;
}

.mf-hcard-tags {
    margin: 0 0 0.8rem;
    font-size: 0.9rem;
    opacity: 0.75;
}

.mf-hcard-body .mf-btn {
    margin-top: auto;
}

/* Hover extra */

.mf-hcard:hover .mf-hcard-media img {
    transform: scale(1.1);
}
.mf-hcard-sentinel {
    flex: 0 0 30vw; /* espacio vacío al final del carril */
}
/* Mobile: carrusel horizontal nativo */

@media (max-width: 768px) {
    .mf-horizontal-showcase {
        height: auto;
        padding: 4rem 0;
    }

    .mf-horizontal-inner {
        height: auto;
        display: block;
    }

    .mf-horizontal-track {
        overflow-x: auto;
        padding-inline: 1.5rem;
        scroll-snap-type: x mandatory;
    }

    .mf-hcard {
        flex: 0 0 75vw;
        max-width: none;
        scroll-snap-align: center;
        min-height: 460px;
    }
}

/* ==========================================
   Floating WhatsApp button
   ========================================== */

.mf-whatsapp-fab {
    position: fixed;
    right: 1.75rem;
    bottom: 1.75rem;
    width: 3.3rem;
    height: 3.3rem;
    border-radius: 999px;
    background: radial-gradient(circle at 30% 20%, #25d366, #128c7e 70%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    box-shadow: 0 14px 35px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.15);
    z-index: 1200;
    text-decoration: none;
    transition: transform 0.18s ease-out, box-shadow 0.18s ease-out, filter 0.18s ease-out;
}

    .mf-whatsapp-fab i {
        font-size: 1.4rem;
    }

    .mf-whatsapp-fab:hover {
        transform: translateY(-2px) scale(1.04);
        box-shadow: 0 18px 45px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(255, 255, 255, 0.22);
        filter: brightness(1.05);
    }
.mf-section-deep {
    background: radial-gradient(circle at top left, #132d47 0%, #050507 70%);
    color: var(--mf-white);
}

.mf-section-warm {
    background: radial-gradient(circle at top right, #301208 0%, #050507 70%);
    color: var(--mf-white);
}

.mf-section-inner {
    max-width: 1120px;
    margin: 0 auto;
    padding: 4.5rem 1.5rem;
}

.mf-section-divider {
    display: flex;
    justify-content: center;
    padding: 1.5rem 0;
}

    .mf-section-divider .neon-line {
        width: 220px;
        height: 2px;
    }

/* Section types */
.mf-section-deep {
    background: radial-gradient(circle at top left, #132d47 0%, #050507 65%);
    color: var(--mf-white);
}
/* ==========================================
   Generic sections + neon divider
   ========================================== */

.mf-section {
    position: relative;
}

.mf-section-deep {
    background: radial-gradient(circle at top left, #132d47 0%, #050507 65%);
    color: var(--mf-white);
}

/* Section caliente pero integrada con el fondo general */
.mf-section-warm {
    position: relative;
    padding: 3rem 0;
    background: radial-gradient(circle at bottom right, rgba(255, 91, 0, 0.55) 0%, rgba(255, 91, 0, 0.0) 60%), radial-gradient(circle at top left, rgba(28, 141, 255, 0.25) 0%, rgba(28, 141, 255, 0.0) 55%), #05060a; /* mismo dark base que el resto de la página */
}


.mf-section-inner {
    max-width: 1120px;
    margin: 0 auto;
    padding: 4.5rem 1.5rem;
}

.mf-section-divider {
    display: flex;
    justify-content: center;
    padding: 1.75rem 0;
}

    .mf-section-divider .neon-line {
        width: 220px;
    }

/* Fade superior para que se funda con el divisor */
.mf-section-warm::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 70px; /* puedes bajar a 50 si quieres más compacto */
    pointer-events: none;
    background: linear-gradient( to bottom, #05060a 0%, rgba(5, 6, 10, 0.95) 30%, rgba(5, 6, 10, 0.0) 100% );
}

/* =========================================
   Video hero + grid
   ========================================= */

/* Container hero video */
.mf-video-hero {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    margin-bottom: 2rem;
    min-height: 260px;
    background: radial-gradient(circle at top left, #132d47 0%, #050507 70%);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.65);
}

    /* Smaller variation */
    .mf-video-hero.mini {
        min-height: 220px;
    }

/* Video element */
.mf-video-hero-media {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Text overlay */
.mf-video-hero-overlay {
    position: absolute;
    inset: 0;
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0.75rem;
    pointer-events: none;
}

    .mf-video-hero-overlay h2 {
        font-size: 2rem;
        font-weight: 700;
        margin: 0;
    }

    .mf-video-hero-overlay p {
        max-width: 480px;
        margin: 0;
        opacity: 0.9;
    }

/* Grid with small clips */
.mf-video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5rem;
}

    .mf-video-grid.compact {
        margin-top: 1rem;
    }

/* Individual video card */
.mf-video-card {
    background: rgba(5, 10, 20, 0.95);
    border-radius: 18px;
    padding: 1rem;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.04);
}

    .mf-video-card video {
        width: 100%;
        border-radius: 12px;
        display: block;
        margin-bottom: 0.75rem;
    }

    .mf-video-card h3 {
        font-size: 1rem;
        margin: 0 0 0.25rem;
    }

    .mf-video-card p {
        font-size: 0.9rem;
        opacity: 0.85;
        margin: 0;
    }

/* Mobile tweaks */
@media (max-width: 768px) {
    .mf-video-hero-overlay {
        padding: 1.5rem;
    }

        .mf-video-hero-overlay h2 {
            font-size: 1.5rem;
        }
}
/* =========================================
   Hero layout tuning (izquierda más ancha)
   ========================================= */

.mf-hero {
    display: flex;
    align-items: stretch;
    gap: 3rem;
}

/* Izquierda 60% – Derecha 40% */
.mf-hero-panel {
    flex: 0 0 60%;
}

.mf-hero-visual {
    flex: 0 0 40%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Card izquierda */
.mf-hero-panel {
    flex-direction: column;
    background: rgba(0, 0, 0, 0.25);
    padding: 2.5rem;
    border-radius: 28px;
    box-shadow: 0 0 22px rgba(0, 0, 0, 0.35);
    min-height: 420px;
}

/* Card derecha */
.mf-hero .mf-3dcard {
    width: 100%;
    height: 100%;
    padding: 2.25rem;
    border-radius: 28px;
    min-height: 420px;
    display: flex;
    flex-direction: column;
}

/* Título un poco más grande */
.mf-hero-title {
    font-size: 2.35rem; /* antes ~1.95 */
    line-height: 1.18;
    margin: 0 0 1rem;
}

/* Highlight naranja */
.mf-hero-highlight {
    color: var(--mf-orange);
}

/* TAGS */
.mf-hero-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}

.mf-tag-pill {
    padding: 0.28rem 0.7rem;
    border-radius: 999px;
    font-size: 0.78rem;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.12);
}

/* Responsive */
@media (max-width: 900px) {
    .mf-hero {
        flex-direction: column;
        gap: 2rem;
    }

        .mf-hero-panel,
        .mf-hero .mf-3dcard {
            flex: 0 0 100%;
            min-height: auto;
        }

    .mf-hero-title {
        font-size: 1.9rem;
    }
}
/* =========================================
   SECTION STYLE A - Diagonales dinámicas
   Con color configurable vía --mf-accent
   ========================================= */

/* =========================================================
   SECTION LINES A – FIXED + GLOW SUBTLE
   ========================================================= */

.mf-section-lines-A {
    position: relative;
    padding: 3.5rem 0;
    overflow: hidden;
    background: #05060a;
    --mf-accent: var(--mf-orange);
    z-index: 1; /* contenido siempre encima */
}

    .mf-section-lines-A::before {
        content: "";
        position: absolute;
        inset: -80px 0;
        z-index: -1; /* <<< IMPORTANTÍSIMO */
        pointer-events: none; /* <<< deja pasar los clicks */

        background:
        /* sombreado diagonal suave */
        repeating-linear-gradient( 135deg, rgba(0, 0, 0, 0.0) 0, rgba(0, 0, 0, 0.0) 20px, rgba(0, 0, 0, 0.55) 20px, rgba(0, 0, 0, 0.55) 26px ),
        /* LÍNEAS NEÓN con glow suave */
        repeating-linear-gradient( 135deg, color-mix(in srgb, var(--mf-accent) 55%, transparent) 0, color-mix(in srgb, var(--mf-accent) 55%, transparent) 2px, transparent 2px, transparent 14px ),
        /* base dark */
        linear-gradient( 135deg, #05060a 0%, #070b15 40%, #101520 80%, #05060a 100% );
        opacity: 0.75;
        /* Glow sutil y elegante */
        filter: drop-shadow(0 0 6px color-mix(in srgb, var(--mf-accent) 45%, transparent));
    }

    .mf-section-lines-A::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        pointer-events: none;
        background: linear-gradient( to bottom, rgba(5, 6, 10, 0.96) 0%, rgba(5, 6, 10, 0.0) 18%, rgba(5, 6, 10, 0.0) 82%, rgba(5, 6, 10, 0.96) 100% );
    }


    .mf-section-lines-A.blue {
        --mf-accent: var(--mf-blue);
    }

    .mf-section-lines-A.orange {
        --mf-accent: var(--mf-orange);
    }

    .mf-section-lines-A.violet {
        --mf-accent: var(--mf-violet);
    }



    /* Panel de contenido encima del pattern */
    .mf-section-lines-A .mf-section-pattern-inner {
        position: relative;
        z-index: 1;
        padding: 2.5rem 3rem;
        border-radius: 26px;
        background: radial-gradient(circle at top left, rgba(0,0,0,0.8) 0, rgba(0,0,0,0.9) 35%, rgba(0,0,0,0.98) 100%);
        box-shadow: 0 24px 60px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.03);
    }

/* En móvil un poco más compacto */
@media (max-width: 900px) {
    .mf-section-lines-A .mf-section-pattern-inner {
        padding: 1.75rem 1.5rem;
        border-radius: 18px;
    }
}

/* =========================================
   Runic neon background section
   ========================================= */

.mf-section-runes {
    position: relative;
    padding: 3.5rem 0;
    overflow: hidden;
    background: #05060a;
    /* default accent color (can be overriden by .orange / .blue) */
    --mf-accent: var(--mf-orange);
}

    /* Color variants */
    .mf-section-runes.orange {
        --mf-accent: var(--mf-orange);
    }

    .mf-section-runes.blue {
        --mf-accent: var(--mf-blue);
    }

    /* Runic pattern */
    .mf-section-runes::before {
        content: "";
        position: absolute;
        inset: -60px 0;
        z-index: 0;
        background:
        /* soft diagonal shadow grid */
        repeating-linear-gradient( 135deg, rgba(0, 0, 0, 0.0) 0, rgba(0, 0, 0, 0.0) 18px, rgba(0, 0, 0, 0.7) 18px, rgba(0, 0, 0, 0.7) 22px ),
        /* "runes": small angled glyphs */
        repeating-linear-gradient( 135deg, color-mix(in srgb, var(--mf-accent) 85%, transparent) 0, color-mix(in srgb, var(--mf-accent) 85%, transparent) 2px, transparent 2px, transparent 10px ), repeating-linear-gradient( -135deg, color-mix(in srgb, var(--mf-accent) 70%, transparent) 0, color-mix(in srgb, var(--mf-accent) 70%, transparent) 1px, transparent 1px, transparent 10px ),
        /* base gradient */
        linear-gradient( 135deg, #05060a 0%, #070b15 35%, #101522 70%, #05060a 100% );
        opacity: 0.9;
    }

    /* Fade top/bottom to blend with divider and next section */
    .mf-section-runes::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        background: linear-gradient( to bottom, rgba(5, 6, 10, 0.96) 0%, rgba(5, 6, 10, 0.0) 18%, rgba(5, 6, 10, 0.0) 82%, rgba(5, 6, 10, 0.96) 100% );
    }

.mf-section-pattern-inner {
    position: relative;
    z-index: 1;
}
/* =========================================
   Runic neon divider
   ========================================= */

.mf-divider-runes {
    position: relative;
    padding: 1.5rem 0;
    margin: 2rem 0;
    --mf-accent: var(--mf-orange);
}

    /* Color variants */
    .mf-divider-runes.orange {
        --mf-accent: var(--mf-orange);
    }

    .mf-divider-runes.blue {
        --mf-accent: var(--mf-blue);
    }

    /* Background panel subtle */
    .mf-divider-runes::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 16px;
        background: rgba(5, 8, 16, 0.6);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        z-index: -1;
    }

    /* Runic lines left/right */
    .mf-divider-runes .mf-divider-line {
        height: 18px;
        flex: 1;
        background-image:
        /* chevron-like glyphs */
        linear-gradient( 135deg, color-mix(in srgb, var(--mf-accent) 90%, transparent) 0 45%, transparent 45% 100% ), linear-gradient( -135deg, color-mix(in srgb, var(--mf-accent) 90%, transparent) 0 45%, transparent 45% 100% );
        background-size: 38px 18px;
        background-repeat: repeat-x;
        background-position: 0 0, 19px 0;
        filter: drop-shadow(0 0 8px color-mix(in srgb, var(--mf-accent) 70%, transparent));
        opacity: 0.95;
    }

    /* Label stays as you had, solo se ve más integrado */
    .mf-divider-runes .mf-divider-label {
        margin: 0 1rem;
        padding: 0.4rem 1rem;
        font-size: 0.9rem;
        font-weight: 600;
        letter-spacing: 0.5px;
        text-transform: uppercase;
        border-radius: 999px;
        background: rgba(255,255,255,0.03);
        border: 1px solid rgba(255,255,255,0.12);
    }
/* ================================
   Section: Sigil / Rune Token BG
   ================================ */

.mf-section-sigil {
    position: relative;
    padding: 3.5rem 0;
    overflow: hidden;
    background: #050607;
}

/* Contenido por encima del pattern */
.mf-section-sigil-inner {
    position: relative;
    z-index: 1;
}

/* Disco central + anillos + brillo azul tipo sigilo */
.mf-section-sigil::before {
    content: "";
    position: absolute;
    inset: -40px 0;
    z-index: 0;
    background:
    /* textura “piedra” muy suave */
    repeating-linear-gradient( 45deg, rgba(0,0,0,0.22) 0, rgba(0,0,0,0.22) 2px, rgba(0,0,0,0.18) 2px, rgba(0,0,0,0.18) 4px ),
    /* anillos concéntricos tipo moneda */
    radial-gradient(circle at center, rgba(0,0,0,0.0) 0, rgba(0,0,0,0.85) 35%, rgba(0,0,0,1) 40%, rgba(0,0,0,0.9) 45%, rgba(0,0,0,1) 50%, rgba(0,0,0,0.96) 55%, rgba(0,0,0,1) 60%, rgba(0,0,0,0.0) 65% ),
    /* glow azul central (sigilo) */
    radial-gradient(circle at center, color-mix(in srgb, var(--mf-blue) 55%, transparent) 0, color-mix(in srgb, var(--mf-blue) 55%, transparent) 22%, transparent 60% ),
    /* base oscura */
    linear-gradient(to bottom, #050607 0%, #0a0e16 40%, #050607 100%);
    background-blend-mode: soft-light, normal, screen, normal;
    opacity: 0.9;
}

/* ligero fade top/bottom para pegar con divisor y siguiente sección */
.mf-section-sigil::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient( to bottom, rgba(5, 6, 10, 0.96) 0%, rgba(5, 6, 10, 0.0) 20%, rgba(5, 6, 10, 0.0) 80%, rgba(5, 6, 10, 0.96) 100% );
    pointer-events: none;
}
/* =========================================================
   BUNDLE SECTION – Ecosistema em painel glass
   ========================================================= */

#bundle.mf-section-lines-A.orange {
    padding-top: 3.5rem;
    padding-bottom: 4.2rem;
}

/* Painel glass sobre o pattern – agora com blur lateral */
#bundle .mf-section-pattern-inner {
    position: relative;
    max-width: 1100px;
    margin: 0 auto;
    padding: 2.4rem 2.8rem 2.6rem;

    border-radius: 32px;

    /* Glass base */
    background: linear-gradient(
        135deg,
        rgba(15, 23, 42, 0.80),
        rgba(3, 7, 18, 0.88)
    );
    border: 1px solid rgba(148, 163, 184, 0.28);

    /* Sombra profunda */
    box-shadow:
        0 40px 90px rgba(0, 0, 0, 0.95),
        0 0 0 1px rgba(15, 23, 42, 0.85);

    backdrop-filter: blur(18px);
    overflow: hidden;
}

/* Blur lateral – fusão suave com o fundo */
#bundle .mf-section-pattern-inner::before,
#bundle .mf-section-pattern-inner::after {
    content: "";
    position: absolute;
    top: -40px;
    bottom: -40px;
    width: 120px;
    pointer-events: none;
    filter: blur(42px);
    opacity: 0.45;
}

/* Blur esquerdo */
#bundle .mf-section-pattern-inner::before {
    left: -60px;
    background: linear-gradient(
        90deg,
        rgba(15, 23, 42, 0.55),
        rgba(15, 23, 42, 0.05)
    );
}

/* Blur direito */
#bundle .mf-section-pattern-inner::after {
    right: -60px;
    background: linear-gradient(
        270deg,
        rgba(15, 23, 42, 0.55),
        rgba(15, 23, 42, 0.05)
    );
}



/* Header dentro do painel */
#bundle .mf-section-header {
    max-width: 900px;
    margin: 0 auto 2.1rem;
    text-align: center;
    position: relative;
}

.mf-section-title {
    font-size: clamp(2.1rem, 2.6vw, 2.7rem);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
    color: #f9fafb;
    text-shadow: none;
}

#bundle .mf-highlight-ecosystem {
    color: var(--mf-orange);
}

#bundle .mf-section-subtitle {
    font-size: 0.98rem;
    color: #cbd5f5;
    max-width: 720px;
    margin: 0 auto;
}

/* Sem barra neón extra – deixamos o texto mandar */
#bundle .mf-section-header::after {
    content: none;
}

/* Grid interno – 3 colunas em desktop, adaptável em mobile */
#bundle .mf-gy-grid {
    display: grid;
    gap: 2.2rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 0.5rem;
}

@media (max-width: 1024px) {
    #bundle .mf-gy-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    #bundle .mf-gy-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Card base */
#bundle .mf-card-feature {
    position: relative;
    padding: 1.8rem 1.9rem 1.7rem 2rem;
    border-radius: 24px;
    background: radial-gradient( circle at top left, rgba(15, 23, 42, 0.98), rgba(3, 7, 18, 1) );
    border: 1px solid rgba(148, 163, 184, 0.35);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.85);
    overflow: hidden;
}

    /* Barra vertical de cor (diferente por card) */
    #bundle .mf-card-feature::before {
        content: "";
        position: absolute;
        inset-block: 0.9rem 0.9rem;
        left: 0.85rem;
        width: 3px;
        border-radius: 999px;
        background: linear-gradient( 180deg, rgba(148, 163, 184, 0.1), rgba(148, 163, 184, 0.45) );
    }

    /* 1: Figura – azul */
    #bundle .mf-card-feature:nth-child(1)::before {
        background: linear-gradient( 180deg, #1c8dff, #5cfff5 );
        box-shadow: 0 0 14px rgba(92, 255, 245, 0.7);
    }

    /* 2: Passaporte – violeta/teal */
    #bundle .mf-card-feature:nth-child(2)::before {
        background: linear-gradient( 180deg, #6366f1, #22d3ee );
        box-shadow: 0 0 14px rgba(99, 102, 241, 0.6);
    }

    /* 3: Token – laranja */
    #bundle .mf-card-feature:nth-child(3)::before {
        background: linear-gradient( 180deg, #ff5b00, #f97316 );
        box-shadow: 0 0 14px rgba(248, 113, 113, 0.55);
    }

    /* Títulos dentro dos cards */
    #bundle .mf-card-feature h3 {
        font-size: 1.25rem;
        margin-bottom: 0.45rem;
    }

    /* Texto principal dentro dos cards */
    #bundle .mf-card-feature > p {
        font-size: 0.95rem;
        color: #e5e7eb;
        margin-bottom: 0.7rem;
    }

/* Lista de bullets */
#bundle .mf-card-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

    #bundle .mf-card-list li {
        position: relative;
        padding-left: 1rem;
        font-size: 0.9rem;
        color: #cbd5f5;
        margin-bottom: 0.25rem;
    }

        /* Bullet personalizado */
        #bundle .mf-card-list li::before {
            content: "";
            position: absolute;
            left: 0;
            top: 0.55rem;
            width: 6px;
            height: 6px;
            border-radius: 999px;
            background: radial-gradient(circle, #f9fafb, #60a5fa);
            box-shadow: 0 0 8px rgba(96, 165, 250, 0.8);
            transform: translateY(-50%);
        }

/* ===========================
   Animaciones sigilo MaxiForge
   =========================== */

/* Rotación muy lenta de un halo exterior */
@keyframes mf-sigil-orbit-rotate {
    0% {
        transform: rotate(0deg);
        opacity: 0.55;
    }

    50% {
        opacity: 0.9;
    }

    100% {
        transform: rotate(360deg);
        opacity: 0.55;
    }
}

/* Pulso suave da runa central */
@keyframes mf-sigil-rune-pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 14px rgba(248, 250, 252, 0.55), 0 0 0 0 rgba(56, 189, 248, 0.0);
    }

    50% {
        transform: scale(1.04);
        box-shadow: 0 0 20px rgba(248, 250, 252, 0.9), 0 0 0 14px rgba(56, 189, 248, 0.18);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 14px rgba(248, 250, 252, 0.55), 0 0 0 0 rgba(56, 189, 248, 0.0);
    }
}

/* Halo orbital girando ao redor da runa */
#sigil .mf-sigil-orbit {
    position: relative;
    overflow: visible;
}

    #sigil .mf-sigil-orbit::after {
        content: "";
        position: absolute;
        inset: -18%;
        border-radius: 999px;
        border: 1px solid rgba(56, 189, 248, 0.35);
        box-shadow: 0 0 18px rgba(56, 189, 248, 0.45), 0 0 60px rgba(15, 23, 42, 0.95);
        opacity: 0.7;
        animation: mf-sigil-orbit-rotate 18s linear infinite;
    }

/* Pulso na runa principal */
#sigil .mf-sigil-rune-main {
    animation: mf-sigil-rune-pulse 4.8s ease-in-out infinite;
}

/* =========================================================
   EDITIONS CAROUSELS (CEL / FORGE / NEXTGEN) – FINAL
   ========================================================= */

/* ===== Sección y header compartidos ===== */

.mf-section-franchise {
    position: relative;
    padding: 3.5rem 0;
}

    .mf-section-franchise .container {
        position: relative;
        z-index: 1;
        padding: 2.3rem 2.4rem 2.4rem;
        border-radius: 1.8rem;
        background: radial-gradient(circle at 0 0, rgba(148,163,184,0.24), rgba(15,23,42,0.96) );
        border: 1px solid rgba(148,163,184,0.45);
        box-shadow: 0 0 0 1px rgba(15,23,42,0.9), 0 26px 80px rgba(0,0,0,0.95);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
    }

    .mf-section-franchise .mf-section-header {
        max-width: 820px;
        margin: 0 0 1.7rem;
        text-align: left;
    }

    .mf-section-franchise .mf-section-title {
        font-size: clamp(1.6rem, 2.1vw, 2rem);
        text-transform: uppercase;
        letter-spacing: 0.12em;
        margin-bottom: 0.4rem;
    }

    .mf-section-franchise .mf-section-subtitle {
        max-width: 700px;
        margin: 0;
        font-size: 0.98rem;
        color: #d1d5db;
        line-height: 1.6;
    }

@media (max-width: 768px) {
    .mf-section-franchise .container {
        padding: 1.8rem 1.4rem 1.8rem;
        border-radius: 1.4rem;
    }

    .mf-section-franchise .mf-section-header {
        margin-bottom: 1.3rem;
    }
}

/* =========================================================
   CAROUSEL BASE – usado por las 3 edições
   ========================================================= */

.mf-franchise-carousel {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.mf-franchise-track {
    flex: 1 1 auto;
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    scroll-behavior: smooth;
/*    padding: 0.5rem 0 0.75rem;*/
    scrollbar-width: none;
}

    .mf-franchise-track::-webkit-scrollbar {
        display: none;
    }

.mf-franchise-card {
    flex: 0 0 280px;
    scroll-snap-align: center;
    display: flex;
    justify-content: center;
    /*padding-bottom: 0.9rem;*/ /* espacio para la sombra inferior */
}

.mf-franchise-arrow {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    border: 1px solid rgba(148,163,184,0.7);
    background: radial-gradient(circle at 30% 0, rgba(15,23,42,1), rgba(15,23,42,0.92) );
    color: #e5e7eb;
    font-size: 1.6rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

    .mf-franchise-arrow:hover {
        box-shadow: 0 0 18px rgba(28,141,255,0.7);
        transform: translateY(-1px);
    }

@media (max-width: 1024px) {
    .mf-franchise-card {
        flex: 0 0 260px;
    }
}

@media (max-width: 640px) {
    .mf-franchise-card {
        flex: 0 0 240px;
    }

    .mf-franchise-arrow {
        display: none;
    }
}

/* =========================================================
   CARD BASE – usado por #editions-cel
   ========================================================= */

.mf-franchise-frame {
    position: relative;
    width: 100%;
    max-width: 320px;
    aspect-ratio: 3 / 4;
    border-radius: 0.9rem;
    overflow: hidden;
}

.mf-franchise-image {
    position: absolute;
    inset: 6px; /* coincide con rim */
    border-radius: 1rem;
    overflow: hidden;
    z-index: 1;
}

    .mf-franchise-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transform: scale(1.06);
        transition: transform .25s ease-out;
        filter: saturate(1.05) contrast(1.05);
    }

.mf-franchise-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient( 150deg, rgba(15,23,42,0.08), rgba(15,23,42,0.94) 55% );
}

.mf-franchise-header {
    position: absolute;
    top: 0.9rem;
    left: 1rem;
    right: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #f9fafb;
}

.mf-franchise-tag,
.mf-franchise-type {
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    background: rgba(15,23,42,0.9);
}

.mf-franchise-title-wrap {
    position: absolute;
    left: 1rem;
    bottom: 2.6rem; /* justo encima de las pills */
    right: 1rem;
    z-index: 7;
}

.mf-franchise-title {
    font-size: 1.12rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 700;
    color: #ffffff;
    text-shadow: 0 2px 4px rgba(0,0,0,0.65);
}

/* Meta pills uniformes (3 columnas) */

.mf-franchise-meta {
    position: absolute;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    display: flex;
    gap: 0.45rem;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #e5e7eb;
    z-index: 5; /* << clave */
}

.mf-fr-meta-item {
    flex: 1 1 0;
    padding: 0.35rem 0.45rem;
    border-radius: 999px;
    background: rgba(15,23,42,0.9);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* =========================================================
   CEL FRAME – Shading real + rim grueso
   ========================================================= */

.mf-franchise-card--cel .mf-franchise-frame {
    position: relative;
    width: 100%;
    max-width: 320px;
    aspect-ratio: 3 / 4;
    border-radius: 1rem;
    padding: 6px;
    /* Borde fuerte tipo botón */
    border: 3px solid var(--mf-black);
    /* Sombras internas estilo cel shading */
    box-shadow: inset -6px -6px 0 rgba(0, 0, 0, 0.45), inset 6px 6px 0 rgba(255, 255, 255, 0.25), 0 0 14px rgba(28, 141, 255, 0.35), 0 26px 65px rgba(0, 0, 0, 0.85);
    overflow: hidden;
    transition: transform .22s ease-out, box-shadow .22s ease-out, background .22s ease-out;
}

    /* panel interior */
    .mf-franchise-card--cel .mf-franchise-frame::before {
        content: "";
        position: absolute;
        inset: 6px;
        border-radius: 0.85rem;
        background: linear-gradient(160deg, rgba(255,255,255,0.06), rgba(15,23,42,0.92) 60% );
        z-index: 0;
    }

    /* contenido por encima */
    .mf-franchise-card--cel .mf-franchise-frame > * {
        position: relative;
        z-index: 2;
    }

    /* hover */
    .mf-franchise-card--cel .mf-franchise-frame:hover {
        transform: translateY(-6px);
        box-shadow: inset -7px -7px 0 rgba(0, 0, 0, 0.55), inset 7px 7px 0 rgba(255, 255, 255, 0.32), 0 0 18px rgba(28, 141, 255, 0.75), 0 36px 90px rgba(0, 0, 0, 0.90);
    }


/* =========================================================
   BASE MÍNIMA PARA OTROS CARDS (FORGE / NEXTGEN)
   ========================================================= */

.mf-card {
    display: block;
    justify-content: center;
    align-items: center;
}

/* =========================================================
   MAXIFORGE ADN – FORGE CARDS (editions-forge)
   ========================================================= */

.mf-card-forge {
    flex: 0 0 300px;
}

.mf-card-forge-frame {
    position: relative;
    width: 100%;
    max-width: 320px;
    aspect-ratio: 3 / 4;
    border-radius: 1.1rem;
    overflow: hidden;
    padding: 3px;
    background: linear-gradient(135deg,#1C8DFF,#FF5B00);
    box-shadow: 0 0 26px rgba(28,141,255,0.8), 0 32px 80px rgba(0,0,0,0.95);
}

    .mf-card-forge-frame::before {
        content: "";
        position: absolute;
        inset: 3px;
        border-radius: 1rem;
        background: radial-gradient(circle at 10% 0,rgba(255,255,255,0.06),transparent 55%), radial-gradient(circle at 90% 100%,rgba(255,91,0,0.14),transparent 60%), linear-gradient(145deg,#0B1220,#030712);
        box-shadow: -6px -6px 0 rgba(15,23,42,0.9), 6px 6px 0 rgba(0,0,0,0.95);
        z-index: 0;
    }

    .mf-card-forge-frame > * {
        position: relative;
        z-index: 1;
    }

.mf-card-forge-image {
    position: absolute;
    inset: 0;
    border-radius: 1rem;
    overflow: hidden;
}

    .mf-card-forge-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transform: scale(1.05);
        filter: saturate(1.05) contrast(1.05);
        transition: transform 0.25s ease-out;
    }

.mf-card-forge-overlay {
    position: absolute;
    inset: 0;
    border-radius: 1rem;
    background: linear-gradient(160deg, rgba(15,23,42,0.15), rgba(15,23,42,0.95) 62% );
}

.mf-card-forge-frame:hover .mf-card-forge-image img {
    transform: scale(1.10);
}

/* top pills */
.mf-card-forge-top {
    position: absolute;
    top: 0.85rem;
    left: 1rem;
    right: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.mf-pill {
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    border: 1px solid rgba(148,163,184,0.7);
    backdrop-filter: blur(6px);
    background: radial-gradient(circle at 30% 0, rgba(15,23,42,0.9), rgba(15,23,42,0.96) );
    color: #E5E7EB;
}

.mf-pill--edition {
    border-color: rgba(28,141,255,0.8);
}

.mf-pill--style {
    border-color: rgba(255,91,0,0.9);
}

/* tag central */
.mf-card-forge-tag {
    position: absolute;
    left: 1.2rem;
    right: 1.2rem;
    top: 45%;
    transform: translateY(-50%);
    padding: 0.7rem 0.9rem;
    border-radius: 1.1rem;
    border: 1px solid rgba(148,163,184,0.45);
    backdrop-filter: blur(12px);
    background: linear-gradient(135deg, rgba(15,23,42,0.96), rgba(15,23,42,0.88) );
    box-shadow: 0 0 20px rgba(0,0,0,0.9);
}

.mf-card-forge-tag-label {
    display: block;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: #60A5FA;
    margin-bottom: 0.15rem;
}

.mf-card-forge-tag-value {
    display: block;
    font-size: 0.9rem;
    color: #E5E7EB;
}

/* bottom */
.mf-card-forge-bottom {
    position: absolute;
    left: 1rem;
    right: 1rem;
    bottom: 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.mf-card-forge-name-block {
    background: radial-gradient(circle at 0 0, rgba(28,141,255,0.18), rgba(15,23,42,0.95) 55%);
    box-shadow: 0 0 14px rgba(15,23,42,0.85);
    border: 1px solid rgba(37,99,235,0.65);
    padding: 0.7rem 1rem 0.65rem; /* más padding vertical y horizontal */
}

.mf-card-forge-series {
    color: rgba(191, 219, 254, 0.9);
    display: block;
    margin-bottom: 0.22rem;
    font-size: 0.7rem;
    letter-spacing: 0.16em;
}

.mf-card-forge-name {
    color: #F9FAFB;
    font-size: 1.02rem;
    line-height: 1.25;
}

.mf-card-forge-stats {
    display: flex;
    justify-content: space-between;
    gap: 0.4rem;
}

.mf-card-forge-stat {
    flex: 1 1 0;
    padding: 0.25rem 0.35rem;
    border-radius: 999px;
    background: rgba(15,23,42,0.95);
    border: 1px solid rgba(30,64,175,0.8);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.11em;
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
}

    .mf-card-forge-stat .label {
        color: #9CA3AF;
    }

    .mf-card-forge-stat .value {
        color: #E5E7EB;
    }

/* =========================================================
   NEXT GEN / HUT CARDS (editions-nextgen)
   ========================================================= */

.mf-card-hut {
    flex: 0 0 310px;
}

.mf-card-hut-frame {
    position: relative;
    width: 100%;
    max-width: 340px;
    aspect-ratio: 3 / 4;
    background: #050815;
    border-radius: 1rem;
    overflow: hidden;
    padding: 6px;
    box-shadow: 0 0 26px rgba(0,0,0,0.9), 0 32px 90px rgba(0,0,0,0.98);
}

    .mf-card-hut-frame::before {
        content: "";
        position: absolute;
        inset: 6px;
        border-radius: 0.85rem;
        background: radial-gradient(circle at 0 0,rgba(255,255,255,0.04),transparent 55%), linear-gradient(145deg,#020617,#0b1120);
        border: 1px solid rgba(55,65,81,0.9);
        z-index: 0;
    }

    .mf-card-hut-frame > * {
        position: relative;
        z-index: 1;
    }

/* rating box */
.mf-card-hut-rating {
    position: absolute;
    top: 0.65rem;
    left: 0.65rem;
    width: 4.4rem;
    border-radius: 0.4rem;
    padding: 0.25rem 0.2rem 0.4rem;
    background: linear-gradient(145deg,#111827,#020617);
    border: 3px solid #F9FAFB;
    box-shadow: 0 0 14px rgba(15,23,42,0.95);
    text-align: center;
    position: absolute;
    z-index: 20 !important; /* garantizamos que esté arriba del frame */
    pointer-events: auto;

}

.mf-card-hut-rating-value {
    display: block;
    font-size: 2.1rem;
    line-height: 1;
    font-weight: 800;
    color: #F9FAFB;
}

.mf-card-hut-rating-role {
    display: block;
    margin-top: 0.1rem;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.11em;
    color: #E5E7EB;
}

/* imagen principal */
.mf-card-hut-image {
    position: absolute;
    inset: 0.7rem 0.9rem 4.2rem 1.4rem;
    overflow: hidden;
    border-radius: 0.9rem;
}

    .mf-card-hut-image img {
        width: 140%;
        height: 140%;
        object-fit: cover;
        transform: translate(-10%,-4%) scale(1.05);
        filter: saturate(1.1) contrast(1.08);
        transition: transform 0.25s ease-out;
    }

/* marco blanco */
.mf-card-hut-border {
    position: absolute;
    inset: 1.1rem 1.2rem 4.6rem 1.9rem;
    border-radius: 0.9rem;
    border: 6px solid #F9FAFB;
    border-bottom-width: 0;
    border-width: 7px;
    box-shadow: 0 0 20px rgba(249,250,251,0.85), 0 0 40px rgba(15,23,42,0.95);
}

    .mf-card-hut-border::after {
        content: "";
        position: absolute;
        top: -3px;
        left: -3px;
        width: 40%;
        height: 5px;
        border-radius: 999px;
        background: linear-gradient(90deg, #ffffff, rgba(255,255,255,0));
        opacity: 0.9;
    }
/* badge */
.mf-card-hut-badge {
    position: absolute;
    top: 1.35rem;
    right: 1.4rem;
    padding: 0.25rem 0.7rem;
    border-radius: 0.6rem;
    background: rgba(15,23,42,0.75); /* base oscura tipo glass */
    box-shadow: 0 0 16px rgba(248,113,22,0.8);
}

.mf-card-hut-badge-label {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: #111827;
    font-size: 0.6rem; /* más pequeño */
    font-weight: 600;
}

/* texto vertical */
/* NEXT GEN – texto vertical con presencia real */
.mf-card-hut-side-label {
    position: absolute;
    top: 3.2rem;
    right: 0.2rem;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-size: 0.72rem; /* más pequeño */
    font-weight: 700; /* más bold */
    letter-spacing: 0.22em;
    text-transform: uppercase;
    padding: 0.40rem 0.1rem; /* menos caja alrededor */
    border-radius: 0.6rem;
    background: rgba(0,0,0, 1);
    border: 1px solid rgba(148,163,184,0.9);
    color: #F9FAFB;
    text-shadow: 0 0px 10px rgba(0,0,0,0.9);
    z-index: 3;
}

    /* barra luminosa detrás, más gruesa y evidente */
    .mf-card-hut-side-label::before {
        content: "";
        position: absolute;
        inset: -0.5rem 48%;
        transform: translateX(-50%);
        width: 2px;
        border-radius: 999px;
        box-shadow: 0 0 10px rgba(255,255,255,0.7);
        z-index: -1;
    }

/* color de acento según el tipo de carta */
.mf-card-hut--blue .mf-card-hut-side-label {
    border-color: rgba(28,141,255,0.9);
}

.mf-card-hut--orange .mf-card-hut-side-label {
    border-color: rgba(255,91,0,0.9);
}

.mf-card-hut--violet .mf-card-hut-side-label {
    border-color: rgba(160,60,255,0.9);
}


/* nameplate inferior */
.mf-card-hut-nameplate {
    position: absolute;
    left: 1.3rem;
    right: 1.3rem;
    bottom: 1.25rem; /* lo mantenemos cerca del borde como antes */
    top: auto; /* por si alguna regla lo estaba empujando hacia arriba */
    margin: 0; /* que no lo desplace nada raro */

    padding: 0.55rem 0.95rem 0.5rem;
    border-radius: 0.9rem;
    background: radial-gradient(circle at 0 0, rgba(255,255,255,0.09), rgba(15,23,42,0.96) 55%);
    border: 1px solid rgba(148,163,184,0.85);
    box-shadow: 0 0 18px rgba(0,0,0,0.95), 0 0 14px rgba(15,23,42,0.9);
    backdrop-filter: blur(12px);
}

.mf-card-hut-name-meta {
    font-size: 0.55rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #9CA3AF;
    margin-bottom: 0.18rem;
}


.mf-card-hut-name {
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    color: #F9FAFB;
}

/* footer chip */
.mf-card-hut-footer-chip {
    position: absolute;
    left: 1rem;
    bottom: 0.2rem;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.22rem 0.55rem;
    border-radius: 999px;
    background: rgba(15,23,42,0.96);
    border: 1px solid rgba(55,65,81,0.9);
    font-size: 0.68rem;
    color: #E5E7EB;
}

.mf-card-hut-footer-logo {
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg,#1C8DFF,#FF5B00);
    color: #020617;
    font-weight: 700;
}

/* hover */
.mf-card-hut-frame:hover .mf-card-hut-image img {
    transform: translate(-10%,-4%) scale(1.1);
}

/* =========================================================
   CEL FRAME – meta pills visibles
   ========================================================= */

.mf-franchise-card--cel .mf-franchise-meta {
    position: absolute;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    display: flex;
    gap: 0.45rem;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #e5e7eb;
    z-index: 6; /* por encima de imagen y overlay */
    bottom: 1.3rem; /* antes 1rem */
}

.mf-franchise-card--cel .mf-fr-meta-item {
    flex: 1 1 0;
    padding: 0.35rem 0.45rem;
    border-radius: 999px;
    background: rgba(15,23,42,0.92);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* 2) La imagen no llega hasta el borde de abajo */
.mf-franchise-card--cel .mf-franchise-image {
    position: absolute;
    inset: 6px 6px 52px 6px; /* antes: 6px en todos los lados */
    border-radius: 0.85rem;
    overflow: hidden;
    z-index: 1;
}

/* 3) Título un poco más arriba */
.mf-franchise-card--cel .mf-franchise-title-wrap {
    position: absolute;
    left: 1rem;
    right: 1rem;
    bottom: 3.1rem; /* más altura sobre las pills */
    z-index: 7;
}

/* =========================================
   EDICIONES – centrar título igual ao bundle
   ========================================= */

#editions-cel .mf-section-header,
#editions-forge .mf-section-header,
#editions-nextgen .mf-section-header {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

#editions-cel .mf-section-title,
#editions-forge .mf-section-title,
#editions-nextgen .mf-section-title {
    text-align: center;
}

#editions-cel .mf-section-subtitle,
#editions-forge .mf-section-subtitle,
#editions-nextgen .mf-section-subtitle {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}
/* =========================================
   EDICIONES – glass igual ao bundle
   ========================================= */

#editions-cel .container,
#editions-forge .container,
#editions-nextgen .container {
    background: radial-gradient(circle at 0 0, rgba(60, 70, 90, 0.15), rgba(10, 16, 32, 0.92) );
    border: 1px solid rgba(120, 140, 170, 0.38);
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.75), 0 26px 80px rgba(0, 0, 0, 0.85);
}
/* =========================================================
   CEL FRAME – hover sem estática
   ========================================================= */

.mf-franchise-card--cel .mf-franchise-frame:hover {
    transform: none !important; /* adiós al salto */
    box-shadow: inset -7px -7px 0 rgba(0,0,0,0.55), inset 7px 7px 0 rgba(255,255,255,0.32), 0 0 22px rgba(28,141,255,0.75), 0 32px 70px rgba(0,0,0,0.95); /* más sutil */
}
/* Imagen con efecto chulo */
.mf-franchise-card--cel .mf-franchise-image img {
    transform: scale(1.0);
    filter: saturate(1.05) contrast(1.05);
    transition: transform .35s ease, filter .35s ease, opacity .35s ease;
}

/* Hover SOLO sobre la imagen */
.mf-franchise-card--cel .mf-franchise-frame:hover .mf-franchise-image img {
    transform: scale(1.09); /* zoom elegante */
    filter: saturate(1.15) contrast(1.12);
    opacity: 0.92; /* un velo cinematográfico */
}
.mf-franchise-card--cel .mf-franchise-frame::after {
    content: "";
    position: absolute;
    inset: 6px;
    border-radius: 0.85rem;
    background: linear-gradient( 115deg, transparent 0%, rgba(255, 255, 255, 0.9) 50%, transparent 100% );
    mix-blend-mode: screen;
    pointer-events: none;
    opacity: 0;
    transform: translate3d(-140%, 0, 0); /* empieza fuera a la izquierda */
}

.mf-franchise-card--cel .mf-franchise-frame:hover::after {
    animation: mf-card-sheen 0.9s ease-out;
}

@keyframes mf-card-sheen {
    0% {
        transform: translate3d(-140%, 0, 0);
        opacity: 0;
    }

    20% {
        opacity: 0.9;
    }

    80% {
        opacity: 0;
    }

    100% {
        transform: translate3d(140%, 0, 0);
        opacity: 0;
    }
}
/* =========================================
   CEL FRAME – static / gif swap on hover
   ========================================= */

.mf-franchise-card--cel .mf-franchise-image {
    position: absolute;
    inset: 6px 6px 52px 6px; /* lo que ya tenías ajustado */
    border-radius: 0.85rem;
    overflow: hidden;
    z-index: 1;
}

    /* Base styles for both images */
    .mf-franchise-card--cel .mf-franchise-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transform: scale(1.03);
        filter: saturate(1.05) contrast(1.05);
    }

/* Static image visible by default */
.mf-franchise-card--cel .mf-img-static {
    opacity: 1;
    transition: opacity .35s ease;
}

/* GIF hidden by default */
.mf-franchise-card--cel .mf-img-animated {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity .35s ease;
}

/* Hover: show GIF, hide static */
.mf-franchise-card--cel .mf-franchise-frame:hover .mf-img-static {
    opacity: 0;
}

.mf-franchise-card--cel .mf-franchise-frame:hover .mf-img-animated {
    opacity: 1;
}
.mf-franchise-card--cel .mf-img-animated {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity .35s ease;
}

.mf-franchise-card--cel .mf-franchise-frame:hover .mf-img-animated {
    opacity: 1;
}
/* =========================================================
   CEL FRAME – Variantes MaxiForge con colores del :root
   ========================================================= */

/* BLUE ==================================================== */
.mf-franchise-card--cel.mf-franchise-card--blue .mf-franchise-frame {
    background: var(--mf-blue);
    border-color: var(--mf-black);
    /* sombras tipo botón */
    box-shadow: inset -6px -6px 0 rgba(0, 0, 0, 0.45), inset 6px 6px 0 rgba(255, 255, 255, 0.25), 0 0 16px rgba(28, 141, 255, 0.55), 0 26px 65px rgba(0,0,0,0.85);
}

    /* highlight interno adaptado */
    .mf-franchise-card--cel.mf-franchise-card--blue .mf-franchise-frame::before {
        background: linear-gradient(160deg, rgba(255,255,255,0.12), rgba(15,23,42,0.92) 62% );
    }


/* ORANGE ================================================== */
.mf-franchise-card--cel.mf-franchise-card--orange .mf-franchise-frame {
    background: var(--mf-orange);
    border-color: var(--mf-black);
    box-shadow: inset -6px -6px 0 rgba(0, 0, 0, 0.45), inset 6px 6px 0 rgba(255, 255, 255, 0.25), 0 0 16px rgba(255, 91, 0, 0.55), 0 26px 65px rgba(0,0,0,0.85);
}

    .mf-franchise-card--cel.mf-franchise-card--orange .mf-franchise-frame::before {
        background: linear-gradient(160deg, rgba(255,255,255,0.10), rgba(15,23,42,0.92) 62% );
    }


/* VIOLET ================================================== */
.mf-franchise-card--cel.mf-franchise-card--violet .mf-franchise-frame {
    background: var(--mf-violet);
    border-color: var(--mf-black);
    box-shadow: inset -6px -6px 0 rgba(0, 0, 0, 0.45), inset 6px 6px 0 rgba(255, 255, 255, 0.25), 0 0 16px rgba(160, 60, 255, 0.55), 0 26px 65px rgba(0,0,0,0.85);
}

    .mf-franchise-card--cel.mf-franchise-card--violet .mf-franchise-frame::before {
        background: linear-gradient(160deg, rgba(255,255,255,0.12), rgba(15,23,42,0.92) 62% );
    }
/* =========================================
   FORGE CARDS – compactar centro y pills
   ========================================= */

/* Bloque central más ligero */
.mf-card-forge-tag {
    top: 42%; /* un poco más arriba */
    padding: 0.55rem 0.8rem; /* menos gordo */
    border-radius: 0.9rem;
    border-width: 1px; /* antes 1px ya está, solo reforzamos intención */
    max-width: 82%;
    margin: 0 auto;
}

.mf-card-forge-tag-label {
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    margin-bottom: 0.08rem;
    opacity: 0.85;
}

.mf-card-forge-tag-value {
    font-size: 0.86rem;
    line-height: 1.25;
}

/* Damos un pelín más de aire abajo */
.mf-card-forge-bottom {
    bottom: 1.1rem;
}

/* Pills inferiores más estables */
.mf-card-forge-stats {
    align-items: stretch;
}

.mf-card-forge-stat {
    min-height: 2.2rem;
    text-align: left;
    align-items: flex-start;
    justify-content: center;
}

    .mf-card-forge-stat .label {
        font-size: 0.6rem;
        line-height: 1.1;
    }

    .mf-card-forge-stat .value {
        font-size: 0.7rem;
        line-height: 1.15;
    }
.mf-franchise-card,
.mf-franchise-card * {
    cursor: pointer;
}
/* =========================================
   FORGE SERIES – más alto, más aire
   ========================================= */

/* Más padding en la sección y separación del header */
#editions-forge.mf-page-section {
    padding-top: 4.5rem;
    padding-bottom: 4.5rem;
}

#editions-forge .container {
    padding: 3rem 3.5rem;
}

#editions-forge .mf-section-header {
    margin-bottom: 2.5rem;
}

/* Cards un poco más grandes y altos */
.mf-card-forge {
    flex: 0 0 320px; /* antes 300px */
}

.mf-card-forge-frame {
    max-width: 340px;
    aspect-ratio: 3 / 4.5; /* más alto que el 3/4 original */
}

/* Top pills un pelín más separadas del borde */
.mf-card-forge-top {
    top: 1.1rem;
}

/* Bloque central más limpio y con espacio */
.mf-card-forge-tag {
    top: 44%; /* baja un poco respecto a la parte superior */
    padding: 0.6rem 0.9rem;
    border-radius: 0.9rem;
    max-width: 82%;
    margin: 0 auto;
}

.mf-card-forge-tag-label {
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    margin-bottom: 0.08rem;
}

.mf-card-forge-tag-value {
    font-size: 0.86rem;
    line-height: 1.3;
}

/* Más aire abajo para nombre + stats */
.mf-card-forge-bottom {
    bottom: 1.4rem;
}

/* Stats inferiores más uniformes */
.mf-card-forge-stats {
    align-items: stretch;
    margin-top: 0.3rem;
}

.mf-card-forge-stat {
    flex: 1 1 0;
    padding: 0.35rem 0.6rem; /* aire interno */
    min-height: 2.6rem; /* altura uniforme */
    border-radius: 999px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    gap: 0.1rem;
}

    .mf-card-forge-stat .label {
        font-size: 0.62rem;
        letter-spacing: 0.14em;
        opacity: 0.75;
    }

    .mf-card-forge-stat .value {
        font-size: 0.75rem;
        letter-spacing: 0.13em;
    }
/* FORGE – pills inferiores más estables */
.mf-card-forge-stats {
    align-items: stretch;
}

.mf-card-forge-stat {
    flex: 1 1 0;
    min-height: 2.3rem; /* misma altura */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    text-align: left;
    background: rgba(15,23,42,0.82);
    border: 1px solid rgba(28,141,255,0.55); /* azul MF */
    box-shadow: 0 0 8px rgba(28,141,255,0.55), 0 0 18px rgba(28,141,255,0.35);
}

    .mf-card-forge-stat .label {
        font-size: 0.6rem;
        line-height: 1.1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .mf-card-forge-stat .value {
        font-size: 0.7rem;
        line-height: 1.15;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
/* FORGE – base para imagen estática / vídeo */
.mf-card-forge-image {
    position: absolute;
    inset: 0;
    border-radius: 1rem;
    overflow: hidden;
}

    .mf-card-forge-image img,
    .mf-card-forge-image video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transform: scale(1.05);
        filter: saturate(1.05) contrast(1.05);
        transition: opacity .35s ease, transform .35s ease, filter .35s ease;
    }

/* Static visible por defecto */
.mf-forge-img-static {
    position: absolute;
    inset: 0;
    opacity: 1;
}

/* WebM oculto por defecto */
.mf-forge-img-animated {
    position: absolute;
    inset: 0;
    opacity: 0;
}

/* FORGE – hover: vídeo limpio, sin UI */
.mf-card-forge-frame:hover .mf-forge-img-static {
    opacity: 0;
}

.mf-card-forge-frame:hover .mf-forge-img-animated {
    opacity: 1;
    transform: scale(1.08);
    filter: saturate(1.15) contrast(1.12);
}

/* Apagamos overlay y toda la interfaz durante el hover */
.mf-card-forge-frame:hover .mf-card-forge-overlay,
.mf-card-forge-frame:hover .mf-card-forge-top,
.mf-card-forge-frame:hover .mf-card-forge-tag,
.mf-card-forge-frame:hover .mf-card-forge-bottom {
    opacity: 0;
    transform: translateY(4px);
    pointer-events: none;
    transition: opacity .25s ease, transform .25s ease;
}

/* Estado normal: UI visible */
.mf-card-forge-overlay,
.mf-card-forge-top,
.mf-card-forge-tag,
.mf-card-forge-bottom {
    transition: opacity .25s ease, transform .25s ease;
}
    /* FORGE – pills de arriba (edição / tipo) con misma altura */
    .mf-card-forge-top .mf-pill {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 2.1rem; /* fuerza altura consistente */
        padding: 0.25rem 0.9rem; /* un poco más de aire lateral */
        line-height: 1.1;
        white-space: nowrap; /* evita que se rompa en 2 líneas */
    }
    .mf-card-forge-top .mf-pill {
        overflow: hidden;
        text-overflow: ellipsis;
    }
/* FORGE – overlay mucho más suave */
.mf-card-forge-overlay {
    backdrop-filter: blur(1px);
    background: rgba(15, 23, 42, 0.03);
}


/* Hover: overlay casi desaparece por completo */
.mf-card-forge-frame:hover .mf-card-forge-overlay {
    opacity: 0.05; /* se ve el video limpio */
}
/* BLUE */
.mf-card-hut--blue .mf-card-hut-nameplate {
    border-color: rgba(28,141,255,0.95);
    box-shadow: 0 0 20px rgba(28,141,255,0.75), 0 0 40px rgba(0,0,0,0.95);
}

.mf-card-hut--blue .mf-card-hut-name {
    text-shadow: none;
}

/* ORANGE */
.mf-card-hut--orange .mf-card-hut-nameplate {
    border-color: rgba(255,91,0,0.95);
    box-shadow: 0 0 20px rgba(255,91,0,0.7), 0 0 40px rgba(0,0,0,0.95);
}

.mf-card-hut--orange .mf-card-hut-name {
    text-shadow: none;
}

/* VIOLET */
.mf-card-hut--violet .mf-card-hut-nameplate {
    border-color: rgba(160,60,255,0.95);
    box-shadow: 0 0 20px rgba(160,60,255,0.75), 0 0 40px rgba(0,0,0,0.95);
}

.mf-card-hut--violet .mf-card-hut-name {
    text-shadow: none;
}

.mf-card-hut,
.mf-card-hut * {
    font-family: 'Racing Sans One', sans-serif !important;
}
    /* NEXT GEN – top label refinado */
    .mf-card-hut .mf-card-hut-badge {
        padding: 0.18rem 0.55rem;
        border-radius: 0.45rem;
        font-size: 0.72rem;
        font-weight: 600;
        letter-spacing: 0.14em;
        background: rgba(255,91,0,0.75); /* más suave */
        box-shadow: 0 0 10px rgba(0,0,0,0.55);
        border: 1px solid rgba(255,91,0,0.65);
        top: 0.65rem;
        right: 0.65rem;
    }
.mf-card-hut--blue .mf-card-hut-badge {
    background: rgba(28,141,255,0.75);
    border-color: rgba(28,141,255,0.65);
}

.mf-card-hut--orange .mf-card-hut-badge {
    background: rgba(255,91,0,0.75);
    border-color: rgba(255,91,0,0.65);
}

.mf-card-hut--violet .mf-card-hut-badge {
    background: rgba(160,60,255,0.75);
    border-color: rgba(160,60,255,0.65);
}
/* OPTIONAL – top label glass style */
.mf-card-hut-badge {
    background: rgba(15,23,42,0.45);
    border: 1px solid rgba(255,255,255,0.18);
    color: #ffffff !important;

}
/* ==============================
   PASSPORT ALBUM – VARIABLES
   ============================== */

:root {
    --mf-passport-bg: #050609;
    --mf-passport-panel: #0f141c;
    --mf-passport-border: rgba(28, 141, 255, 0.35);
    --mf-passport-border-soft: rgba(28, 141, 255, 0.18);
    --mf-passport-accent: #1c8dff;
    --mf-passport-text-main: #e3f1ff;
    --mf-passport-text-soft: #7aa9d9;
}

/* Ejemplo de override para modo claro si ya tienes theme-light */
body.theme-light {
    --mf-passport-bg: #f5f7fb;
    --mf-passport-panel: #ffffff;
    --mf-passport-border: rgba(19, 45, 71, 0.35);
    --mf-passport-border-soft: rgba(19, 45, 71, 0.18);
    --mf-passport-accent: #1c8dff;
    --mf-passport-text-main: #16202e;
    --mf-passport-text-soft: #55708f;
}

/* ==============================
   PASSPORT ALBUM – LAYOUT
   ============================== */

.mf-passport-album {
    background: radial-gradient(circle at top, rgba(28,141,255,0.15) 0, transparent 55%) var(--mf-passport-bg);
}

.mf-passport-album-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 64px 24px 80px;
}

/* HEADER */
.mf-passport-album-header {
    text-align: center;
    margin-bottom: 40px;
}

    .mf-passport-album-header h2 {
        font-family: "Russo One", system-ui, sans-serif;
        font-size: 2.4rem;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: var(--mf-passport-accent);
        margin-bottom: 10px;
    }

    .mf-passport-album-header p {
        margin: 0;
        font-size: 0.95rem;
        color: var(--mf-passport-text-soft);
    }

/* FILTERS / COUNTER */
.mf-passport-filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    margin-top: 24px;
    gap: 16px;
}

.mf-passport-count .label {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--mf-passport-text-soft);
}

.mf-passport-count .value {
    font-family: "Russo One";
    color: var(--mf-passport-text-main);
    font-size: 1.1rem;
}

.mf-passport-filter-controls {
    display: flex;
    gap: 12px;
}

.mf-passport-filter {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid var(--mf-passport-border-soft);
    background: rgba(0, 0, 0, 0.2);
}

    .mf-passport-filter span {
        font-size: 0.8rem;
        color: var(--mf-passport-text-soft);
    }

    .mf-passport-filter select {
        background: transparent;
        border: none;
        outline: none;
        font-size: 0.85rem;
        color: var(--mf-passport-text-main);
    }

/* GRID */
.mf-passport-grid {
    display: grid;
    gap: 32px;
    margin-top: 36px;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* CARD BASE */
.mf-passport-card {
    position: relative;
    perspective: 1200px;
}

.mf-passport-card-inner {
    position: relative;
    border-radius: 14px;
    padding: 18px 18px 20px;
    background: radial-gradient(circle at top, rgba(28,141,255,0.25) 0, transparent 55%) var(--mf-passport-panel);
    border: 1px solid var(--mf-passport-border-soft);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), 0 18px 35px rgba(0, 0, 0, 0.75);
    transform-style: preserve-3d;
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}

.mf-passport-card.is-owned .mf-passport-card-inner:hover {
    transform: translateY(-6px) rotateX(3deg);
    border-color: var(--mf-passport-border);
    box-shadow: 0 0 25px rgba(28,141,255,0.6), 0 26px 50px rgba(0, 0, 0, 0.9);
}

/* TOP TAGS */
.mf-passport-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--mf-passport-text-soft);
}

.mf-passport-tag {
    opacity: 0.9;
}

.mf-passport-series {
    font-weight: 600;
    color: var(--mf-passport-accent);
}

/* RUNES */
.mf-passport-runes {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 18px;
    margin: 16px 0 14px;
    font-size: 1.3rem;
    color: var(--mf-passport-accent);
    text-shadow: 0 0 12px rgba(28,141,255,0.9);
}

    .mf-passport-runes .central {
        font-size: 1.6rem;
    }

/* IMAGE */
.mf-passport-image {
    position: relative;
    border-radius: 10px;
    padding: 8px;
    border: 1px solid var(--mf-passport-border);
    background: radial-gradient(circle at top, rgba(28,141,255,0.38) 0, transparent 60%);
    overflow: hidden;
}

    .mf-passport-image img {
        display: block;
        width: 100%;
        border-radius: 6px;
        filter: contrast(1.1) saturate(0.9);
    }

/* Locked placeholder */
.mf-passport-card.is-locked .mf-passport-image {
    background: linear-gradient(135deg, #171b24, #0c0f15);
    border-style: dashed;
    border-color: rgba(122,169,217,0.4);
    display: flex;
    justify-content: center;
    align-items: center;
}

.mf-passport-locked-symbol {
    font-size: 2.1rem;
    color: var(--mf-passport-text-soft);
    opacity: 0.8;
}

/* NAME */
.mf-passport-name {
    margin: 18px 0 12px;
    text-align: center;
    font-family: "Russo One";
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-size: 1.1rem;
    color: var(--mf-passport-text-main);
}

/* META DATA */
.mf-passport-meta {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
}

    .mf-passport-meta div {
        display: flex;
        justify-content: space-between;
        font-size: 0.8rem;
        font-family: "Racing Sans One", system-ui, sans-serif;
        color: var(--mf-passport-text-soft);
    }

    .mf-passport-meta span {
        text-transform: uppercase;
        letter-spacing: 0.16em;
        font-size: 0.7rem;
        opacity: 0.75;
    }

    .mf-passport-meta strong {
        color: var(--mf-passport-text-main);
    }

/* FOOTER */
.mf-passport-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
}

.mf-passport-status {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
}

    .mf-passport-status.is-active {
        color: var(--mf-passport-accent);
    }

    .mf-passport-status.is-locked {
        color: var(--mf-passport-text-soft);
    }


/* Locked cards: sin hover potente */
.mf-passport-card.is-locked .mf-passport-card-inner:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.7);
}

/* ==============================
   PASSPORT SLOTS (MOLDES VACÍOS)
   ============================== */

.mf-passport-slot {
    position: relative;
}

.mf-passport-slot-inner {
    position: relative;
    border-radius: 14px;
    padding: 18px;
    background: radial-gradient(circle at top, rgba(28,141,255,0.08) 0, transparent 60%) var(--mf-passport-bg);
    border: 1px dashed var(--mf-passport-border-soft);
    box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.9), 0 10px 22px rgba(0, 0, 0, 0.7);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
}

/* El “hueco” donde iría la card */
.mf-passport-slot-outline {
    border-radius: 12px;
    padding: 6px;
    border: 1px solid rgba(28,141,255,0.2);
    background: radial-gradient(circle at top, rgba(0,0,0,0.9) 0, #050609 60%);
    margin-bottom: 14px;
    box-shadow: inset 0 0 18px rgba(0, 0, 0, 1), inset 0 0 30px rgba(28,141,255,0.2);
}

.mf-passport-slot-shape {
    height: 160px;
    border-radius: 10px;
    border: 1px dashed rgba(28,141,255,0.25);
    background: linear-gradient(135deg, rgba(28,141,255,0.12), transparent 40%), radial-gradient(circle at bottom, rgba(0,0,0,0.9), transparent 70%);
    box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.9);
    position: relative;
}

    .mf-passport-slot-shape::before {
        content: "+";
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: "Russo One", system-ui, sans-serif;
        font-size: 2.4rem;
        color: rgba(28,141,255,0.35);
        text-shadow: 0 0 12px rgba(28,141,255,0.5);
    }

/* Texto del slot */
.mf-passport-slot-content {
    text-align: left;
}

.mf-passport-slot-label {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--mf-passport-text-soft);
    margin-bottom: 4px;
}

.mf-passport-slot-title {
    font-family: "Russo One";
    font-size: 1rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--mf-passport-text-main);
    margin-bottom: 4px;
}

.mf-passport-slot-text {
    font-size: 0.8rem;
    color: var(--mf-passport-text-soft);
    max-width: 260px;
}

/* Hover muy suave, sin parecer card activa */
.mf-passport-slot-inner:hover {
    border-color: var(--mf-passport-border);
    box-shadow: inset 0 0 26px rgba(0, 0, 0, 1), 0 14px 26px rgba(0, 0, 0, 0.8);
}
/* ==============================
   PASSPORT SLOTS (MISMO TAMAÑO QUE LAS CARDS)
   ============================== */

.mf-passport-slot {
    position: relative;
    height: 100%; /* obligatorio para igualar */
}

/* Igualar el contenedor interno al de las cards reales */
.mf-passport-slot-inner {
    position: relative;
    border-radius: 14px;
    padding: 18px;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: radial-gradient(circle at top, rgba(28,141,255,0.08) 0, transparent 60%) var(--mf-passport-bg);
    border: 1px dashed var(--mf-passport-border-soft);
    box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.9), 0 10px 22px rgba(0, 0, 0, 0.7);
}

/* El “hueco” ocupa el espacio equivalente al de la imagen de los passports */
.mf-passport-slot-outline {
    border-radius: 12px;
    padding: 6px;
    border: 1px solid rgba(28,141,255,0.2);
    /* Este es el tamaño que iguala a la imagen de los passports */
    height: 190px;
    background: radial-gradient(circle at top, rgba(0,0,0,0.9) 0, #050609 60%);
    margin-bottom: 18px;
    box-shadow: inset 0 0 18px rgba(0, 0, 0, 1), inset 0 0 30px rgba(28,141,255,0.2);
}

.mf-passport-slot-shape {
    height: 100%; /* llena el outline */
    border-radius: 10px;
    border: 1px dashed rgba(28,141,255,0.25);
    background: linear-gradient(135deg, rgba(28,141,255,0.12), transparent 40%), radial-gradient(circle at bottom, rgba(0,0,0,0.9), transparent 70%);
    box-shadow: inset 0 0 18px rgba(0,0,0,0.9);
    position: relative;
}

    .mf-passport-slot-shape::before {
        content: "+";
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: "Russo One", system-ui, sans-serif;
        font-size: 2.4rem;
        color: rgba(28,141,255,0.35);
        text-shadow: 0 0 12px rgba(28,141,255,0.5);
    }

/* Texto */
.mf-passport-slot-content {
    text-align: left;
    margin-top: auto; /* empuja hacia abajo igual que el footer de las cards */
    padding-top: 8px;
}

.mf-passport-slot-label {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--mf-passport-text-soft);
    margin-bottom: 4px;
}

.mf-passport-slot-title {
    font-family: "Russo One";
    font-size: 1rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--mf-passport-text-main);
    margin-bottom: 4px;
}

.mf-passport-slot-text {
    font-size: 0.8rem;
    color: var(--mf-passport-text-soft);
    max-width: 260px;
}

/* Hover sutil */
.mf-passport-slot-inner:hover {
    border-color: var(--mf-passport-border);
    box-shadow: inset 0 0 26px rgba(0, 0, 0, 1), 0 14px 26px rgba(0, 0, 0, 0.8);
}


/* =========================================================
   BASE TIMELINE
   ========================================================= */

.mf-timeline {
    width: 100%;
    margin-top: 2rem;
}

/* Typography tweaks */
.mf-timeline-title {
    font-size: 1rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #F9FAFB;
}

.mf-timeline-text {
    font-size: 0.9rem;
    color: #CBD5F5;
    line-height: 1.6;
}

.mf-timeline-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.13em;
    color: #9CA3AF;
}

    .mf-timeline-meta li {
        padding: 0.25rem 0.6rem;
        border-radius: 999px;
        background: rgba(15,23,42,0.9);
        border: 1px solid rgba(148,163,184,0.6);
    }

/* Color helpers */
.mf-timeline-node--blue,
.mf-timeline-dot--blue,
.mf-timeline-ticket--blue {
    --mf-tl-color: var(--mf-blue);
}

.mf-timeline-node--orange,
.mf-timeline-dot--orange,
.mf-timeline-ticket--orange {
    --mf-tl-color: var(--mf-orange);
}

.mf-timeline-node--violet,
.mf-timeline-dot--violet,
.mf-timeline-ticket--violet {
    --mf-tl-color: var(--mf-violet);
}

/* =========================================================
   TIMELINE A – HORIZONTAL
   ========================================================= */

.mf-timeline--horizontal {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.75rem;
}

.mf-timeline-step {
    position: relative;
    list-style: none;
}

.mf-timeline-node {
    position: relative;
    width: 3rem;
    height: 3rem;
    margin: 0 auto 0.9rem;
    border-radius: 999px;
    border: 2px solid var(--mf-black);
    background: var(--mf-tl-color, var(--mf-blue));
    box-shadow: inset -4px -4px 0 rgba(0,0,0,0.45), inset 4px 4px 0 rgba(255,255,255,0.22), 0 0 18px rgba(17,24,39,0.9);
    display: flex;
    align-items: center;
    justify-content: center;
}

.mf-timeline-step-number {
    font-size: 0.85rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #F9FAFB;
}

.mf-timeline-card {
    padding: 1rem 1.1rem;
    border-radius: 1rem;
    background: radial-gradient(circle at 0 0, rgba(148,163,184,0.18), rgba(15,23,42,0.98) 60%);
    border: 1px solid rgba(148,163,184,0.6);
    box-shadow: 0 0 0 1px rgba(15,23,42,0.85), 0 24px 80px rgba(0,0,0,0.95);
}

/* =========================================================
   TIMELINE B – VERTICAL
   ========================================================= */

.mf-timeline--vertical {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
}

.mf-timeline-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1.2rem;
}

.mf-timeline-rail {
    position: relative;
    width: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.mf-timeline-dot {
    width: 0.9rem;
    height: 0.9rem;
    border-radius: 999px;
    background: var(--mf-tl-color, var(--mf-blue));
    border: 2px solid #F9FAFB;
    box-shadow: 0 0 10px rgba(15,23,42,0.95);
}

/*.mf-timeline-line {
    flex: 1;
    width: 2px;
    margin-top: 0.3rem;
    background: linear-gradient( to bottom, rgba(148,163,184,0.9), rgba(31,41,55,0.0) );
}*/

/*.mf-timeline-line--end {
    background: linear-gradient( to bottom, rgba(148,163,184,0.9), rgba(148,163,184,0.0) );
}*/

.mf-timeline-panel {
    padding: 0.9rem 1.1rem;
    border-radius: 0.9rem;
    background: radial-gradient(circle at 0 0, rgba(148,163,184,0.16), rgba(15,23,42,0.96) 60%);
    border: 1px solid rgba(148,163,184,0.55);
    box-shadow: 0 0 0 1px rgba(15,23,42,0.85), 0 18px 55px rgba(0,0,0,0.9);
}

.mf-timeline-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: #93C5FD;
}

.mf-timeline-note {
    margin-top: 0.6rem;
    font-size: 0.8rem;
    color: #E5E7EB;
}

/* =========================================================
   TIMELINE C – TICKETS
   ========================================================= */

.mf-timeline--tickets {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
}

.mf-timeline-ticket {
    position: relative;
    border-radius: 1rem;
    padding: 0.9rem 1.1rem 0.8rem;
    background: radial-gradient(circle at 10% 0, rgba(148,163,184,0.18), rgba(15,23,42,0.98) 60%);
    border: 1px solid rgba(148,163,184,0.6);
    box-shadow: 0 0 0 1px rgba(15,23,42,0.85), 0 26px 80px rgba(0,0,0,0.95);
}

    .mf-timeline-ticket::before {
        /* small side notches for ticket feeling */
        content: "";
        position: absolute;
        top: 50%;
        left: -0.35rem;
        width: 0.7rem;
        height: 0.7rem;
        border-radius: 999px;
        background: #020617;
        box-shadow: 0 0 0 2px rgba(15,23,42,0.9);
        transform: translateY(-50%);
    }

    .mf-timeline-ticket::after {
        content: "";
        position: absolute;
        top: 50%;
        right: -0.35rem;
        width: 0.7rem;
        height: 0.7rem;
        border-radius: 999px;
        background: #020617;
        box-shadow: 0 0 0 2px rgba(15,23,42,0.9);
        transform: translateY(-50%);
    }

.mf-timeline-ticket-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.7rem;
}

.mf-timeline-chip {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    background: rgba(15,23,42,0.9);
    border: 1px solid rgba(148,163,184,0.7);
    color: #E5E7EB;
}

.mf-timeline-tag {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: rgba(191,219,254,0.9);
}

.mf-timeline-ticket-foot {
    margin-top: 0.8rem;
    padding-top: 0.6rem;
    border-top: 1px dashed rgba(148,163,184,0.6);
    display: flex;
    justify-content: space-between;
    font-size: 0.78rem;
    color: #9CA3AF;
}

.mf-timeline-foot-label {
    text-transform: uppercase;
    letter-spacing: 0.16em;
}

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

@media (max-width: 1024px) {
    .mf-timeline--horizontal,
    .mf-timeline--tickets {
        grid-template-columns: 1fr;
    }
}
/* =========================================================
   CEL-SHADED PREMIUM NODES FOR VERTICAL TIMELINE
   ========================================================= */

.mf-timeline--cel .mf-timeline-rail {
    width: 4rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* The big cel-shaded node */
.mf-tl-node {
    width: 3.4rem;
    height: 3.4rem;
    border-radius: 999px;
    border: 3px solid var(--mf-black);
    background: var(--mf-tl-color, var(--mf-blue));
    display: flex;
    align-items: center;
    justify-content: center;
    /* cel shading */
    box-shadow: inset -6px -6px 0 rgba(0,0,0,0.45), inset 6px 6px 0 rgba(255,255,255,0.25), 0 0 14px rgba(0,0,0,0.6), 0 0 22px rgba(0,0,0,0.45);
    margin-bottom: 0.6rem;
}

    .mf-tl-node span {
        font-size: 0.85rem;
        font-weight: 700;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: #F9FAFB;
    }

/* Glow colors per variant */
.mf-tl-node--blue {
    --mf-tl-color: var(--mf-blue);
    box-shadow: inset -6px -6px 0 rgba(0,0,0,0.45), inset 6px 6px 0 rgba(255,255,255,0.25), 0 0 18px rgba(28,141,255,0.7), 0 0 32px rgba(28,141,255,0.45);
}

.mf-tl-node--orange {
    --mf-tl-color: var(--mf-orange);
    box-shadow: inset -6px -6px 0 rgba(0,0,0,0.45), inset 6px 6px 0 rgba(255,255,255,0.25), 0 0 18px rgba(255,91,0,0.6), 0 0 32px rgba(255,91,0,0.38);
}

.mf-tl-node--violet {
    --mf-tl-color: var(--mf-violet);
    box-shadow: inset -6px -6px 0 rgba(0,0,0,0.45), inset 6px 6px 0 rgba(255,255,255,0.25), 0 0 20px rgba(160,60,255,0.7), 0 0 36px rgba(160,60,255,0.45);
}

/* Vertical rail line */
.mf-timeline-line {
    flex: 1;
    width: 3px;
    background: linear-gradient( to bottom, rgba(148,163,184,0.8), rgba(31,41,55,0.0) );
    position:initial;
}

.mf-timeline-line--end {
    background: linear-gradient( to bottom, rgba(148,163,184,0.85), rgba(148,163,184,0) );
}
/* VERTICAL LINE – versión limpia */
.mf-timeline--cel .mf-timeline-line {
    flex: 1;
    width: 2px;
    margin-top: 0;
    background: linear-gradient( to bottom, rgba(148,163,184,0.85), rgba(31,41,55,0.0) );
}

/* En el último paso no dibujamos línea hacia abajo */
.mf-timeline--cel .mf-timeline-row:last-child .mf-timeline-line {
    background: none;
}
/* TWO-COLUMN LAYOUT FOR VERTICAL TIMELINE */
.mf-timeline--two-cols {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem;
}

.mf-timeline-col {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
}

@media (max-width: 1024px) {
    .mf-timeline--two-cols {
        grid-template-columns: 1fr; /* em mobile volta a uma coluna */
    }
}
/* =========================================================
   RUNIC NEON TIMELINE
   ========================================================= */

.mf-timeline--runes {
    position: relative;
    margin-top: 2rem;
    padding: 1.5rem 0;
}

    /* energy line across steps */
    .mf-timeline--runes::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 50%;
        height: 2px;
        background: linear-gradient(90deg, transparent, rgba(56,189,248,0.4), rgba(244,114,182,0.5), rgba(129,140,248,0.5), transparent );
        box-shadow: 0 0 18px rgba(59,130,246,0.7);
        pointer-events: none;
    }

.mf-rune-step {
    position: relative;
    list-style: none;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 1.2rem;
    margin-bottom: 1.4rem;
}

/* glowing rune tile */
.mf-rune-glyph {
    width: 3.4rem;
    height: 3.4rem;
    border-radius: 0.9rem;
    border: 2px solid rgba(15,23,42,1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    font-family: "Racing Sans One", system-ui, sans-serif;
    color: #F9FAFB;
    background: radial-gradient(circle at 30% 0, rgba(255,255,255,0.2), rgba(15,23,42,0.95) 70%);
    box-shadow: 0 0 22px rgba(0,0,0,0.9), 0 0 30px rgba(59,130,246,0.0); /* base; se sobrescreve por cor */
}

/* color variants */
.mf-rune-step--blue .mf-rune-glyph {
    box-shadow: 0 0 22px rgba(15,23,42,0.9), 0 0 32px rgba(28,141,255,0.9);
    border-color: rgba(191,219,254,0.9);
}

.mf-rune-step--orange .mf-rune-glyph {
    box-shadow: 0 0 22px rgba(15,23,42,0.9), 0 0 32px rgba(249,115,22,0.95);
    border-color: rgba(254,202,138,0.95);
}

.mf-rune-step--violet .mf-rune-glyph {
    box-shadow: 0 0 22px rgba(15,23,42,0.9), 0 0 34px rgba(168,85,247,0.95);
    border-color: rgba(233,213,255,0.9);
}

.mf-rune-body {
    padding: 0.7rem 0.9rem;
    border-radius: 0.9rem;
    background: radial-gradient(circle at 0 0, rgba(148,163,184,0.16), rgba(15,23,42,0.96) 60%);
    border: 1px solid rgba(148,163,184,0.55);
    box-shadow: 0 0 0 1px rgba(15,23,42,0.85), 0 18px 55px rgba(0,0,0,0.9);
}

/* responsive: vertical stack */
@media (max-width: 1024px) {
    .mf-timeline--runes::before {
        top: auto;
        bottom: 0;
        left: 1rem;
        right: 1rem;
    }

    .mf-rune-step {
        grid-template-columns: auto minmax(0,1fr);
    }
}


/* =========================================================
   BASECITO COMÚN PARA ESTAS SECCIONES
   (no toca nada global raro)
   ========================================================= */

#services-tabs .container,
#services-spotlight .container,
#services-matrix .container,
#services-showroom .container,
#services-config-path .container {
    border-radius: 1.2rem;
    padding: 2.5rem 2.25rem;
    background: radial-gradient(circle at 0 0, rgba(60, 70, 90, 0.18), rgba(10, 16, 32, 0.96));
    border: 1px solid rgba(120, 140, 170, 0.38);
    box-shadow: 0 0 0 1px rgba(10, 16, 32, 0.9), 0 30px 90px rgba(0, 0, 0, 0.9);
}

/* Títulos centrados como el bundle */
#services-tabs .mf-section-header,
#services-spotlight .mf-section-header,
#services-matrix .mf-section-header,
#services-showroom .mf-section-header,
#services-config-path .mf-section-header {
    text-align: center;
    margin-bottom: 2rem;
}

#services-tabs .mf-section-title,
#services-spotlight .mf-section-title,
#services-matrix .mf-section-title,
#services-showroom .mf-section-title,
#services-config-path .mf-section-title {
    text-align: center;
}

#services-tabs .mf-section-subtitle,
#services-spotlight .mf-section-subtitle,
#services-matrix .mf-section-subtitle,
#services-showroom .mf-section-subtitle,
#services-config-path .mf-section-subtitle {
    max-width: 640px;
    margin: 0.5rem auto 0;
}


/* =========================================================
   OPTION 1 · SERVICE TABS + CAROUSELS
   ========================================================= */

/* Tabs rail */
.mf-tabs-nav {
    display: inline-flex;
    gap: 0.5rem;
    padding: 0.35rem;
    border-radius: 999px;
    background: radial-gradient(circle at 0 0, rgba(15,23,42,0.9), rgba(15,23,42,0.96));
    border: 1px solid rgba(51,65,85,0.95);
    box-shadow: 0 0 22px rgba(15,23,42,0.9);
    margin-inline: auto;
    margin-bottom: 1.8rem;
}

    .mf-tabs-nav button {
        position: relative;
        border: 0;
        outline: 0;
        padding: 0.45rem 1.2rem;
        border-radius: 999px;
        background: transparent;
        color: #E5E7EB;
        font-size: 0.8rem;
        font-weight: 500;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        cursor: pointer;
        transition: background .18s ease, color .18s ease, box-shadow .18s ease, transform .12s ease;
    }

        .mf-tabs-nav button::before {
            content: "";
            position: absolute;
            inset: 0;
            border-radius: inherit;
            background: radial-gradient(circle at 0 0, rgba(255,255,255,0.12), transparent 45%);
            opacity: 0;
            pointer-events: none;
            transition: opacity .18s ease;
        }

        .mf-tabs-nav button:hover {
            transform: translateY(-1px);
        }

            .mf-tabs-nav button:hover::before {
                opacity: 1;
            }

        /* Estado activo = pildorazo azul / naranja */
        .mf-tabs-nav button.is-active {
            background: linear-gradient(135deg, var(--mf-blue), var(--mf-orange));
            color: #0B1020;
            font-weight: 700;
            box-shadow: 0 0 18px rgba(28,141,255,0.8), 0 0 32px rgba(255,91,0,0.7);
        }

            .mf-tabs-nav button.is-active::before {
                opacity: 1;
            }

/* Panels */
.mf-tabs-panels {
    margin-top: 0.5rem;
}

.mf-tab-panel {
    display: none;
}

    .mf-tab-panel.is-active {
        display: block;
    }

/* Reusa tu carousel base para .mf-franchise-carousel y .mf-franchise-track.
   Solo le damos un poco de espacio abajo */
#services-tabs .mf-franchise-carousel {
    margin-top: 0.25rem;
}

#services-tabs .mf-franchise-card {
    cursor: pointer;
}

/* =========================================================
   OPTION 2 · CATEGORY SPOTLIGHT RAIL
   ========================================================= */

.mf-services-spotlight {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
}

/* rail lateral */
.mf-services-rail {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
}

    .mf-services-rail button {
        border: 0;
        outline: 0;
        padding: 0.4rem 0.9rem;
        border-radius: 999px;
        background: rgba(15,23,42,0.9);
        border: 1px solid rgba(55,65,81,0.9);
        color: #E5E7EB;
        font-size: 0.78rem;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        cursor: pointer;
        transition: background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
    }

        .mf-services-rail button.is-active {
            background: linear-gradient(135deg, var(--mf-blue), var(--mf-violet));
            border-color: rgba(248,250,252,0.9);
            color: #020617;
            box-shadow: 0 0 22px rgba(28,141,255,0.9);
        }

/* paneles */
.mf-services-spot-panels {
    position: relative;
}

.mf-service-spot {
    display: none;
}

    .mf-service-spot.is-active {
        display: block;
    }

.mf-service-spot-head h3 {
    font-size: 1.05rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #E5E7EB;
    margin-bottom: 0.4rem;
}

.mf-service-spot-head p {
    font-size: 0.9rem;
    color: #9CA3AF;
}

.mf-service-spot-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 1.5rem;
    margin-top: 1.4rem;
}

.mf-service-spot-hero {
    position: relative;
    border-radius: 1rem;
    overflow: hidden;
    background: #020617;
}

    .mf-service-spot-hero img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transform: scale(1.03);
        filter: saturate(1.05) contrast(1.05);
        transition: transform .3s ease-out, filter .3s ease-out;
    }

    .mf-service-spot-hero::after {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at 0 0, rgba(255,255,255,0.12), transparent 55%);
        mix-blend-mode: screen;
        opacity: 0.5;
        pointer-events: none;
    }

    .mf-service-spot-hero:hover img {
        transform: scale(1.06);
        filter: saturate(1.15) contrast(1.12);
    }

/* lateral info */
.mf-service-spot-info {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.mf-service-spot-list {
    list-style: none;
    padding: 0.75rem 1rem;
    margin: 0;
    border-radius: 0.85rem;
    background: radial-gradient(circle at 0 0, rgba(15,23,42,0.96), rgba(15,23,42,0.9));
    border: 1px solid rgba(55,65,81,0.9);
    font-size: 0.85rem;
    color: #E5E7EB;
}

    .mf-service-spot-list li + li {
        margin-top: 0.3rem;
    }

.mf-service-spot-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

    .mf-service-spot-thumbs img {
        width: 30%;
        min-width: 110px;
        aspect-ratio: 4 / 3;
        object-fit: cover;
        border-radius: 0.6rem;
        border: 1px solid rgba(148,163,184,0.6);
    }

/* responsive */
@media (max-width: 960px) {
    .mf-service-spot-layout {
        grid-template-columns: minmax(0, 1fr);
    }
}


/* =========================================================
   OPTION 3 · SERVICE MATRIX / FILTERABLE GRID
   ========================================================= */

.mf-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    margin-bottom: 1.7rem;
}

    .mf-filter-chips button {
        border: 0;
        outline: 0;
        padding: 0.35rem 0.9rem;
        border-radius: 999px;
        background: rgba(15,23,42,0.96);
        border: 1px solid rgba(55,65,81,0.9);
        color: #E5E7EB;
        font-size: 0.78rem;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        cursor: pointer;
        transition: background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
    }

        .mf-filter-chips button.is-active {
            background: linear-gradient(135deg, var(--mf-blue), var(--mf-violet));
            border-color: rgba(248,250,252,0.9);
            color: #020617;
            box-shadow: 0 0 18px rgba(28,141,255,0.9);
        }

/* grid de servicios */
.mf-services-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.2rem;
}

.mf-service-card {
    position: relative;
    border-radius: 0.9rem;
    padding: 1.1rem 1.1rem 1rem;
    background: radial-gradient(circle at 0 0, rgba(15,23,42,0.97), rgba(15,23,42,0.92));
    border: 1px solid rgba(55,65,81,0.9);
    box-shadow: 0 16px 40px rgba(0,0,0,0.85);
    font-size: 0.9rem;
    color: #D1D5DB;
}

    .mf-service-card h3 {
        font-size: 0.96rem;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: #F9FAFB;
        margin-bottom: 0.5rem;
    }

    .mf-service-card p {
        font-size: 0.86rem;
        color: #9CA3AF;
        margin-bottom: 0.55rem;
    }

    .mf-service-card ul {
        list-style: none;
        padding: 0;
        margin: 0;
        font-size: 0.8rem;
        color: #9CA3AF;
    }

        .mf-service-card ul li + li {
            margin-top: 0.25rem;
        }

/* responsive */
@media (max-width: 1100px) {
    .mf-services-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .mf-services-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}


/* =========================================================
   OPTION 4 · SHOWROOM LANES
   ========================================================= */

.mf-lane {
    margin-top: 1.6rem;
}

.mf-lane-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

    .mf-lane-head h3 {
        font-size: 0.98rem;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: #E5E7EB;
    }

    .mf-lane-head span {
        font-size: 0.8rem;
        color: #9CA3AF;
    }

/* pista horizontal */
.mf-lane-track {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    padding-bottom: 0.4rem;
    scrollbar-width: thin;
    scroll-snap-type: x mandatory;
}

    .mf-lane-track::-webkit-scrollbar {
        height: 4px;
    }

    .mf-lane-track::-webkit-scrollbar-thumb {
        background: rgba(30,64,175,0.8);
        border-radius: 999px;
    }

/* cards */
.mf-lane-card {
    flex: 0 0 230px;
    scroll-snap-align: start;
    border-radius: 1rem;
    background: radial-gradient(circle at 0 0, rgba(15,23,42,0.97), rgba(15,23,42,0.9));
    border: 1px solid rgba(55,65,81,0.9);
    box-shadow: 0 18px 45px rgba(0,0,0,0.9);
    overflow: hidden;
    cursor: pointer;
}

    .mf-lane-card img {
        width: 100%;
        aspect-ratio: 3 / 4;
        object-fit: cover;
        display: block;
    }

    .mf-lane-card h4 {
        padding: 0.6rem 0.8rem 0.1rem;
        font-size: 0.9rem;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: #F9FAFB;
    }

    .mf-lane-card p {
        padding: 0 0.8rem 0.8rem;
        font-size: 0.8rem;
        color: #9CA3AF;
    }

/* =========================================================
   OPTION 5 · CONFIG PATH / FLOW
   ========================================================= */

.mf-config-path {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.6fr);
    gap: 2rem;
}

/* selector de tipo */
.mf-config-path-choices {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

    .mf-config-path-choices button {
        border: 0;
        outline: 0;
        padding: 0.55rem 0.9rem;
        border-radius: 0.7rem;
        background: rgba(15,23,42,0.97);
        border: 1px solid rgba(55,65,81,0.9);
        color: #E5E7EB;
        font-size: 0.86rem;
        text-align: left;
        cursor: pointer;
        transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .12s ease;
    }

        .mf-config-path-choices button.is-active {
            background: linear-gradient(135deg, var(--mf-blue), var(--mf-violet));
            border-color: rgba(248,250,252,0.9);
            color: #020617;
            transform: translateY(-1px);
            box-shadow: 0 0 20px rgba(28,141,255,0.9);
        }

/* paneles */
.mf-config-path-panels {
    position: relative;
}

.mf-config-path-panel {
    display: none;
}

    .mf-config-path-panel.is-active {
        display: block;
    }

/* flow */
.mf-config-flow {
    display: flex;
    justify-content: space-between;
    gap: 0.7rem;
    margin-bottom: 1.3rem;
    position: relative;
}

    /* línea de conexión */
    .mf-config-flow::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 0.9rem;
        right: 0.9rem;
        height: 2px;
        background: linear-gradient(90deg, rgba(28,141,255,0), rgba(28,141,255,0.9), rgba(160,60,255,0.9), rgba(28,141,255,0));
        opacity: 0.75;
    }

/* nodos tipo “bolita timeline” */
.mf-config-node {
    position: relative;
    z-index: 1;
    min-width: 0;
    flex: 1 1 0;
    text-align: center;
    font-size: 0.8rem;
    color: #E5E7EB;
}

    /* círculo */
    .mf-config-node::before {
        content: "";
        display: block;
        margin: 0 auto 0.35rem;
        width: 1.9rem;
        height: 1.9rem;
        border-radius: 999px;
        background: radial-gradient(circle at 30% 0, rgba(255,255,255,0.3), rgba(28,141,255,1));
        box-shadow: 0 0 15px rgba(28,141,255,0.9), 0 0 40px rgba(160,60,255,0.7);
        border: 2px solid rgba(3,7,18,0.95);
    }

/* ejemplos */
.mf-config-examples {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.mf-config-example {
    border-radius: 0.85rem;
    padding: 0.9rem 1rem;
    background: radial-gradient(circle at 0 0, rgba(15,23,42,0.97), rgba(15,23,42,0.9));
    border: 1px solid rgba(55,65,81,0.9);
    box-shadow: 0 16px 40px rgba(0,0,0,0.85);
}

    .mf-config-example h4 {
        font-size: 0.9rem;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: #F9FAFB;
        margin-bottom: 0.35rem;
    }

    .mf-config-example p {
        font-size: 0.83rem;
        color: #9CA3AF;
    }

/* responsive */
@media (max-width: 960px) {
    .mf-config-path {
        grid-template-columns: minmax(0, 1fr);
    }

    .mf-config-examples {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* =========================================================
   SHARED CONTAINER LOOK FOR NEW SERVICE SECTIONS
   ========================================================= */

#services-storyline .container,
#services-before-after .container,
#services-pillars .container,
#services-pricing .container,
#services-bundles .container {
    border-radius: 1.2rem;
    padding: 2.5rem 2.25rem;
    background: radial-gradient(circle at 0 0, rgba(60, 70, 90, 0.18), rgba(10, 16, 32, 0.96));
    border: 1px solid rgba(120, 140, 170, 0.38);
    box-shadow: 0 0 0 1px rgba(10, 16, 32, 0.9), 0 30px 90px rgba(0, 0, 0, 0.9);
}

#services-storyline .mf-section-header,
#services-before-after .mf-section-header,
#services-pillars .mf-section-header,
#services-pricing .mf-section-header,
#services-bundles .mf-section-header {
    text-align: center;
    margin-bottom: 2rem;
}

#services-storyline .mf-section-subtitle,
#services-before-after .mf-section-subtitle,
#services-pillars .mf-section-subtitle,
#services-pricing .mf-section-subtitle,
#services-bundles .mf-section-subtitle {
    max-width: 640px;
    margin: 0.5rem auto 0;
}

/* =========================================================
   6) SERVICES STORYLINE
   ========================================================= */

.mf-storyline {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
    position: relative;
}

    .mf-storyline::before {
        content: "";
        position: absolute;
        left: 1.6rem;
        top: 0.5rem;
        bottom: 0.5rem;
        width: 2px;
        background: linear-gradient( to bottom, rgba(148,163,184,0.9), rgba(55,65,81,0.2) );
        opacity: 0.8;
    }

.mf-story-step {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1rem;
    padding-left: 0.8rem;
}

.mf-story-step-badge {
    position: relative;
    z-index: 1;
    width: 3rem;
    height: 3rem;
    border-radius: 0.9rem;
    border: 2px solid var(--mf-black);
    background: var(--mf-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #F9FAFB;
    box-shadow: inset -5px -5px 0 rgba(0,0,0,0.45), inset 5px 5px 0 rgba(255,255,255,0.22), 0 0 20px rgba(28,141,255,0.85);
}

.mf-story-step:nth-child(2) .mf-story-step-badge {
    background: var(--mf-orange);
    box-shadow: inset -5px -5px 0 rgba(0,0,0,0.45), inset 5px 5px 0 rgba(255,255,255,0.22), 0 0 20px rgba(255,91,0,0.85);
}

.mf-story-step:nth-child(3) .mf-story-step-badge {
    background: var(--mf-violet);
    box-shadow: inset -5px -5px 0 rgba(0,0,0,0.45), inset 5px 5px 0 rgba(255,255,255,0.22), 0 0 22px rgba(160,60,255,0.9);
}

.mf-story-step-body {
    border-radius: 0.9rem;
    padding: 0.9rem 1rem;
    background: radial-gradient(circle at 0 0, rgba(15,23,42,0.97), rgba(15,23,42,0.9));
    border: 1px solid rgba(55,65,81,0.9);
    box-shadow: 0 18px 45px rgba(0,0,0,0.9);
    font-size: 0.9rem;
    color: #D1D5DB;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

    .mf-story-step-body h3 {
        font-size: 0.96rem;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: #F9FAFB;
        margin-bottom: 0.35rem;
    }

    .mf-story-step-body p {
        font-size: 0.86rem;
        color: #9CA3AF;
        margin-bottom: 0.5rem;
    }

.mf-story-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

    .mf-story-thumbs img {
        width: 150px;
        max-width: 42%;
        aspect-ratio: 4 / 3;
        border-radius: 0.6rem;
        border: 1px solid rgba(148,163,184,0.7);
        object-fit: cover;
    }

/* active / hover state */
.mf-story-step.is-active .mf-story-step-body,
.mf-story-step:hover .mf-story-step-body {
    transform: translateY(-2px);
    border-color: rgba(129,140,248,0.95);
    box-shadow: 0 0 0 1px rgba(15,23,42,0.95), 0 24px 70px rgba(0,0,0,0.95);
}

@media (max-width: 720px) {
    .mf-storyline::before {
        left: 1.4rem;
    }
}

/* =========================================================
   7) BEFORE / AFTER WALL
   ========================================================= */

.mf-ba-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.6rem;
}

.mf-ba-card {
    border-radius: 1rem;
    padding: 1.2rem 1.2rem 1rem;
    background: radial-gradient(circle at 0 0, rgba(15,23,42,0.97), rgba(15,23,42,0.9));
    border: 1px solid rgba(55,65,81,0.9);
    box-shadow: 0 20px 60px rgba(0,0,0,0.95);
    font-size: 0.9rem;
    color: #D1D5DB;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    cursor: pointer;
}

    .mf-ba-card h3 {
        font-size: 0.96rem;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: #F9FAFB;
        margin-bottom: 0.75rem;
    }

    .mf-ba-card p {
        margin-top: 0.6rem;
        font-size: 0.84rem;
        color: #9CA3AF;
    }

.mf-ba-images {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
}

    .mf-ba-images figure {
        position: relative;
        overflow: hidden;
        border-radius: 0.8rem;
        border: 1px solid rgba(55,65,81,0.9);
        background: #020617;
    }

    .mf-ba-images img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.mf-ba-label {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    background: rgba(15,23,42,0.95);
    color: #E5E7EB;
}

/* active/hover emphasis */
.mf-ba-card.is-active,
.mf-ba-card:hover {
    transform: translateY(-3px);
    border-color: rgba(129,140,248,0.95);
    box-shadow: 0 0 0 1px rgba(15,23,42,0.95), 0 26px 80px rgba(0,0,0,0.98);
}

@media (max-width: 960px) {
    .mf-ba-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* =========================================================
   8) SERVICE PILLARS
   ========================================================= */

.mf-pillars-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.4rem;
}

.mf-pillar-card {
    border-radius: 1rem;
    padding: 1.1rem 1.1rem 1rem;
    background: radial-gradient(circle at 0 0, rgba(15,23,42,0.97), rgba(15,23,42,0.9));
    border: 1px solid rgba(55,65,81,0.9);
    box-shadow: 0 20px 60px rgba(0,0,0,0.95);
    font-size: 0.9rem;
    color: #D1D5DB;
}

    .mf-pillar-card h3 {
        font-size: 0.96rem;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: #F9FAFB;
        margin-bottom: 0.4rem;
    }

    .mf-pillar-card p {
        font-size: 0.86rem;
        color: #9CA3AF;
        margin-bottom: 0.5rem;
    }

    .mf-pillar-card ul {
        list-style: none;
        margin: 0 0 0.7rem;
        padding: 0;
        font-size: 0.82rem;
        color: #9CA3AF;
    }

        .mf-pillar-card ul li + li {
            margin-top: 0.25rem;
        }

    .mf-pillar-card img {
        width: 100%;
        border-radius: 0.8rem;
        border: 1px solid rgba(55,65,81,0.9);
        object-fit: cover;
    }

    /* subtle hover */
    .mf-pillar-card:hover {
        border-color: rgba(129,140,248,0.9);
        box-shadow: 0 0 0 1px rgba(15,23,42,0.95), 0 24px 75px rgba(0,0,0,0.98);
    }

@media (max-width: 1100px) {
    .mf-pillars-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 780px) {
    .mf-pillars-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* =========================================================
   9) PRICING TRACKS
   ========================================================= */

.mf-pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.3rem;
}

.mf-pricing-card {
    position: relative;
    border-radius: 1rem;
    padding: 1.2rem 1.2rem 1.3rem;
    background: radial-gradient(circle at 0 0, rgba(15,23,42,0.97), rgba(15,23,42,0.9));
    border: 1px solid rgba(55,65,81,0.9);
    box-shadow: 0 20px 60px rgba(0,0,0,0.95);
    font-size: 0.9rem;
    color: #D1D5DB;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    cursor: pointer;
}

    .mf-pricing-card h3 {
        font-size: 0.98rem;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: #F9FAFB;
        margin-bottom: 0.3rem;
    }

    .mf-pricing-card p {
        font-size: 0.84rem;
        color: #9CA3AF;
        margin-bottom: 0.6rem;
    }

    .mf-pricing-card ul {
        list-style: none;
        margin: 0 0 0.9rem;
        padding: 0;
        font-size: 0.83rem;
        color: #9CA3AF;
    }

        .mf-pricing-card ul li + li {
            margin-top: 0.25rem;
        }

.mf-pricing-range {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    background: rgba(15,23,42,0.96);
    border: 1px solid rgba(55,65,81,0.9);
    color: #E5E7EB;
}

/* default hover / active */
.mf-pricing-card.is-active,
.mf-pricing-card:hover {
    transform: translateY(-3px);
    border-color: rgba(129,140,248,0.95);
    box-shadow: 0 0 0 1px rgba(15,23,42,0.95), 0 26px 80px rgba(0,0,0,0.98);
}

/* highlight tier */
.mf-pricing-card.is-highlight {
    border-color: rgba(59,130,246,0.95);
    box-shadow: 0 0 0 1px rgba(15,23,42,0.95), 0 28px 90px rgba(37,99,235,0.9);
}

    .mf-pricing-card.is-highlight .mf-pricing-range {
        background: linear-gradient(135deg, var(--mf-blue), var(--mf-orange));
        color: #020617;
    }

/* responsive */
@media (max-width: 1100px) {
    .mf-pricing-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 780px) {
    .mf-pricing-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* =========================================================
   10) BUNDLES MAP
   ========================================================= */

.mf-bundles-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.3rem;
}

.mf-bundle-card {
    border-radius: 1rem;
    padding: 1.1rem 1.1rem 1.1rem;
    background: radial-gradient(circle at 0 0, rgba(15,23,42,0.97), rgba(15,23,42,0.9));
    border: 1px solid rgba(55,65,81,0.9);
    box-shadow: 0 20px 60px rgba(0,0,0,0.95);
    font-size: 0.9rem;
    color: #D1D5DB;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

    .mf-bundle-card h3 {
        font-size: 0.96rem;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: #F9FAFB;
        margin-bottom: 0.35rem;
    }

    .mf-bundle-card p {
        font-size: 0.84rem;
        color: #9CA3AF;
        margin-bottom: 0.5rem;
    }

    .mf-bundle-card ul {
        list-style: none;
        margin: 0 0 0.7rem;
        padding: 0;
        font-size: 0.82rem;
        color: #9CA3AF;
    }

        .mf-bundle-card ul li + li {
            margin-top: 0.2rem;
        }

    .mf-bundle-card img {
        width: 100%;
        border-radius: 0.8rem;
        border: 1px solid rgba(55,65,81,0.9);
        object-fit: cover;
    }

    /* hover */
    .mf-bundle-card:hover {
        transform: translateY(-2px);
        border-color: rgba(129,140,248,0.95);
        box-shadow: 0 0 0 1px rgba(15,23,42,0.95), 0 24px 75px rgba(0,0,0,0.98);
    }

/* responsive */
@media (max-width: 1100px) {
    .mf-bundles-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 780px) {
    .mf-bundles-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* =========================================================
   CONTENEDOR GLASS PARA LOS 5 COMPACTOS
   ========================================================= */

#services-compact-tabs .container,
#services-accordion-grid .container,
#services-chip-detail .container,
#services-stacked-cards .container,
#services-compact-table .container {
    border-radius: 1.2rem;
    padding: 2.2rem 2.1rem;
    background: radial-gradient(circle at 0 0, rgba(60, 70, 90, 0.18), rgba(10, 16, 32, 0.96));
    border: 1px solid rgba(120, 140, 170, 0.38);
    box-shadow: 0 0 0 1px rgba(10, 16, 32, 0.9), 0 26px 80px rgba(0, 0, 0, 0.9);
}

#services-compact-tabs .mf-section-header,
#services-accordion-grid .mf-section-header,
#services-chip-detail .mf-section-header,
#services-stacked-cards .mf-section-header,
#services-compact-table .mf-section-header {
    text-align: center;
    margin-bottom: 1.8rem;
}

#services-compact-tabs .mf-section-subtitle,
#services-accordion-grid .mf-section-subtitle,
#services-chip-detail .mf-section-subtitle,
#services-stacked-cards .mf-section-subtitle,
#services-compact-table .mf-section-subtitle {
    max-width: 640px;
    margin: 0.5rem auto 0;
}

/* =========================================================
   1) SERVICES-COMPACT-TABS
   ========================================================= */

/* rail compacto de tabs */
#services-compact-tabs .mf-tabs-nav--compact {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0.3rem;
    border-radius: 999px;
    background: radial-gradient(circle at 0 0, rgba(15,23,42,0.95), rgba(15,23,42,0.98));
    border: 1px solid rgba(51,65,85,0.95);
    box-shadow: 0 0 20px rgba(15,23,42,0.95);
    margin-inline: auto;
    margin-bottom: 1.5rem;
}

    #services-compact-tabs .mf-tabs-nav--compact button {
        border: 0;
        outline: 0;
        padding: 0.3rem 0.9rem;
        border-radius: 999px;
        background: transparent;
        color: #E5E7EB;
        font-size: 0.76rem;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        cursor: pointer;
        transition: background .18s ease, color .18s ease, box-shadow .18s ease, transform .1s ease;
    }

        #services-compact-tabs .mf-tabs-nav--compact button:hover {
            transform: translateY(-1px);
        }

        #services-compact-tabs .mf-tabs-nav--compact button.is-active {
            background: linear-gradient(135deg, var(--mf-blue), var(--mf-violet));
            color: #020617;
            font-weight: 700;
            box-shadow: 0 0 16px rgba(28,141,255,0.85), 0 0 32px rgba(160,60,255,0.7);
        }

/* panels compactos */
.mf-ctabs-panels {
    margin-top: 0.4rem;
}

.mf-ctab-panel {
    display: none;
}

    .mf-ctab-panel.is-active {
        display: block;
    }

/* layout interno */
.mf-ctab-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.9fr);
    gap: 1.2rem;
    align-items: flex-start;
}

.mf-ctab-main h3 {
    font-size: 0.96rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #F9FAFB;
    margin-bottom: 0.35rem;
}

.mf-ctab-main p {
    font-size: 0.86rem;
    color: #9CA3AF;
    margin-bottom: 0.6rem;
}

/* specs compactas */
.mf-ctab-specs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
    margin: 0;
    padding: 0;
}

    .mf-ctab-specs div {
        padding: 0.45rem 0.6rem;
        border-radius: 0.6rem;
        background: radial-gradient(circle at 0 0, rgba(15,23,42,0.98), rgba(15,23,42,0.94));
        border: 1px solid rgba(55,65,81,0.9);
        font-size: 0.78rem;
        color: #E5E7EB;
    }

    .mf-ctab-specs dt {
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 0.14em;
        color: #9CA3AF;
        margin-bottom: 0.1rem;
    }

    .mf-ctab-specs dd {
        margin: 0;
        font-weight: 500;
    }

/* lateral de exemplos */
.mf-ctab-examples {
    border-radius: 0.8rem;
    padding: 0.75rem 0.9rem;
    background: radial-gradient(circle at 0 0, rgba(15,23,42,0.97), rgba(15,23,42,0.93));
    border: 1px solid rgba(55,65,81,0.9);
    font-size: 0.82rem;
    color: #D1D5DB;
}

    .mf-ctab-examples h4 {
        font-size: 0.8rem;
        text-transform: uppercase;
        letter-spacing: 0.14em;
        color: #F9FAFB;
        margin-bottom: 0.3rem;
    }

    .mf-ctab-examples ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .mf-ctab-examples li + li {
        margin-top: 0.2rem;
    }

/* responsive */
@media (max-width: 960px) {
    .mf-ctab-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .mf-ctab-specs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .mf-ctab-specs {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* =========================================================
   2) SERVICES-ACCORDION-GRID
   ========================================================= */

.mf-acc-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.mf-acc-card {
    border-radius: 0.9rem;
    background: radial-gradient(circle at 0 0, rgba(15,23,42,0.97), rgba(15,23,42,0.9));
    border: 1px solid rgba(55,65,81,0.9);
    box-shadow: 0 18px 50px rgba(0,0,0,0.95);
    overflow: hidden;
    font-size: 0.88rem;
    color: #D1D5DB;
    transition: border-color .18s ease, box-shadow .18s ease, transform .12s ease;
}

    .mf-acc-card.is-open {
        border-color: rgba(129,140,248,0.95);
        box-shadow: 0 0 0 1px rgba(15,23,42,0.95), 0 24px 75px rgba(0,0,0,0.98);
        transform: translateY(-2px);
    }

/* header */
.mf-acc-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.8rem 0.9rem;
    cursor: pointer;
}

.mf-acc-title-block h3 {
    font-size: 0.9rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #F9FAFB;
    margin-bottom: 0.15rem;
}

.mf-acc-tag {
    display: inline-flex;
    padding: 0.16rem 0.6rem;
    border-radius: 999px;
    border: 1px solid rgba(148,163,184,0.8);
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #9CA3AF;
}

/* chevron */
.mf-acc-chevron {
    border: 0;
    outline: 0;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 999px;
    background: rgba(15,23,42,0.96);
    border: 1px solid rgba(55,65,81,0.9);
    color: #E5E7EB;
    font-size: 0.9rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform .18s ease, background .18s ease;
}

.mf-acc-card.is-open .mf-acc-chevron {
    transform: rotate(180deg);
    background: linear-gradient(135deg, var(--mf-blue), var(--mf-violet));
    color: #020617;
}

/* cuerpo colapsable */
.mf-acc-body {
    padding: 0 0.9rem 0.85rem;
    border-top: 1px solid rgba(31,41,55,0.9);
    font-size: 0.84rem;
    color: #9CA3AF;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height .22s ease, opacity .2s ease;
}

.mf-acc-card.is-open .mf-acc-body {
    max-height: 200px; /* suficiente para el contenido típico */
    opacity: 1;
}

.mf-acc-body ul {
    list-style: none;
    padding: 0;
    margin: 0.4rem 0 0;
}

.mf-acc-body li + li {
    margin-top: 0.2rem;
}

/* responsive */
@media (max-width: 960px) {
    .mf-acc-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* =========================================================
   3) SERVICES-CHIP-DETAIL
   ========================================================= */

.mf-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    justify-content: center;
    margin-bottom: 1.4rem;
}

    .mf-chip-row button {
        border: 0;
        outline: 0;
        padding: 0.3rem 0.8rem;
        border-radius: 999px;
        background: rgba(15,23,42,0.97);
        border: 1px solid rgba(55,65,81,0.9);
        color: #E5E7EB;
        font-size: 0.76rem;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        cursor: pointer;
        transition: background .18s ease, border-color .18s ease, color .18s ease, transform .08s ease;
    }

        .mf-chip-row button:hover {
            transform: translateY(-1px);
        }

        .mf-chip-row button.is-active {
            background: linear-gradient(135deg, var(--mf-blue), var(--mf-orange));
            border-color: rgba(248,250,252,0.95);
            color: #020617;
            font-weight: 700;
        }

/* panels */
.mf-scd-panels {
    position: relative;
}

.mf-scd-panel {
    display: none;
    border-radius: 1rem;
    padding: 1rem 1.1rem;
    background: radial-gradient(circle at 0 0, rgba(15,23,42,0.97), rgba(15,23,42,0.9));
    border: 1px solid rgba(55,65,81,0.9);
    box-shadow: 0 18px 55px rgba(0,0,0,0.95);
    font-size: 0.88rem;
    color: #D1D5DB;
}

    .mf-scd-panel.is-active {
        display: block;
    }

    .mf-scd-panel header h3 {
        font-size: 0.94rem;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: #F9FAFB;
        margin-bottom: 0.2rem;
    }

    .mf-scd-panel header p {
        font-size: 0.84rem;
        color: #9CA3AF;
        margin-bottom: 0.7rem;
    }

/* layout compacto interno */
.mf-scd-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 0.9rem;
}

.mf-scd-main,
.mf-scd-examples {
    list-style: none;
    padding: 0.55rem 0.7rem;
    margin: 0;
    border-radius: 0.75rem;
    background: radial-gradient(circle at 0 0, rgba(15,23,42,0.98), rgba(15,23,42,0.94));
    border: 1px solid rgba(55,65,81,0.95);
    font-size: 0.82rem;
    color: #D1D5DB;
}

    .mf-scd-main li + li,
    .mf-scd-examples li + li {
        margin-top: 0.25rem;
    }

    .mf-scd-main strong {
        color: #E5E7EB;
    }

/* responsive */
@media (max-width: 860px) {
    .mf-scd-layout {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* =========================================================
   4) SERVICES-STACKED-CARDS
   ========================================================= */

.mf-stack-list {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.mf-stack-card {
    border-radius: 0.95rem;
    background: radial-gradient(circle at 0 0, rgba(15,23,42,0.97), rgba(15,23,42,0.92));
    border: 1px solid rgba(55,65,81,0.9);
    box-shadow: 0 18px 50px rgba(0,0,0,0.95);
    font-size: 0.88rem;
    color: #D1D5DB;
    overflow: hidden;
    transition: border-color .18s ease, box-shadow .18s ease, transform .12s ease;
}

    .mf-stack-card.is-open {
        border-color: rgba(129,140,248,0.95);
        box-shadow: 0 0 0 1px rgba(15,23,42,0.95), 0 24px 75px rgba(0,0,0,0.98);
        transform: translateY(-1px);
    }

/* top compacto */
.mf-stack-top {
    display: flex;
    justify-content: space-between;
    gap: 0.8rem;
    padding: 0.85rem 1rem;
    align-items: center;
}

    .mf-stack-top h3 {
        font-size: 0.94rem;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: #F9FAFB;
        margin-bottom: 0.2rem;
    }

    .mf-stack-top p {
        font-size: 0.84rem;
        color: #9CA3AF;
    }

/* botón detalle */
.mf-stack-toggle {
    border: 0;
    outline: 0;
    padding: 0.25rem 0.9rem;
    border-radius: 999px;
    background: rgba(15,23,42,0.97);
    border: 1px solid rgba(55,65,81,0.9);
    color: #E5E7EB;
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    cursor: pointer;
    white-space: nowrap;
    transition: background .18s ease, border-color .18s ease, color .18s ease, transform .08s ease;
}

.mf-stack-card.is-open .mf-stack-toggle {
    background: linear-gradient(135deg, var(--mf-blue), var(--mf-orange));
    border-color: rgba(248,250,252,0.95);
    color: #020617;
}

/* extra colapsable */
.mf-stack-extra {
    border-top: 1px solid rgba(31,41,55,0.9);
    padding: 0 1rem 0.8rem;
    font-size: 0.84rem;
    color: #9CA3AF;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height .22s ease, opacity .18s ease;
}

.mf-stack-card.is-open .mf-stack-extra {
    max-height: 200px;
    opacity: 1;
}

.mf-stack-extra ul {
    list-style: none;
    padding: 0.4rem 0 0;
    margin: 0;
}

.mf-stack-extra li + li {
    margin-top: 0.25rem;
}

.mf-stack-extra strong {
    color: #E5E7EB;
}

/* =========================================================
   5) SERVICES-COMPACT-TABLE
   ========================================================= */

.mf-ctable-wrapper {
    border-radius: 1rem;
    padding: 0.65rem 0.9rem 0.9rem;
    background: radial-gradient(circle at 0 0, rgba(15,23,42,0.97), rgba(15,23,42,0.93));
    border: 1px solid rgba(55,65,81,0.9);
    box-shadow: 0 18px 55px rgba(0,0,0,0.95);
    font-size: 0.86rem;
    color: #D1D5DB;
}

/* header tipo tabla */
.mf-ctable-header {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 0.9fr) auto;
    gap: 0.7rem;
    padding: 0.1rem 0.4rem 0.5rem;
    font-size: 0.76rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #9CA3AF;
}

/* body */
.mf-ctable-body {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

/* fila compacta */
.mf-ctable-row {
    border-radius: 0.7rem;
    background: rgba(15,23,42,0.97);
    border: 1px solid rgba(31,41,55,0.95);
    overflow: hidden;
    transition: border-color .18s ease, box-shadow .18s ease, transform .1s ease;
}

    .mf-ctable-row.is-open {
        border-color: rgba(129,140,248,0.95);
        box-shadow: 0 0 0 1px rgba(15,23,42,0.95), 0 18px 55px rgba(0,0,0,0.98);
        transform: translateY(-1px);
    }

/* parte visible row */
.mf-ctable-row-main {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 0.9fr) auto;
    gap: 0.7rem;
    align-items: center;
    padding: 0.55rem 0.6rem;
}

    .mf-ctable-row-main span {
        font-size: 0.84rem;
        color: #E5E7EB;
    }

/* toggle */
.mf-ctable-toggle {
    border: 0;
    outline: 0;
    padding: 0.2rem 0.7rem;
    border-radius: 999px;
    background: rgba(15,23,42,0.96);
    border: 1px solid rgba(55,65,81,0.9);
    color: #E5E7EB;
    font-size: 0.74rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    white-space: nowrap;
    transition: background .18s ease, border-color .18s ease, color .18s ease;
}

.mf-ctable-row.is-open .mf-ctable-toggle {
    background: linear-gradient(135deg, var(--mf-blue), var(--mf-violet));
    border-color: rgba(248,250,252,0.95);
    color: #020617;
}

/* extra info */
.mf-ctable-row-extra {
    border-top: 1px solid rgba(31,41,55,0.95);
    padding: 0 0.8rem 0.7rem;
    font-size: 0.82rem;
    color: #9CA3AF;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height .2s ease, opacity .18s ease;
}

.mf-ctable-row.is-open .mf-ctable-row-extra {
    max-height: 200px;
    opacity: 1;
}

.mf-ctable-row-extra p {
    margin: 0.4rem 0 0.3rem;
}

.mf-ctable-row-extra ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mf-ctable-row-extra li + li {
    margin-top: 0.2rem;
}

/* responsive tabla */
@media (max-width: 900px) {
    .mf-ctable-header {
        display: none;
    }

    .mf-ctable-row-main {
        grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) auto;
        gap: 0.4rem;
    }

        .mf-ctable-row-main span:nth-child(3) {
            font-size: 0.78rem;
            color: #9CA3AF;
        }
}

@media (max-width: 640px) {
    .mf-ctable-row-main {
        grid-template-columns: minmax(0, 1fr) auto;
    }

        .mf-ctable-row-main span:nth-child(2),
        .mf-ctable-row-main span:nth-child(3) {
            font-size: 0.78rem;
            color: #9CA3AF;
        }
}
/* =========================================================
   SECTION LINES A – BASE + MULTI COLOR PRESETS
   ========================================================= */

.mf-section-lines-A {
    position: relative;
    padding: 3.5rem 0;
    overflow: hidden;
    background: #05060a;
    /* Defaults */
    --mf-accent: var(--mf-orange);
    --mf-accent-2: var(--mf-blue);
    --mf-accent-3: rgba(255,255,255,0.0);
    /* Control */
    --mf-line-intensity: 0.60; /* 0–1 */
    --mf-line-shift: 0; /* 0–1 */
    --mf-dark-stripe: 0.40; /* 0–1: how strong the dark diagonal shading is */
    --mf-line-width: 2px; /* line thickness */
    --mf-line-gap: 14px; /* gap between lines */
    --mf-glow-size: 10px; /* glow radius */
    --mf-glow-alpha: 0.55; /* glow opacity */

    z-index: 1;
}

    /* Main background layer (lines + shading + base gradient) */
    .mf-section-lines-A::before {
        content: "";
        position: absolute;
        inset: -80px 0;
        z-index: -1;
        pointer-events: none;
        /* 1) Dark shading stripes (keep subtle, avoid "hazard") */
        /* 2) Neon lines (primary) */
        /* 3) Neon lines (secondary, offset) */
        /* 4) Base gradient */
        background: repeating-linear-gradient( 135deg, rgba(0,0,0,0.0) 0, rgba(0,0,0,0.0) 20px, rgba(0,0,0,calc(0.75 * var(--mf-dark-stripe))) 20px, rgba(0,0,0,calc(0.75 * var(--mf-dark-stripe))) 26px ), repeating-linear-gradient( 135deg, color-mix(in srgb, var(--mf-accent) 60%, transparent) 0, color-mix(in srgb, var(--mf-accent) 60%, transparent) var(--mf-line-width), transparent var(--mf-line-width), transparent var(--mf-line-gap) ), repeating-linear-gradient( 135deg, color-mix(in srgb, var(--mf-accent-2) 45%, transparent) 0, color-mix(in srgb, var(--mf-accent-2) 45%, transparent) 1px, transparent 1px, transparent calc(var(--mf-line-gap) + 6px) ), linear-gradient( 135deg, #05060a 0%, #070b15 40%, #101520 80%, #05060a 100% );
        opacity: calc(0.28 + var(--mf-line-intensity) * 0.50);
        background-position: 0 0, calc(var(--mf-line-shift) * 40px) 0, calc(var(--mf-line-shift) * -22px) 0, 0 0;
        /* Glow: use BOTH accents */
        filter: drop-shadow( 0 0 calc(4px + var(--mf-line-intensity) * var(--mf-glow-size)) color-mix(in srgb, var(--mf-accent) calc(var(--mf-glow-alpha) * 100%), transparent) ) drop-shadow( 0 0 calc(3px + var(--mf-line-intensity) * (var(--mf-glow-size) * 0.7)) color-mix(in srgb, var(--mf-accent-2) 35%, transparent) );
    }

    /* Vignette / top-bottom fade */
    .mf-section-lines-A::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        pointer-events: none;
        background: linear-gradient( to bottom, rgba(5, 6, 10, 0.96) 0%, rgba(5, 6, 10, 0.0) 18%, rgba(5, 6, 10, 0.0) 82%, rgba(5, 6, 10, 0.96) 100% );
    }
/* =========================================================
   Presets: change the feel per section
   Use by adding class on the section element
   ========================================================= */

.mf-lines-orange {
    --mf-accent: var(--mf-orange);
    --mf-accent-2: color-mix(in srgb, var(--mf-orange) 30%, var(--mf-blue));
    --mf-line-intensity: 0.62;
    --mf-dark-stripe: 0.32;
}

.mf-lines-blue {
    --mf-accent: var(--mf-blue);
    --mf-accent-2: color-mix(in srgb, var(--mf-blue) 55%, var(--mf-orange));
    --mf-line-intensity: 0.64;
    --mf-dark-stripe: 0.26;
}

.mf-lines-violet {
    --mf-accent: #9b59ff; /* violet */
    --mf-accent-2: color-mix(in srgb, #9b59ff 40%, var(--mf-blue));
    --mf-line-intensity: 0.58;
    --mf-dark-stripe: 0.24;
}

.mf-lines-mix-sunset {
    /* Orange + violet = “sunset neon” */
    --mf-accent: var(--mf-orange);
    --mf-accent-2: #9b59ff;
    --mf-line-intensity: 0.66;
    --mf-dark-stripe: 0.22;
}

.mf-lines-mix-cyan {
    /* Blue + cyan = “tech lab” */
    --mf-accent: var(--mf-blue);
    --mf-accent-2: #00d4ff;
    --mf-line-intensity: 0.60;
    --mf-dark-stripe: 0.20;
}

.mf-lines-steel {
    /* More subtle, premium */
    --mf-accent: color-mix(in srgb, var(--mf-blue) 35%, rgba(255,255,255,0.7));
    --mf-accent-2: rgba(255,91,0,0.25);
    --mf-line-intensity: 0.48;
    --mf-dark-stripe: 0.18;
    --mf-glow-alpha: 0.40;
}
.mf-lines-cyan {
    --mf-accent: #00d4ff;
    --mf-accent-2: color-mix(in srgb, #00d4ff 55%, var(--mf-blue));
    --mf-line-intensity: 0.62;
    --mf-dark-stripe: 0.18;
}
.mf-lines-ice {
    --mf-accent: color-mix(in srgb, #ffffff 70%, var(--mf-blue));
    --mf-accent-2: rgba(28,141,255,0.45);
    --mf-line-intensity: 0.52;
    --mf-dark-stripe: 0.16;
    --mf-glow-alpha: 0.38;
}
.mf-lines-amethyst {
    --mf-accent: #8b7dff;
    --mf-accent-2: color-mix(in srgb, #8b7dff 45%, var(--mf-blue));
    --mf-line-intensity: 0.56;
    --mf-dark-stripe: 0.20;
}
.mf-lines-teal {
    --mf-accent: #1fb6aa;
    --mf-accent-2: color-mix(in srgb, #1fb6aa 40%, var(--mf-blue));
    --mf-line-intensity: 0.58;
    --mf-dark-stripe: 0.22;
}
.mf-lines-steel-blue {
    --mf-accent: #6b88a6;
    --mf-accent-2: color-mix(in srgb, #6b88a6 45%, var(--mf-blue));
    --mf-line-intensity: 0.50;
    --mf-dark-stripe: 0.20;
    --mf-glow-alpha: 0.42;
}
.mf-lines-aurora {
    --mf-accent: #00d4ff; /* cyan */
    --mf-accent-2: #9b59ff; /* violet */
    --mf-line-intensity: 0.64;
    --mf-dark-stripe: 0.18;
}
/* Force presets to override default --mf-accent in all cases */
.mf-section-lines-A.mf-lines-cyan {
    --mf-accent: #00d4ff !important;
    --mf-accent-2: color-mix(in srgb, #00d4ff 55%, var(--mf-blue)) !important;
}

.mf-section-lines-A.mf-lines-ice {
    --mf-accent: color-mix(in srgb, #ffffff 70%, var(--mf-blue)) !important;
    --mf-accent-2: rgba(28,141,255,0.45) !important;
}

.mf-section-lines-A.mf-lines-amethyst {
    --mf-accent: #8b7dff !important;
    --mf-accent-2: color-mix(in srgb, #8b7dff 45%, var(--mf-blue)) !important;
}

.mf-section-lines-A.mf-lines-teal {
    --mf-accent: #1fb6aa !important;
    --mf-accent-2: color-mix(in srgb, #1fb6aa 40%, var(--mf-blue)) !important;
}

.mf-section-lines-A.mf-lines-steel-blue {
    --mf-accent: #6b88a6 !important;
    --mf-accent-2: color-mix(in srgb, #6b88a6 45%, var(--mf-blue)) !important;
}

.mf-section-lines-A.mf-lines-aurora {
    --mf-accent: #00d4ff !important;
    --mf-accent-2: #9b59ff !important;
}
/* Make presets affect home pattern too */
.mf-section-pattern.mf-lines-cyan {
    --mf-accent: #00d4ff !important;
}

.mf-section-pattern.mf-lines-ice {
    --mf-accent: color-mix(in srgb, #ffffff 70%, var(--mf-blue)) !important;
}

.mf-section-pattern.mf-lines-amethyst {
    --mf-accent: #8b7dff !important;
}

.mf-section-pattern.mf-lines-aurora {
    --mf-accent: #00d4ff !important;
    --mf-accent-2: #9b59ff !important;
}

/* =========================================================
   ABOUT · 1) FORGE CHAMBER
   ========================================================= */

#about-forge-chamber .forge-chamber {
    display: flex;
    flex-direction: column;
    gap: 1.8rem;
}

#about-forge-chamber .forge-chamber-head {
    text-align: center;
}

    #about-forge-chamber .forge-chamber-head .mf-section-title {
        margin-bottom: 0.4rem;
    }

#about-forge-chamber .forge-chamber-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.2fr) minmax(0, 1.1fr);
    gap: 1.5rem;
    align-items: center;
}

/* Panels laterales */

#about-forge-chamber .forge-chamber-panel {
    border-radius: 1rem;
    padding: 1rem 1.1rem;
    background: radial-gradient(circle at 0 0, rgba(15,23,42,0.98), rgba(15,23,42,0.90));
    border: 1px solid rgba(71,85,105,0.9);
    box-shadow: 0 0 0 1px rgba(15,23,42,0.85), 0 22px 65px rgba(0,0,0,0.95);
    font-size: 0.9rem;
    color: #E5E7EB;
}

    #about-forge-chamber .forge-chamber-panel h3 {
        font-size: 0.95rem;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: #F9FAFB;
        margin-bottom: 0.3rem;
    }

    #about-forge-chamber .forge-chamber-panel p {
        font-size: 0.86rem;
        color: #9CA3AF;
        margin-bottom: 0.6rem;
    }

    #about-forge-chamber .forge-chamber-panel ul {
        list-style: none;
        padding: 0;
        margin: 0;
        font-size: 0.84rem;
        color: #D1D5DB;
    }

    #about-forge-chamber .forge-chamber-panel li + li {
        margin-top: 0.22rem;
    }

/* Panel central de vídeo */

#about-forge-chamber .forge-chamber-video {
    position: relative;
    border-radius: 1.25rem;
    padding: 0.35rem;
    background: linear-gradient(135deg, var(--mf-blue), var(--mf-violet));
    box-shadow: 0 0 24px rgba(28,141,255,0.9), 0 32px 95px rgba(0,0,0,0.98);
}

    #about-forge-chamber .forge-chamber-video::before {
        content: "";
        position: absolute;
        inset: 10%;
        border-radius: 2rem;
        border: 1px dashed rgba(15,23,42,0.45);
        opacity: 0.25;
        pointer-events: none;
    }

    #about-forge-chamber .forge-chamber-video video {
        display: block;
        width: 100%;
        height: 100%;
        border-radius: 1rem;
        object-fit: cover;
        background: #020617;
    }

/* Responsive Forge Chamber */

@media (max-width: 1024px) {
    #about-forge-chamber .forge-chamber-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    #about-forge-chamber .forge-chamber-video {
        order: -1;
    }
}

/* =========================================================
   ABOUT · 2) FOUNDERS STRIP
   ========================================================= */

#about-founders-strip .founders-strip {
    display: flex;
    flex-direction: column;
    gap: 1.8rem;
}

#about-founders-strip .founders-strip-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr) minmax(0, 0.9fr);
    gap: 1.6rem;
    align-items: center;
}

/* Foto founders */

#about-founders-strip .founders-photo {
    margin: 0;
    border-radius: 1.1rem;
    overflow: hidden;
    background: radial-gradient(circle at 0 0, rgba(15,23,42,1), rgba(3,7,18,1));
    border: 1px solid rgba(71,85,105,0.9);
    box-shadow: 0 0 0 1px rgba(15,23,42,0.9), 0 24px 80px rgba(0,0,0,0.98);
}

    #about-founders-strip .founders-photo img {
        display: block;
        width: 100%;
        height: auto;
        object-fit: cover;
        filter: saturate(1.05) contrast(1.05);
    }

/* Texto central */

#about-founders-strip .founders-core {
    border-radius: 1.1rem;
    padding: 1.1rem 1.2rem;
    background: radial-gradient(circle at 0 0, rgba(15,23,42,0.98), rgba(15,23,42,0.90));
    border: 1px solid rgba(71,85,105,0.9);
    box-shadow: 0 0 0 1px rgba(15,23,42,0.9), 0 22px 70px rgba(0,0,0,0.95);
    font-size: 0.9rem;
    color: #E5E7EB;
}

    #about-founders-strip .founders-core h3 {
        font-size: 0.95rem;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: #F9FAFB;
        margin-bottom: 0.4rem;
    }

    #about-founders-strip .founders-core p {
        font-size: 0.86rem;
        color: #9CA3AF;
        margin-bottom: 0.5rem;
    }

        #about-founders-strip .founders-core p:last-child {
            margin-bottom: 0;
        }

/* Microcards laterales */

#about-founders-strip .founders-microcards {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

#about-founders-strip .microcard {
    border-radius: 0.9rem;
    padding: 0.55rem 0.75rem;
    background: radial-gradient(circle at 0 0, rgba(15,23,42,0.98), rgba(15,23,42,0.92));
    border: 1px solid rgba(55,65,81,0.9);
    box-shadow: 0 16px 45px rgba(0,0,0,0.9);
    font-size: 0.82rem;
    color: #D1D5DB;
}

    #about-founders-strip .microcard h4 {
        font-size: 0.9rem;
        margin: 0 0 0.15rem;
        color: var(--mf-blue);
    }

    #about-founders-strip .microcard span {
        font-size: 0.78rem;
        color: #9CA3AF;
    }

/* Responsive Founders Strip */

@media (max-width: 1024px) {
    #about-founders-strip .founders-strip-layout {
        grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.6fr);
        grid-template-areas:
            "photo core"
            "microcards core";
    }

    #about-founders-strip .founders-photo {
        grid-area: photo;
    }

    #about-founders-strip .founders-core {
        grid-area: core;
    }

    #about-founders-strip .founders-microcards {
        grid-area: microcards;
        flex-direction: row;
        flex-wrap: wrap;
    }

    #about-founders-strip .microcard {
        flex: 1 1 45%;
    }
}

@media (max-width: 768px) {
    #about-founders-strip .founders-strip-layout {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "photo"
            "core"
            "microcards";
    }

    #about-founders-strip .founders-microcards {
        flex-direction: column;
    }
}

/* =========================================================
   ABOUT · 3) FORGE TIMELINE GALLERY
   ========================================================= */

#about-forge-timeline .forge-timeline {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
}

#about-forge-timeline .forge-timeline-track {
    position: relative;
    display: flex;
    gap: 1.3rem;
    padding: 0.4rem 0.2rem 0.6rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: thin;
}

    #about-forge-timeline .forge-timeline-track::-webkit-scrollbar {
        height: 6px;
    }

    #about-forge-timeline .forge-timeline-track::-webkit-scrollbar-track {
        background: rgba(15,23,42,0.9);
    }

    #about-forge-timeline .forge-timeline-track::-webkit-scrollbar-thumb {
        background: linear-gradient(90deg, var(--mf-blue), var(--mf-orange));
    }

    /* línea base pseudo */

    #about-forge-timeline .forge-timeline-track::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 50%;
        height: 2px;
        transform: translateY(-50%);
        background: linear-gradient(90deg, rgba(148,163,184,0.0), rgba(148,163,184,0.7), rgba(148,163,184,0.0));
        pointer-events: none;
    }

/* Steps */

#about-forge-timeline .forge-timeline-step {
    position: relative;
    flex: 0 0 min(420px, 80vw);
    scroll-snap-align: center;
    border-radius: 1.1rem;
    padding: 0.7rem;
    background: radial-gradient(circle at 0 0, rgba(15,23,42,0.98), rgba(15,23,42,0.90));
    border: 1px solid rgba(71,85,105,0.9);
    box-shadow: 0 0 0 1px rgba(15,23,42,0.9), 0 22px 70px rgba(0,0,0,0.96);
}

    /* Nodo de línea */

    #about-forge-timeline .forge-timeline-step::before {
        content: "";
        position: absolute;
        left: 50%;
        top: -0.35rem;
        transform: translateX(-50%);
        width: 0.9rem;
        height: 0.9rem;
        border-radius: 999px;
        background: #020617;
        border: 3px solid var(--mf-orange);
        box-shadow: 0 0 14px rgba(255,91,0,0.9), 0 0 28px rgba(255,91,0,0.7);
    }

    /* Imagen */

    #about-forge-timeline .forge-timeline-step figure {
        margin: 0 0 0.55rem;
        border-radius: 0.85rem;
        overflow: hidden;
        background: #020617;
    }

    #about-forge-timeline .forge-timeline-step img {
        display: block;
        width: 100%;
        height: auto;
        object-fit: cover;
        filter: saturate(1.05) contrast(1.06);
    }

/* Texto */

#about-forge-timeline .forge-timeline-body h3 {
    font-size: 0.95rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #F9FAFB;
    margin-bottom: 0.25rem;
}

#about-forge-timeline .forge-timeline-body p {
    font-size: 0.86rem;
    color: #9CA3AF;
    margin: 0;
}

/* Hover suave */

#about-forge-timeline .forge-timeline-step:hover {
    transform: translateY(-3px);
    box-shadow: 0 0 0 1px rgba(15,23,42,1), 0 26px 82px rgba(0,0,0,0.98);
}

/* Responsive – timeline */

@media (max-width: 768px) {
    #about-forge-timeline .forge-timeline-track::before {
        top: auto;
        bottom: 0.2rem;
    }

    #about-forge-timeline .forge-timeline-step::before {
        top: auto;
        bottom: -0.3rem;
    }
}
/* =========================================================
   ABOUT · 4) NEON PILLARS
   ========================================================= */

#about-neon-pillars .neon-pillars {
    display: flex;
    flex-direction: column;
    gap: 1.8rem;
}

#about-neon-pillars .mf-section-header {
    text-align: center;
}

#about-neon-pillars .pillars-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.4rem;
}

/* Single pillar */

#about-neon-pillars .pillar {
    position: relative;
    border-radius: 1.1rem;
    padding: 1rem 1rem 1.2rem;
    background: radial-gradient(circle at 0 0, rgba(15,23,42,0.98), rgba(15,23,42,0.90));
    border: 1px solid rgba(71,85,105,0.9);
    box-shadow: 0 0 0 1px rgba(15,23,42,0.9), 0 22px 70px rgba(0,0,0,0.96);
    text-align: center;
    color: #E5E7EB;
    font-size: 0.9rem;
    overflow: hidden;
}

/* Neon vertical tube */

#about-neon-pillars .pillar-icon {
    position: relative;
    width: 6px;
    height: 82px;
    margin: 0 auto 0.75rem;
    border-radius: 999px;
    background: linear-gradient( 180deg, rgba(255,255,255,0.9), var(--mf-blue), var(--mf-violet) );
    box-shadow: 0 0 12px rgba(28,141,255,0.9), 0 0 26px rgba(160,60,255,0.7);
}

    #about-neon-pillars .pillar-icon::before {
        content: "";
        position: absolute;
        inset: 12%;
        border-radius: inherit;
        background: linear-gradient( 180deg, rgba(255,255,255,0.8), transparent );
        opacity: 0.7;
    }

/* Title and text */

#about-neon-pillars .pillar h3 {
    margin-top: 0.1rem;
    margin-bottom: 0.35rem;
    font-size: 0.9rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #F9FAFB;
}

#about-neon-pillars .pillar p {
    margin: 0;
    font-size: 0.86rem;
    color: #9CA3AF;
}

/* Hover micro motion */

#about-neon-pillars .pillar:hover {
    transform: translateY(-3px);
    box-shadow: 0 0 0 1px rgba(15,23,42,1), 0 28px 80px rgba(0,0,0,0.98);
}

    #about-neon-pillars .pillar:hover .pillar-icon {
        box-shadow: 0 0 18px rgba(28,141,255,1), 0 0 32px rgba(160,60,255,0.95);
    }

/* Responsive pillars */

@media (max-width: 900px) {
    #about-neon-pillars .pillars-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    #about-neon-pillars .pillars-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* =========================================================
   ABOUT · 5) SPLIT STORY (VIDEO + TEXT)
   ========================================================= */

#about-split-story .split-story {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.3fr);
    gap: 1.6rem;
    align-items: center;
}

/* Media side */

#about-split-story .story-media {
    position: relative;
    border-radius: 1.3rem;
    padding: 0.3rem;
    background: linear-gradient(135deg, var(--mf-blue), var(--mf-orange));
    box-shadow: 0 0 24px rgba(28,141,255,0.9), 0 32px 90px rgba(0,0,0,0.98);
}

    #about-split-story .story-media::before {
        content: "";
        position: absolute;
        inset: 12%;
        border-radius: 2.2rem;
        border: 1px dashed rgba(15,23,42,0.5);
        opacity: 0.4;
        pointer-events: none;
    }

    #about-split-story .story-media video,
    #about-split-story .story-media img {
        display: block;
        width: 100%;
        height: 100%;
        border-radius: 1.1rem;
        object-fit: cover;
        background: #020617;
    }

/* Text side */

#about-split-story .story-text {
    border-radius: 1.2rem;
    padding: 1.2rem 1.3rem;
    background: radial-gradient(circle at 0 0, rgba(15,23,42,0.98), rgba(15,23,42,0.90));
    border: 1px solid rgba(71,85,105,0.9);
    box-shadow: 0 0 0 1px rgba(15,23,42,0.9), 0 24px 80px rgba(0,0,0,0.96);
    color: #E5E7EB;
    font-size: 0.9rem;
}

    #about-split-story .story-text h2 {
        font-size: 1.1rem;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: #F9FAFB;
        margin-bottom: 0.6rem;
    }

    #about-split-story .story-text p {
        font-size: 0.88rem;
        color: #9CA3AF;
        margin-bottom: 0.55rem;
    }

        #about-split-story .story-text p:last-child {
            margin-bottom: 0;
        }

/* Responsive split */

@media (max-width: 960px) {
    #about-split-story .split-story {
        grid-template-columns: minmax(0, 1fr);
    }

    #about-split-story .story-media {
        order: -1;
    }
}

/* =========================================================
   ABOUT · 6) CODEX (LORE / ENTRIES)
   ========================================================= */

#about-codex .codex {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Single entry */

#about-codex .codex-entry {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.9rem;
    align-items: flex-start;
}

/* Marker / "rune" */

#about-codex .codex-marker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 0.8rem;
    background: radial-gradient(circle at 0 0, rgba(15,23,42,1), rgba(3,7,18,1));
    border: 1px solid rgba(148,163,184,0.9);
    box-shadow: 0 0 12px rgba(148,163,184,0.9), 0 0 26px rgba(148,163,184,0.5);
    font-size: 0.75rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #E5E7EB;
}

/* Vertical line connecting entries */

#about-codex .codex-entry::before {
    content: "";
    position: absolute;
    left: 1.2rem;
    top: 2.4rem;
    bottom: -1.2rem;
    width: 1px;
    background: linear-gradient( to bottom, rgba(148,163,184,0.5), rgba(148,163,184,0.0) );
    pointer-events: none;
}

/* Last one: no tail */

#about-codex .codex-entry:last-of-type::before {
    display: none;
}

/* Body */

#about-codex .codex-body {
    border-radius: 1rem;
    padding: 0.85rem 1rem;
    background: radial-gradient(circle at 0 0, rgba(15,23,42,0.98), rgba(15,23,42,0.90));
    border: 1px solid rgba(55,65,81,0.95);
    box-shadow: 0 0 0 1px rgba(15,23,42,0.9), 0 18px 60px rgba(0,0,0,0.95);
    font-size: 0.88rem;
    color: #E5E7EB;
}

    #about-codex .codex-body h3 {
        font-size: 0.94rem;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: #F9FAFB;
        margin-bottom: 0.3rem;
    }

    #about-codex .codex-body p {
        margin: 0;
        font-size: 0.86rem;
        color: #9CA3AF;
    }

/* Hover subtle */

#about-codex .codex-entry:hover .codex-body {
    box-shadow: 0 0 0 1px rgba(15,23,42,1), 0 22px 75px rgba(0,0,0,0.98);
}

/* Responsive codex */

@media (max-width: 640px) {
    #about-codex .codex-entry {
        grid-template-columns: auto minmax(0, 1fr);
    }
}
/* =========================================================
   1) METRICS RIBBON
   ========================================================= */

#mf-metrics-ribbon .mf-metrics {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
}

#mf-metrics-ribbon .mf-metrics-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

#mf-metrics-ribbon .mf-metric-card {
    border-radius: 1rem;
    padding: 0.85rem 1rem;
    background: radial-gradient(circle at 0 0, rgba(15,23,42,0.98), rgba(15,23,42,0.90));
    border: 1px solid rgba(71,85,105,0.9);
    box-shadow: 0 0 0 1px rgba(15,23,42,0.9), 0 22px 65px rgba(0,0,0,0.95);
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

#mf-metrics-ribbon .mf-metric-label {
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #9CA3AF;
}

#mf-metrics-ribbon .mf-metric-value {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--mf-blue);
}

#mf-metrics-ribbon .mf-metric-hint {
    font-size: 0.8rem;
    color: #D1D5DB;
}

#mf-metrics-ribbon .mf-metric-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 0 0 1px rgba(15,23,42,1), 0 26px 80px rgba(0,0,0,0.98);
}

@media (max-width: 960px) {
    #mf-metrics-ribbon .mf-metrics-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    #mf-metrics-ribbon .mf-metrics-row {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* =========================================================
   2) TESTIMONIAL CAROUSEL
   ========================================================= */

#mf-testimonials .mf-testimonials {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
}

#mf-testimonials .mf-testimonials-shell {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
}

#mf-testimonials .mf-tm-track {
    flex: 1 1 auto;
    display: flex;
    gap: 1.1rem;
    overflow: hidden;
    scroll-behavior: smooth;
}

#mf-testimonials .mf-tm-card {
    flex: 0 0 min(360px, 80vw);
    border-radius: 1rem;
    padding: 1rem 1.1rem;
    background: radial-gradient(circle at 0 0, rgba(15,23,42,0.98), rgba(15,23,42,0.90));
    border: 1px solid rgba(71,85,105,0.9);
    box-shadow: 0 0 0 1px rgba(15,23,42,0.9), 0 22px 70px rgba(0,0,0,0.96);
    color: #E5E7EB;
    font-size: 0.9rem;
}

#mf-testimonials .mf-tm-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.6rem;
}

#mf-testimonials .mf-tm-avatar {
    width: 3rem;
    height: 3rem;
    border-radius: 999px;
    overflow: hidden;
    border: 2px solid rgba(37,99,235,0.9);
    box-shadow: 0 0 12px rgba(37,99,235,0.9);
}

    #mf-testimonials .mf-tm-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

#mf-testimonials .mf-tm-meta {
    display: flex;
    flex-direction: column;
}

#mf-testimonials .mf-tm-name {
    font-size: 0.86rem;
    font-weight: 600;
    color: #F9FAFB;
}

#mf-testimonials .mf-tm-tag {
    font-size: 0.78rem;
    color: #9CA3AF;
}

#mf-testimonials .mf-tm-text {
    font-size: 0.86rem;
    color: #D1D5DB;
    margin: 0;
}

/* Arrows */

#mf-testimonials .mf-tm-arrow {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    border: 1px solid rgba(148,163,184,0.7);
    background: radial-gradient(circle at 30% 0, rgba(15,23,42,1), rgba(15,23,42,0.92));
    color: #E5E7EB;
    font-size: 1.6rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

    #mf-testimonials .mf-tm-arrow:hover {
        box-shadow: 0 0 18px rgba(28,141,255,0.7);
        transform: translateY(-1px);
    }

@media (max-width: 768px) {
    #mf-testimonials .mf-tm-arrow {
        display: none;
    }
}

/* =========================================================
   3) PRICING GRID
   ========================================================= */

#mf-pricing .mf-pricing {
    display: flex;
    flex-direction: column;
    gap: 1.8rem;
}

#mf-pricing .mf-pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.3rem;
}

#mf-pricing .mf-pricing-card {
    position: relative;
    border-radius: 1.1rem;
    padding: 1.1rem 1.2rem 1.2rem;
    background: radial-gradient(circle at 0 0, rgba(15,23,42,0.98), rgba(15,23,42,0.90));
    border: 1px solid rgba(71,85,105,0.9);
    box-shadow: 0 0 0 1px rgba(15,23,42,0.9), 0 22px 70px rgba(0,0,0,0.96);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    color: #E5E7EB;
    font-size: 0.9rem;
}

    /* Featured */

    #mf-pricing .mf-pricing-card.is-featured {
        background: radial-gradient(circle at 0 0, rgba(28,141,255,0.16), rgba(15,23,42,0.95));
        border-color: rgba(59,130,246,0.9);
        box-shadow: 0 0 0 1px rgba(37,99,235,0.9), 0 28px 80px rgba(0,0,0,0.98);
        transform: translateY(-4px);
    }

/* Badge */

#mf-pricing .mf-pricing-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.15rem 0.65rem;
    border-radius: 999px;
    border: 1px solid rgba(148,163,184,0.9);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: #9CA3AF;
    margin-bottom: 0.3rem;
}

#mf-pricing .mf-pricing-badge--hot {
    border-color: rgba(249,115,22,0.95);
    color: #FDBA74;
}

/* Title / description */

#mf-pricing .mf-pricing-card h3 {
    margin: 0;
    font-size: 0.98rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #F9FAFB;
}

#mf-pricing .mf-pricing-desc {
    margin: 0;
    font-size: 0.86rem;
    color: #9CA3AF;
}

/* Features list */

#mf-pricing .mf-pricing-list {
    list-style: none;
    padding: 0;
    margin: 0.4rem 0 0.6rem;
    font-size: 0.84rem;
    color: #D1D5DB;
}

    #mf-pricing .mf-pricing-list li + li {
        margin-top: 0.2rem;
    }

/* Footer */

#mf-pricing .mf-pricing-footer {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

#mf-pricing .mf-pricing-note {
    font-size: 0.78rem;
    color: #9CA3AF;
}


@media (max-width: 960px) {
    #mf-pricing .mf-pricing-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    #mf-pricing .mf-pricing-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    #mf-pricing .mf-pricing-card.is-featured {
        transform: none;
    }
}

/* =========================================================
   4) STICKY CTA BAR
   ========================================================= */

.mf-sticky-cta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    transform: translateY(100%);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.22s ease-out, opacity 0.22s ease-out;
}

    .mf-sticky-cta.is-visible {
        transform: translateY(0);
        opacity: 1;
        pointer-events: auto;
    }

.mf-sticky-cta-inner {
    max-width: 1120px;
    margin: 0 auto 0.75rem;
    border-radius: 999px;
    padding: 0.55rem 0.9rem;
    background: radial-gradient(circle at 0 0, rgba(15,23,42,0.98), rgba(15,23,42,0.96));
    border: 1px solid rgba(71,85,105,0.9);
    box-shadow: 0 0 0 1px rgba(15,23,42,0.9), 0 20px 65px rgba(0,0,0,0.98);
    display: flex;
    align-items: center;
    gap: 1rem;
}

.mf-sticky-info {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.mf-sticky-label {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: #9CA3AF;
}

.mf-sticky-text {
    font-size: 0.86rem;
    color: #E5E7EB;
}

.mf-sticky-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}


@media (max-width: 720px) {
    .mf-sticky-cta-inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .mf-sticky-actions {
        width: 100%;
        justify-content: flex-end;
    }
}

/* =========================================================
   5) QUICK ACTIONS DOCK
   ========================================================= */

.mf-quick-dock {
    position: fixed;
    right: 1rem;
    bottom: 5rem;
    z-index: 55;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
}

    /* Toggle button */

    .mf-quick-dock .mf-qd-toggle {
        width: 44px;
        height: 44px;
        border-radius: 999px;
        border: 1px solid rgba(148,163,184,0.9);
        background: radial-gradient(circle at 30% 0, rgba(15,23,42,0.98), rgba(15,23,42,0.94));
        color: #E5E7EB;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 1.2rem;
        transition: box-shadow 0.18s ease, transform 0.18s ease;
    }

        .mf-quick-dock .mf-qd-toggle:hover {
            box-shadow: 0 0 16px rgba(28,141,255,0.7);
            transform: translateY(-1px);
        }

    /* Panel */

    .mf-quick-dock .mf-qd-panel {
        display: flex;
        flex-direction: column;
        gap: 0.4rem;
        margin-right: 0.25rem;
        transform: translateY(8px);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.18s ease-out, transform 0.18s ease-out;
    }

    .mf-quick-dock.is-open .mf-qd-panel {
        transform: translateY(0);
        opacity: 1;
        pointer-events: auto;
    }

    /* Items */

    .mf-quick-dock .mf-qd-item {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        padding: 0.35rem 0.7rem;
        border-radius: 999px;
        border: 1px solid rgba(71,85,105,0.9);
        background: radial-gradient(circle at 0 0, rgba(15,23,42,0.98), rgba(15,23,42,0.94));
        box-shadow: 0 12px 35px rgba(0,0,0,0.9);
        font-size: 0.8rem;
        color: #E5E7EB;
        cursor: pointer;
        transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
    }

        .mf-quick-dock .mf-qd-item:hover {
            transform: translateX(-2px);
            border-color: rgba(59,130,246,0.95);
            box-shadow: 0 18px 55px rgba(0,0,0,0.98);
        }

    .mf-quick-dock .mf-qd-icon {
        font-size: 1rem;
    }

    .mf-quick-dock .mf-qd-label {
        white-space: nowrap;
    }

/* Mobile: dock menos intrusivo */

@media (max-width: 640px) {
    .mf-quick-dock {
        right: 0.6rem;
        bottom: 4.5rem;
    }

        .mf-quick-dock .mf-qd-item {
            padding-inline: 0.55rem;
        }
}
/* =========================================================
   1) FEATURE TABS
   ========================================================= */

#mf-feature-tabs .mf-feature-tabs {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
}

#mf-feature-tabs .mf-ft-tabs {
    position: relative;
    display: inline-flex;
    gap: 0.4rem;
    padding: 0.35rem;
    border-radius: 999px;
    background: radial-gradient(circle at 0 0, rgba(15,23,42,0.98), rgba(15,23,42,0.94));
    border: 1px solid rgba(71,85,105,0.9);
    box-shadow: 0 18px 55px rgba(0,0,0,0.95);
}

#mf-feature-tabs .mf-ft-tab {
    position: relative;
    z-index: 1;
    border: none;
    background: transparent;
    border-radius: 999px;
    padding: 0.5rem 0.9rem;
    font-size: 0.84rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #9CA3AF;
    cursor: pointer;
    white-space: nowrap;
}

    #mf-feature-tabs .mf-ft-tab.is-active {
        color: #F9FAFB;
    }

#mf-feature-tabs .mf-ft-underline {
    position: absolute;
    z-index: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--mf-blue), var(--mf-orange));
    box-shadow: 0 0 18px rgba(28,141,255,0.8);
    inset: 0.2rem auto 0.2rem 0.2rem;
    width: 0;
    transition: all 0.22s ease-out;
}

/* Panels */

#mf-feature-tabs .mf-ft-panels {
    margin-top: 1rem;
}

#mf-feature-tabs .mf-ft-panel {
    display: none;
    border-radius: 1.1rem;
    padding: 1.1rem 1.2rem;
    background: radial-gradient(circle at 0 0, rgba(15,23,42,0.98), rgba(15,23,42,0.9));
    border: 1px solid rgba(71,85,105,0.9);
    box-shadow: 0 0 0 1px rgba(15,23,42,0.9), 0 22px 70px rgba(0,0,0,0.96);
    color: #E5E7EB;
    font-size: 0.9rem;
}

    #mf-feature-tabs .mf-ft-panel.is-active {
        display: block;
    }

    #mf-feature-tabs .mf-ft-panel h3 {
        font-size: 0.96rem;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        margin-bottom: 0.4rem;
    }

    #mf-feature-tabs .mf-ft-panel p {
        font-size: 0.86rem;
        color: #9CA3AF;
        margin-bottom: 0.5rem;
    }

    #mf-feature-tabs .mf-ft-panel ul {
        margin: 0;
        padding: 0;
        list-style: none;
        font-size: 0.84rem;
        color: #D1D5DB;
    }

    #mf-feature-tabs .mf-ft-panel li + li {
        margin-top: 0.2rem;
    }

@media (max-width: 720px) {
    #mf-feature-tabs .mf-ft-tabs {
        flex-wrap: wrap;
        justify-content: center;
    }
}

/* =========================================================
   2) PROCESS STEPS
   ========================================================= */

#mf-process-steps .mf-process {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
}

#mf-process-steps .mf-ps-steps {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.4rem 0;
    border-bottom: 1px solid rgba(75,85,99,0.75);
}

#mf-process-steps .mf-ps-step {
    position: relative;
    border-radius: 999px;
    border: 1px solid rgba(55,65,81,0.9);
    background: radial-gradient(circle at 0 0, rgba(15,23,42,0.98), rgba(15,23,42,0.94));
    color: #9CA3AF;
    padding: 0.3rem 0.7rem;
    font-size: 0.78rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    cursor: pointer;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

    #mf-process-steps .mf-ps-step.is-active {
        border-color: rgba(59,130,246,0.95);
        color: #F9FAFB;
        box-shadow: 0 0 16px rgba(37,99,235,0.8);
        transform: translateY(-1px);
    }

#mf-process-steps .mf-ps-index {
    font-weight: 600;
    color: #E5E7EB;
}

#mf-process-steps .mf-ps-label {
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* Panels */

#mf-process-steps .mf-ps-panel-shell {
    margin-top: 1rem;
}

#mf-process-steps .mf-ps-panel {
    display: none;
    border-radius: 1.1rem;
    padding: 1rem 1.2rem;
    background: radial-gradient(circle at 0 0, rgba(15,23,42,0.98), rgba(15,23,42,0.9));
    border: 1px solid rgba(71,85,105,0.9);
    box-shadow: 0 0 0 1px rgba(15,23,42,0.9), 0 22px 70px rgba(0,0,0,0.96);
    color: #E5E7EB;
    font-size: 0.9rem;
}

    #mf-process-steps .mf-ps-panel.is-active {
        display: block;
    }

    #mf-process-steps .mf-ps-panel h3 {
        font-size: 0.96rem;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        margin-bottom: 0.4rem;
    }

    #mf-process-steps .mf-ps-panel p {
        font-size: 0.86rem;
        color: #9CA3AF;
        margin-bottom: 0.5rem;
    }

    #mf-process-steps .mf-ps-panel ul {
        margin: 0;
        padding: 0;
        list-style: none;
        font-size: 0.84rem;
        color: #D1D5DB;
    }

    #mf-process-steps .mf-ps-panel li + li {
        margin-top: 0.2rem;
    }

/* =========================================================
   3) FAQ ACCORDION
   ========================================================= */

#mf-faq .mf-faq {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
}

#mf-faq .mf-faq-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

#mf-faq .mf-faq-item {
    border-radius: 0.9rem;
    background: radial-gradient(circle at 0 0, rgba(15,23,42,0.98), rgba(15,23,42,0.9));
    border: 1px solid rgba(71,85,105,0.9);
    box-shadow: 0 0 0 1px rgba(15,23,42,0.9), 0 18px 60px rgba(0,0,0,0.95);
    overflow: hidden;
}

#mf-faq .mf-faq-question {
    width: 100%;
    border: none;
    background: transparent;
    padding: 0.75rem 0.9rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    cursor: pointer;
    font-size: 0.88rem;
    color: #E5E7EB;
}

    #mf-faq .mf-faq-question span:first-child {
        text-align: left;
    }

#mf-faq .mf-faq-icon {
    font-size: 1.1rem;
    color: #9CA3AF;
    transition: transform 0.18s ease;
}

#mf-faq .mf-faq-item.is-open .mf-faq-icon {
    transform: rotate(45deg);
}

#mf-faq .mf-faq-answer {
    max-height: 0;
    overflow: hidden;
    padding: 0 0.9rem;
    transition: max-height 0.22s ease-out, padding-bottom 0.22s ease-out;
}

#mf-faq .mf-faq-item.is-open .mf-faq-answer {
    padding-bottom: 0.75rem;
}

#mf-faq .mf-faq-answer p {
    font-size: 0.86rem;
    color: #9CA3AF;
    margin: 0.3rem 0 0;
}

/* =========================================================
   4) FILTER GALLERY
   ========================================================= */

#mf-filter-gallery .mf-filter-gallery {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
}

#mf-filter-gallery .mf-fg-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

#mf-filter-gallery .mf-fg-pill {
    border-radius: 999px;
    padding: 0.28rem 0.8rem;
    border: 1px solid rgba(75,85,99,0.9);
    background: radial-gradient(circle at 0 0, rgba(15,23,42,0.98), rgba(15,23,42,0.94));
    font-size: 0.78rem;
    color: #9CA3AF;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

    #mf-filter-gallery .mf-fg-pill.is-active {
        border-color: rgba(59,130,246,0.95);
        color: #F9FAFB;
        box-shadow: 0 0 16px rgba(37,99,235,0.8);
        transform: translateY(-1px);
    }

#mf-filter-gallery .mf-fg-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

#mf-filter-gallery .mf-fg-card {
    position: relative;
    border-radius: 1rem;
    overflow: hidden;
    background: #020617;
    border: 1px solid rgba(31,41,55,0.95);
    box-shadow: 0 22px 70px rgba(0,0,0,0.97);
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
}

    #mf-filter-gallery .mf-fg-card img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

#mf-filter-gallery .mf-fg-label {
    position: absolute;
    left: 0.8rem;
    bottom: 0.7rem;
    border-radius: 999px;
    padding: 0.2rem 0.7rem;
    background: radial-gradient(circle at 0 0, rgba(15,23,42,0.98), rgba(15,23,42,0.96));
    border: 1px solid rgba(148,163,184,0.9);
    font-size: 0.78rem;
    color: #E5E7EB;
}

#mf-filter-gallery .mf-fg-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 28px 90px rgba(0,0,0,0.98);
}

#mf-filter-gallery .mf-fg-card.is-hidden {
    pointer-events: none;
    opacity: 0;
    transform: scale(0.96);
}

@media (max-width: 960px) {
    #mf-filter-gallery .mf-fg-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    #mf-filter-gallery .mf-fg-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* =========================================================
   5) ANIMATED STATS
   ========================================================= */

#mf-animated-stats .mf-astats {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
}

#mf-animated-stats .mf-astats-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

#mf-animated-stats .mf-astat-card {
    border-radius: 1rem;
    padding: 0.85rem 1rem;
    background: radial-gradient(circle at 0 0, rgba(15,23,42,0.98), rgba(15,23,42,0.9));
    border: 1px solid rgba(71,85,105,0.9);
    box-shadow: 0 0 0 1px rgba(15,23,42,0.9), 0 22px 70px rgba(0,0,0,0.96);
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

#mf-animated-stats .mf-astat-label {
    font-size: 0.8rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #9CA3AF;
}

#mf-animated-stats .mf-astat-value {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--mf-orange);
}

@media (max-width: 960px) {
    #mf-animated-stats .mf-astats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    #mf-animated-stats .mf-astats-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* =========================================================
   1) USE CASES SELECTOR
   ========================================================= */

#mf-usecases .mf-usecases {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
}

#mf-usecases .mf-uc-shell {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.8fr);
    gap: 1.2rem;
}

#mf-usecases .mf-uc-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

#mf-usecases .mf-uc-item {
    border-radius: 0.9rem;
    padding: 0.7rem 0.8rem;
    border: 1px solid rgba(55,65,81,0.9);
    background: radial-gradient(circle at 0 0, rgba(15,23,42,0.98), rgba(15,23,42,0.94));
    text-align: left;
    cursor: pointer;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

#mf-usecases .mf-uc-label {
    display: block;
    font-size: 0.86rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #E5E7EB;
}

#mf-usecases .mf-uc-meta {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.8rem;
    color: #9CA3AF;
}

#mf-usecases .mf-uc-item.is-active {
    border-color: rgba(59,130,246,0.95);
    box-shadow: 0 0 16px rgba(37,99,235,0.8);
    transform: translateY(-1px);
}

#mf-usecases .mf-uc-panels {
    border-radius: 1.1rem;
    padding: 1.1rem 1.2rem;
    background: radial-gradient(circle at 0 0, rgba(15,23,42,0.98), rgba(15,23,42,0.9));
    border: 1px solid rgba(71,85,105,0.9);
    box-shadow: 0 0 0 1px rgba(15,23,42,0.9), 0 22px 70px rgba(0,0,0,0.96);
    color: #E5E7EB;
    font-size: 0.9rem;
}

#mf-usecases .mf-uc-panel {
    display: none;
}

    #mf-usecases .mf-uc-panel.is-active {
        display: block;
    }

    #mf-usecases .mf-uc-panel h3 {
        font-size: 0.96rem;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        margin-bottom: 0.4rem;
    }

    #mf-usecases .mf-uc-panel p {
        font-size: 0.86rem;
        color: #9CA3AF;
        margin-bottom: 0.5rem;
    }

    #mf-usecases .mf-uc-panel ul {
        margin: 0;
        padding: 0;
        list-style: none;
        font-size: 0.84rem;
        color: #D1D5DB;
    }

    #mf-usecases .mf-uc-panel li + li {
        margin-top: 0.2rem;
    }

@media (max-width: 900px) {
    #mf-usecases .mf-uc-shell {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* =========================================================
   2) VIEW TOGGLE
   ========================================================= */

#mf-view-toggle .mf-vt {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
}

#mf-view-toggle .mf-vt-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border-radius: 999px;
    padding: 0.25rem;
    background: radial-gradient(circle at 0 0, rgba(15,23,42,0.98), rgba(15,23,42,0.94));
    border: 1px solid rgba(71,85,105,0.9);
    box-shadow: 0 18px 55px rgba(0,0,0,0.95);
}

#mf-view-toggle .mf-vt-label {
    font-size: 0.78rem;
    color: #9CA3AF;
    padding-inline: 0.5rem;
}

#mf-view-toggle .mf-vt-switch {
    border-radius: 999px;
    border: none;
    background: transparent;
    padding: 0.4rem 0.8rem;
    font-size: 0.8rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #9CA3AF;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease;
}

    #mf-view-toggle .mf-vt-switch.is-active {
        background: linear-gradient(90deg, var(--mf-blue), var(--mf-orange));
        color: #0B1120;
    }

#mf-view-toggle .mf-vt-panels {
    margin-top: 1rem;
}

#mf-view-toggle .mf-vt-panel {
    display: none;
    border-radius: 1.1rem;
    padding: 1.1rem 1.2rem;
    background: radial-gradient(circle at 0 0, rgba(15,23,42,0.98), rgba(15,23,42,0.9));
    border: 1px solid rgba(71,85,105,0.9);
    box-shadow: 0 0 0 1px rgba(15,23,42,0.9), 0 22px 70px rgba(0,0,0,0.96);
    color: #E5E7EB;
    font-size: 0.9rem;
}

    #mf-view-toggle .mf-vt-panel.is-active {
        display: block;
    }

    #mf-view-toggle .mf-vt-panel h3 {
        font-size: 0.96rem;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        margin-bottom: 0.4rem;
    }

    #mf-view-toggle .mf-vt-panel p {
        font-size: 0.86rem;
        color: #9CA3AF;
        margin-bottom: 0.5rem;
    }

    #mf-view-toggle .mf-vt-panel ul {
        margin: 0;
        padding: 0;
        list-style: none;
        font-size: 0.84rem;
        color: #D1D5DB;
    }

    #mf-view-toggle .mf-vt-panel li + li {
        margin-top: 0.2rem;
    }

/* =========================================================
   3) CASE STUDIES CAROUSEL
   ========================================================= */

#mf-case-carousel .mf-cc {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
}

#mf-case-carousel .mf-cc-shell {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 1rem;
}

#mf-case-carousel .mf-cc-track {
    flex: 1 1 auto;
    display: flex;
    gap: 1rem;
    overflow: hidden;
    scroll-behavior: smooth;
}

#mf-case-carousel .mf-cc-card {
    flex: 0 0 min(360px, 80vw);
    border-radius: 1.1rem;
    padding: 1rem 1.1rem;
    background: radial-gradient(circle at 0 0, rgba(15,23,42,0.98), rgba(15,23,42,0.9));
    border: 1px solid rgba(71,85,105,0.9);
    box-shadow: 0 0 0 1px rgba(15,23,42,0.9), 0 22px 70px rgba(0,0,0,0.96);
    color: #E5E7EB;
    font-size: 0.9rem;
}

    #mf-case-carousel .mf-cc-card h3 {
        font-size: 0.96rem;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        margin-bottom: 0.3rem;
    }

#mf-case-carousel .mf-cc-meta {
    font-size: 0.84rem;
    color: #9CA3AF;
    margin-bottom: 0.4rem;
}

#mf-case-carousel .mf-cc-card ul {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.84rem;
    color: #D1D5DB;
}

#mf-case-carousel .mf-cc-card li + li {
    margin-top: 0.2rem;
}

/* Arrows */

#mf-case-carousel .mf-cc-arrow {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    border: 1px solid rgba(148,163,184,0.7);
    background: radial-gradient(circle at 30% 0, rgba(15,23,42,1), rgba(15,23,42,0.92));
    color: #E5E7EB;
    font-size: 1.6rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

    #mf-case-carousel .mf-cc-arrow:hover {
        box-shadow: 0 0 18px rgba(28,141,255,0.7);
        transform: translateY(-1px);
    }

@media (max-width: 768px) {
    #mf-case-carousel .mf-cc-arrow {
        display: none;
    }
}

/* Progress bar */

#mf-case-carousel .mf-cc-progress {
    margin-top: 0.6rem;
    height: 3px;
    border-radius: 999px;
    background: rgba(31,41,55,0.9);
    overflow: hidden;
}

#mf-case-carousel .mf-cc-progress-bar {
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, var(--mf-blue), var(--mf-orange));
    transition: width 0.25s ease-out;
}

/* =========================================================
   4) CHECKLIST
   ========================================================= */

#mf-checklist .mf-checklist {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
}

#mf-checklist .mf-ch-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

#mf-checklist .mf-ch-item {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    border-radius: 1rem;
    padding: 0.8rem 0.9rem;
    background: radial-gradient(circle at 0 0, rgba(15,23,42,0.98), rgba(15,23,42,0.9));
    border: 1px solid rgba(71,85,105,0.9);
    box-shadow: 0 0 0 1px rgba(15,23,42,0.9), 0 20px 65px rgba(0,0,0,0.96);
    cursor: pointer;
}

#mf-checklist .mf-ch-check {
    border: none;
    background: transparent;
    padding: 0;
    margin-top: 0.1rem;
    cursor: pointer;
}

#mf-checklist .mf-ch-icon {
    display: inline-flex;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 999px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(148,163,184,0.9);
    font-size: 0.8rem;
    color: #9CA3AF;
}

#mf-checklist .mf-ch-body h3 {
    margin: 0 0 0.25rem;
    font-size: 0.9rem;
    color: #F9FAFB;
}

#mf-checklist .mf-ch-body p {
    margin: 0;
    font-size: 0.84rem;
    color: #9CA3AF;
}

/* Checked state */

#mf-checklist .mf-ch-item.is-done {
    border-color: rgba(34,197,94,0.9);
    box-shadow: 0 0 18px rgba(34,197,94,0.5);
}

    #mf-checklist .mf-ch-item.is-done .mf-ch-icon {
        border-color: rgba(34,197,94,0.9);
        color: rgba(34,197,94,0.9);
    }

/* Responsive */

@media (max-width: 960px) {
    #mf-checklist .mf-ch-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    #mf-checklist .mf-ch-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* =========================================================
   5) STATUS FEED
   ========================================================= */

#mf-status-feed .mf-status-feed {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
}

#mf-status-feed .mf-sf-list {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    padding-left: 1.4rem;
}

    #mf-status-feed .mf-sf-list::before {
        content: "";
        position: absolute;
        left: 0.6rem;
        top: 0.3rem;
        bottom: 0.3rem;
        width: 2px;
        background: linear-gradient( to bottom, rgba(148,163,184,0.9), rgba(148,163,184,0.1) );
    }

#mf-status-feed .mf-sf-item {
    position: relative;
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
}

#mf-status-feed .mf-sf-bullet {
    position: absolute;
    left: -0.1rem;
    top: 0.15rem;
    width: 0.9rem;
    height: 0.9rem;
    border-radius: 999px;
    border: 2px solid rgba(148,163,184,0.9);
    background: #020617;
    box-shadow: 0 0 8px rgba(148,163,184,0.6);
}

#mf-status-feed .mf-sf-item.is-active .mf-sf-bullet {
    border-color: rgba(59,130,246,0.98);
    box-shadow: 0 0 14px rgba(59,130,246,0.9);
}

#mf-status-feed .mf-sf-body {
    margin-left: 1.6rem;
    border-radius: 0.9rem;
    padding: 0.6rem 0.8rem;
    background: radial-gradient(circle at 0 0, rgba(15,23,42,0.98), rgba(15,23,42,0.9));
    border: 1px solid rgba(55,65,81,0.95);
    box-shadow: 0 0 0 1px rgba(15,23,42,0.9), 0 18px 60px rgba(0,0,0,0.95);
}

#mf-status-feed .mf-sf-label {
    display: block;
    font-size: 0.84rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #F9FAFB;
    margin-bottom: 0.15rem;
}

#mf-status-feed .mf-sf-body p {
    margin: 0;
    font-size: 0.84rem;
    color: #9CA3AF;
}
/* =========================================================
   MF FLOATING / STICKY COMPONENTS PACK
   ========================================================= */

/* ---------------------------------------------------------
   1) MF INFO BADGE (TOP-LEFT)
   --------------------------------------------------------- */

.mf-info-badge {
    position: fixed;
    top: 1.1rem;
    left: 1.1rem;
    z-index: 60;
    pointer-events: auto;
}

.mf-info-badge-inner {
    min-width: 220px;
    max-width: 260px;
    padding: 0.55rem 0.75rem;
    border-radius: 0.9rem;
    background: radial-gradient(circle at 0 0, rgba(15,23,42,0.98), rgba(15,23,42,0.9));
    border: 1px solid rgba(148,163,184,0.9);
    box-shadow: 0 0 0 1px rgba(15,23,42,0.95), 0 18px 50px rgba(0,0,0,0.92), 0 0 24px rgba(28,141,255,0.55);
    color: #E5E7EB;
    font-size: 0.78rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.mf-info-title {
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--mf-blue);
}

.mf-info-desc {
    font-size: 0.78rem;
    color: #E5E7EB;
}

/* Optional: hide badge on very small screens */
@media (max-width: 480px) {
    .mf-info-badge {
        top: 0.6rem;
        left: 0.6rem;
        max-width: 80vw;
    }
}

/* ---------------------------------------------------------
   2) MF UTILITY DOCK (BOTTOM NAV)
   --------------------------------------------------------- */

.mf-utility-dock {
    position: fixed;
    left: 50%;
    bottom: 1.2rem;
    transform: translateX(-50%);
    z-index: 60;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.4rem;
    border-radius: 999px;
    background: radial-gradient(circle at 0 0, rgba(15,23,42,0.98), rgba(15,23,42,0.94));
    border: 1px solid rgba(71,85,105,0.95);
    box-shadow: 0 0 0 1px rgba(15,23,42,0.95), 0 20px 60px rgba(0,0,0,0.96), 0 0 26px rgba(28,141,255,0.5);
    backdrop-filter: blur(10px);
}

.mf-ud-item {
    border: none;
    background: transparent;
    border-radius: 999px;
    padding: 0.35rem 0.6rem;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.78rem;
    color: #E5E7EB;
    cursor: pointer;
    transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

    .mf-ud-item span {
        font-size: 0.76rem;
        letter-spacing: 0.12em;
        text-transform: uppercase;
    }

    .mf-ud-item:hover {
        background: rgba(15,23,42,0.95);
        box-shadow: 0 0 16px rgba(59,130,246,0.7);
        transform: translateY(-1px);
    }

/* center button – main action */
.mf-ud-center {
    width: 2.4rem;
    height: 2.4rem;
    padding: 0;
    border-radius: 999px;
    background: radial-gradient(circle at 30% 0, var(--mf-blue), var(--mf-orange));
    box-shadow: 0 0 20px rgba(59,130,246,0.9);
    font-size: 1.1rem;
    justify-content: center;
}

/* Compact mode on small screens */
@media (max-width: 640px) {
    .mf-utility-dock {
        gap: 0.2rem;
        padding-inline: 0.3rem;
    }

    .mf-ud-item span {
        display: none;
    }
}

/* ---------------------------------------------------------
   3) MF TOAST FEED (RIGHT SIDE)
   --------------------------------------------------------- */

.mf-toast-feed {
    position: fixed;
    right: 1.1rem;
    bottom: 5.5rem;
    z-index: 60;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-width: 280px;
    pointer-events: none;
}

.mf-toast {
    pointer-events: auto;
    border-radius: 0.9rem;
    padding: 0.65rem 0.8rem;
    background: radial-gradient(circle at 0 0, rgba(15,23,42,0.98), rgba(15,23,42,0.92));
    border: 1px solid rgba(71,85,105,0.95);
    box-shadow: 0 0 0 1px rgba(15,23,42,0.95), 0 18px 55px rgba(0,0,0,0.94), 0 0 18px rgba(34,197,94,0.6);
    color: #E5E7EB;
    font-size: 0.78rem;
    opacity: 0;
    transform: translateX(14px);
    transition: opacity 0.22s ease-out, transform 0.22s ease-out;
}

    .mf-toast.is-visible {
        opacity: 1;
        transform: translateX(0);
    }

.mf-toast-title {
    display: block;
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #BBF7D0;
    margin-bottom: 0.15rem;
}

.mf-toast-text {
    font-size: 0.78rem;
    color: #E5E7EB;
}

/* hide on very small screens */
@media (max-width: 640px) {
    .mf-toast-feed {
        right: 0.5rem;
        bottom: 5rem;
        max-width: 80vw;
    }
}

/* ---------------------------------------------------------
   4) MF BOTTOM DRAWER
   --------------------------------------------------------- */

.mf-bottom-drawer {
    position: fixed;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    z-index: 55;
    width: min(680px, 100vw);
    pointer-events: none;
}

.mf-drawer-toggle {
    position: absolute;
    top: -2.1rem;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 999px 999px 0 0;
    border: 1px solid rgba(71,85,105,0.95);
    background: radial-gradient(circle at 0 0, rgba(15,23,42,0.98), rgba(15,23,42,0.94));
    color: #E5E7EB;
    font-size: 0.78rem;
    padding: 0.35rem 0.9rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 0 0 1px rgba(15,23,42,0.95), 0 -10px 35px rgba(0,0,0,0.9);
    pointer-events: auto;
}

.mf-drawer-content {
    pointer-events: auto;
    border-radius: 1.1rem 1.1rem 0 0;
    padding: 0.9rem 1.1rem 1.1rem;
    background: radial-gradient(circle at 0 0, rgba(15,23,42,0.98), rgba(15,23,42,0.94));
    border-top: 1px solid rgba(71,85,105,0.95);
    box-shadow: 0 -2px 0 rgba(15,23,42,0.95), 0 -24px 80px rgba(0,0,0,0.98);
    color: #E5E7EB;
    font-size: 0.86rem;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.24s ease-out, padding-top 0.24s ease-out, padding-bottom 0.24s ease-out;
}

    .mf-drawer-content h3 {
        font-size: 0.9rem;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        margin-bottom: 0.3rem;
    }

    .mf-drawer-content p {
        font-size: 0.84rem;
        color: #9CA3AF;
        margin-bottom: 0.4rem;
    }

    .mf-drawer-content ul {
        margin: 0;
        padding-left: 1rem;
        font-size: 0.82rem;
        color: #D1D5DB;
    }

.mf-bottom-drawer.is-open .mf-drawer-content {
    max-height: 260px;
    padding-top: 0.9rem;
    padding-bottom: 1.1rem;
}

/* ---------------------------------------------------------
   5) MF FAB CLUSTER
   --------------------------------------------------------- */

.mf-fab {
    position: fixed;
    right: 1.2rem;
    bottom: 1.4rem;
    z-index: 65;
}

.mf-fab-main {
    width: 2.7rem;
    height: 2.7rem;
    border-radius: 999px;
    border: 1px solid rgba(15,23,42,0.98);
    background: radial-gradient(circle at 30% 0, var(--mf-blue), var(--mf-orange));
    color: #020617;
    font-size: 1.4rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 0 0 1px rgba(15,23,42,1), 0 20px 60px rgba(0,0,0,0.98), 0 0 22px rgba(59,130,246,0.9);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

    .mf-fab-main:hover {
        transform: translateY(-2px);
        box-shadow: 0 0 0 1px rgba(15,23,42,1), 0 26px 80px rgba(0,0,0,0.98), 0 0 28px rgba(59,130,246,1);
    }

.mf-fab-menu {
    position: absolute;
    bottom: 3.1rem;
    right: 0.3rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity 0.2s ease-out, transform 0.2s ease-out;
}

.mf-fab-item {
    border-radius: 999px;
    border: 1px solid rgba(71,85,105,0.95);
    padding: 0.28rem 0.7rem;
    background: radial-gradient(circle at 0 0, rgba(15,23,42,0.98), rgba(15,23,42,0.94));
    color: #E5E7EB;
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 0 0 1px rgba(15,23,42,0.95), 0 16px 50px rgba(0,0,0,0.95);
}

/* open state */

.mf-fab.is-open .mf-fab-menu {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
/* =========================================================
   1) MF STEPPER HORIZONTAL
   ========================================================= */

#mf-stepper .mf-stepper {
    display: flex;
    justify-content: center;
}

#mf-stepper .mf-stepper-inner {
    position: relative;
    display: flex;
    gap: 1.6rem;
    padding: 1.2rem 1.4rem;
    border-radius: 999px;
    background: radial-gradient(circle at 0 0, rgba(15,23,42,0.98), rgba(15,23,42,0.94));
    border: 1px solid rgba(71,85,105,0.9);
    box-shadow: 0 0 0 1px rgba(15,23,42,0.95), 0 24px 70px rgba(0,0,0,0.98);
}

    /* connecting line */

    #mf-stepper .mf-stepper-inner::before {
        content: "";
        position: absolute;
        left: 1.8rem;
        right: 1.8rem;
        top: 50%;
        height: 2px;
        transform: translateY(-50%);
        background: linear-gradient( to right, rgba(148,163,184,0.2), rgba(148,163,184,0.7), rgba(148,163,184,0.2) );
        pointer-events: none;
    }

#mf-stepper .mf-step {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    min-width: 68px;
    cursor: default;
}

#mf-stepper .mf-step-bullet {
    width: 0.9rem;
    height: 0.9rem;
    border-radius: 999px;
    border: 2px solid rgba(148,163,184,0.9);
    background: #020617;
    box-shadow: 0 0 12px rgba(148,163,184,0.55);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

#mf-stepper .mf-step-label {
    font-size: 0.74rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #9CA3AF;
    white-space: nowrap;
}

/* active step */

#mf-stepper .mf-step.is-active .mf-step-bullet {
    transform: scale(1.2);
    border-color: var(--mf-blue);
    box-shadow: 0 0 18px rgba(28,141,255,0.9);
}

#mf-stepper .mf-step.is-active .mf-step-label {
    color: #E5E7EB;
}

/* hover hint */

#mf-stepper .mf-step:hover .mf-step-bullet {
    border-color: var(--mf-orange);
}

/* responsive */

@media (max-width: 768px) {
    #mf-stepper .mf-stepper-inner {
        flex-wrap: wrap;
        justify-content: center;
        border-radius: 1.2rem;
    }

        #mf-stepper .mf-stepper-inner::before {
            display: none;
        }
}

/* =========================================================
   2) LOGO GRID
   ========================================================= */

#mf-logos .mf-logos {
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
}

#mf-logos .mf-logo-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 1rem;
    align-items: center;
}

#mf-logos .mf-logo-item {
    position: relative;
    border-radius: 0.9rem;
    padding: 0.75rem;
    background: radial-gradient(circle at 0 0, rgba(15,23,42,0.98), rgba(15,23,42,0.9));
    border: 1px solid rgba(55,65,81,0.95);
    box-shadow: 0 0 0 1px rgba(15,23,42,1), 0 18px 55px rgba(0,0,0,0.96);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

    #mf-logos .mf-logo-item img {
        max-width: 100%;
        height: auto;
        opacity: 0.78;
        filter: grayscale(0.3) contrast(1.1);
        transform: scale(1.02);
        transition: opacity 0.2s ease, transform 0.2s ease, filter 0.2s ease;
    }

    /* subtle scanline glow on hover */

    #mf-logos .mf-logo-item::before {
        content: "";
        position: absolute;
        inset: -40%;
        background: linear-gradient( 120deg, transparent 0%, rgba(255,255,255,0.18) 45%, rgba(255,255,255,0.03) 60%, transparent 100% );
        transform: translateX(-120%);
        opacity: 0;
        pointer-events: none;
    }

    #mf-logos .mf-logo-item:hover img {
        opacity: 1;
        filter: grayscale(0) contrast(1.15);
        transform: scale(1.05);
    }

    #mf-logos .mf-logo-item:hover::before {
        opacity: 1;
        animation: mf-logo-scan 0.7s ease-out;
    }

@keyframes mf-logo-scan {
    0% {
        transform: translateX(-130%);
    }

    100% {
        transform: translateX(130%);
    }
}

/* responsive */

@media (max-width: 1024px) {
    #mf-logos .mf-logo-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    #mf-logos .mf-logo-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* =========================================================
   3) COMPARISON TABLE
   ========================================================= */

#mf-compare .mf-compare {
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
}

#mf-compare .mf-compare-table {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

#mf-compare .mf-compare-column {
    border-radius: 1.1rem;
    padding: 0.9rem 1rem;
    background: radial-gradient(circle at 0 0, rgba(15,23,42,0.98), rgba(15,23,42,0.9));
    border: 1px solid rgba(55,65,81,0.95);
    box-shadow: 0 0 0 1px rgba(15,23,42,1), 0 22px 70px rgba(0,0,0,0.96);
    font-size: 0.86rem;
    color: #E5E7EB;
    position: relative;
}

#mf-compare .mf-compare-title {
    margin: 0 0 0.5rem;
    font-size: 0.9rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #E5E7EB;
}

#mf-compare .mf-compare-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

    #mf-compare .mf-compare-list li {
        position: relative;
        padding-left: 1.4rem;
        margin-top: 0.3rem;
        font-size: 0.84rem;
        color: #D1D5DB;
    }

        /* icons for ok/no */

        #mf-compare .mf-compare-list li::before {
            content: "";
            position: absolute;
            left: 0;
            top: 0.3rem;
            width: 0.7rem;
            height: 0.7rem;
            border-radius: 999px;
            border: 1px solid rgba(148,163,184,0.8);
        }

        #mf-compare .mf-compare-list li.ok::before {
            background: radial-gradient(circle at 30% 0, rgba(34,197,94,1), rgba(22,163,74,1));
            box-shadow: 0 0 14px rgba(34,197,94,0.9);
            border-color: rgba(34,197,94,0.95);
        }

        #mf-compare .mf-compare-list li.no::before {
            background: radial-gradient(circle at 30% 0, rgba(239,68,68,1), rgba(185,28,28,1));
            box-shadow: 0 0 12px rgba(239,68,68,0.8);
            border-color: rgba(239,68,68,0.95);
        }

/* highlighted column */

#mf-compare .mf-compare-column.is-highlighted {
    border-color: var(--mf-blue);
    box-shadow: 0 0 0 1px rgba(15,23,42,1), 0 26px 80px rgba(0,0,0,0.98), 0 0 26px rgba(28,141,255,0.75);
}

    #mf-compare .mf-compare-column.is-highlighted::after {
        content: "Recomendado";
        position: absolute;
        top: 0.7rem;
        right: 0.7rem;
        padding: 0.16rem 0.55rem;
        border-radius: 999px;
        font-size: 0.7rem;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        background: linear-gradient(90deg, var(--mf-blue), var(--mf-orange));
        color: #020617;
    }

/* responsive */

@media (max-width: 900px) {
    #mf-compare .mf-compare-table {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* =========================================================
   4) ANIMATED STATS BARS
   ========================================================= */

#mf-stats .mf-stats {
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
}

#mf-stats .mf-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

#mf-stats .mf-stat-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

    #mf-stats .mf-stat-item label {
        font-size: 0.82rem;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: #E5E7EB;
    }

#mf-stats .mf-stat-bar {
    position: relative;
    width: 100%;
    height: 0.55rem;
    border-radius: 999px;
    background: radial-gradient(circle at 0 0, rgba(15,23,42,1), rgba(15,23,42,0.96));
    border: 1px solid rgba(55,65,81,0.9);
    overflow: hidden;
}

    #mf-stats .mf-stat-bar span {
        display: block;
        height: 100%;
        width: 0;
        border-radius: 999px;
        background: linear-gradient(90deg, var(--mf-blue), var(--mf-orange));
        box-shadow: 0 0 16px rgba(59,130,246,0.95);
        transition: width 0.6s ease-out;
    }

        /* class when animated */

        #mf-stats .mf-stat-bar span.is-filled {
            /* width is set via JS */
        }

/* responsive */

@media (max-width: 768px) {
    #mf-stats .mf-stats-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* =========================================================
   BEFORE / AFTER (Split Compare) – scoped to #before-after
   ========================================================= */

#before-after .mf-split {
    position: relative;
    height: clamp(260px, 42vw, 480px); /* IMPORTANT: gives real height */
    border-radius: 1.1rem;
    overflow: hidden;
    background: radial-gradient(circle at 0 0, rgba(15,23,42,0.98), rgba(15,23,42,0.92));
    border: 1px solid rgba(71,85,105,0.55);
    box-shadow: 0 0 0 1px rgba(15,23,42,1), 0 24px 70px rgba(0,0,0,0.75);
}

/* Both layers cover identically */
#before-after .mf-split-img {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transform: translateZ(0);
}

/* Top layer is cropped by width */
#before-after .mf-split-img-top {
    overflow: hidden;
}

/* Range sits on top but invisible (your JS reads it) */
#before-after .mf-split-range {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0; /* keep it invisible but usable */
    z-index: 6;
    cursor: ew-resize;
}

/* Handle */
#before-after .mf-split-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    transform: translateX(-50%);
    z-index: 7;
    display: grid;
    place-items: center;
    pointer-events: none; /* slider handles interaction */
}

#before-after .mf-split-line {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: rgba(28,141,255,0.75);
    box-shadow: 0 0 18px rgba(28,141,255,0.35);
}

#before-after .mf-split-knob {
    width: 18px;
    height: 18px;
    border-radius: 999px;
    background: rgba(12,12,14,0.9);
    border: 2px solid rgba(28,141,255,0.9);
    box-shadow: 0 0 0 6px rgba(28,141,255,0.14), 0 10px 28px rgba(0,0,0,0.45);
}

/* subtle frame */
#before-after .mf-split::before {
    content: "";
    position: absolute;
    inset: 0.7rem;
    border-radius: 0.95rem;
    border: 2px solid rgba(249,250,251,0.20);
    box-shadow: 0 0 18px rgba(249,250,251,0.08);
    pointer-events: none;
    z-index: 5;
}

/* =========================================================
   1) ACHIEVEMENTS GRID
   ========================================================= */

#mf-achievements .mf-achievements {
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
}

#mf-achievements .mf-achievements-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

#mf-achievements .mf-achievement {
    border-radius: 1.1rem;
    padding: 0.9rem 1rem;
    background: radial-gradient(circle at 0 0, rgba(15,23,42,0.98), rgba(15,23,42,0.9));
    border: 1px solid rgba(71,85,105,0.95);
    box-shadow: 0 0 0 1px rgba(15,23,42,1), 0 22px 70px rgba(0,0,0,0.96);
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    align-items: flex-start;
    color: #E5E7EB;
    font-size: 0.84rem;
}

#mf-achievements .mf-ach-icon {
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 30% 0, var(--mf-blue), var(--mf-violet));
    box-shadow: 0 0 16px rgba(28,141,255,0.8);
    font-size: 1.2rem;
}

#mf-achievements .mf-achievement h3 {
    margin: 0.1rem 0 0;
    font-size: 0.9rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

#mf-achievements .mf-achievement p {
    margin: 0;
    color: #9CA3AF;
}

/* subtle hover */

#mf-achievements .mf-achievement:hover {
    box-shadow: 0 0 0 1px rgba(15,23,42,1), 0 26px 80px rgba(0,0,0,0.98), 0 0 20px rgba(160,60,255,0.7);
    transform: translateY(-1px);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

@media (max-width: 1024px) {
    #mf-achievements .mf-achievements-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    #mf-achievements .mf-achievements-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* =========================================================
   2) VERTICAL TABS
   ========================================================= */

#mf-vtabs .mf-vtabs {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
}

#mf-vtabs .mf-vtabs-layout {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.8fr);
    gap: 1.2rem;
}

/* nav */

#mf-vtabs .mf-vtabs-nav {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    border-radius: 1.1rem;
    padding: 0.7rem 0.6rem;
    background: radial-gradient(circle at 0 0, rgba(15,23,42,0.98), rgba(15,23,42,0.9));
    border: 1px solid rgba(55,65,81,0.95);
    box-shadow: 0 0 0 1px rgba(15,23,42,1), 0 22px 70px rgba(0,0,0,0.96);
}

    #mf-vtabs .mf-vtabs-nav button {
        width: 100%;
        text-align: left;
        border-radius: 0.8rem;
        border: 1px solid transparent;
        background: transparent;
        padding: 0.45rem 0.6rem;
        font-size: 0.82rem;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: #9CA3AF;
        cursor: pointer;
        transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease, transform 0.18s ease;
    }

        #mf-vtabs .mf-vtabs-nav button:hover {
            color: #E5E7EB;
            background: rgba(15,23,42,0.85);
        }

        #mf-vtabs .mf-vtabs-nav button.is-active {
            color: #F9FAFB;
            border-color: rgba(59,130,246,0.98);
            background: radial-gradient(circle at 0 0, rgba(15,23,42,1), rgba(15,23,42,0.96));
            box-shadow: 0 0 18px rgba(59,130,246,0.8);
            transform: translateX(2px);
        }

/* content */

#mf-vtabs .mf-vtabs-content {
    border-radius: 1.1rem;
    padding: 1rem 1.1rem;
    background: radial-gradient(circle at 0 0, rgba(15,23,42,0.98), rgba(15,23,42,0.9));
    border: 1px solid rgba(71,85,105,0.95);
    box-shadow: 0 0 0 1px rgba(15,23,42,1), 0 22px 80px rgba(0,0,0,0.98);
    color: #E5E7EB;
    font-size: 0.88rem;
}

#mf-vtabs .mf-vtab {
    display: none;
}

    #mf-vtabs .mf-vtab.is-active {
        display: block;
    }

    #mf-vtabs .mf-vtab h3 {
        margin: 0 0 0.4rem;
        font-size: 0.96rem;
        letter-spacing: 0.14em;
        text-transform: uppercase;
    }

    #mf-vtabs .mf-vtab p {
        margin: 0;
        color: #9CA3AF;
    }

/* responsive */

@media (max-width: 900px) {
    #mf-vtabs .mf-vtabs-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    #mf-vtabs .mf-vtabs-nav {
        flex-direction: row;
        overflow-x: auto;
        padding: 0.4rem;
    }

        #mf-vtabs .mf-vtabs-nav button {
            white-space: nowrap;
            flex: 0 0 auto;
        }
}

/* =========================================================
   3) COMMAND PALETTE (CMD-K)
   ========================================================= */

.mf-cmdk {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: none;
    align-items: center;
    justify-content: center;
}

    .mf-cmdk.is-open {
        display: flex;
    }

/* overlay */

.mf-cmdk-overlay {
    position: absolute;
    inset: 0;
    background: rgba(15,23,42,0.85);
    backdrop-filter: blur(6px);
}

/* panel */

.mf-cmdk-panel {
    position: relative;
    z-index: 1;
    width: min(540px, 95vw);
    border-radius: 1.1rem;
    padding: 0.75rem 0.8rem 0.8rem;
    background: radial-gradient(circle at 0 0, rgba(15,23,42,0.99), rgba(15,23,42,0.96));
    border: 1px solid rgba(71,85,105,0.95);
    box-shadow: 0 0 0 1px rgba(15,23,42,1), 0 30px 95px rgba(0,0,0,0.99), 0 0 30px rgba(28,141,255,0.7);
}

/* input */

.mf-cmdk-input {
    width: 100%;
    border-radius: 0.7rem;
    border: 1px solid rgba(55,65,81,0.95);
    background: rgba(15,23,42,0.98);
    color: #E5E7EB;
    padding: 0.45rem 0.7rem;
    font-size: 0.86rem;
    outline: none;
    margin-bottom: 0.5rem;
}

    .mf-cmdk-input::placeholder {
        color: #6B7280;
    }

/* list */

.mf-cmdk-list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    max-height: 260px;
    overflow-y: auto;
}

    .mf-cmdk-list button {
        width: 100%;
        text-align: left;
        border-radius: 0.6rem;
        border: none;
        background: transparent;
        padding: 0.38rem 0.55rem;
        font-size: 0.84rem;
        color: #E5E7EB;
        cursor: pointer;
        transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
    }

        .mf-cmdk-list button:hover,
        .mf-cmdk-list button.is-active {
            background: rgba(31,41,55,0.95);
            color: #F9FAFB;
            transform: translateY(-1px);
        }

/* =========================================================
   4) ROADMAP HORIZONTAL
   ========================================================= */

#mf-roadmap .mf-roadmap {
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
}

#mf-roadmap .mf-roadmap-track {
    position: relative;
    display: flex;
    gap: 1.4rem;
    padding: 1.1rem 0.6rem 0.3rem;
    overflow-x: auto;
    scrollbar-width: thin;
}

    /* base line */

    #mf-roadmap .mf-roadmap-track::before {
        content: "";
        position: absolute;
        left: 0.6rem;
        right: 0.6rem;
        top: 1.1rem;
        height: 2px;
        background: linear-gradient( to right, rgba(148,163,184,0.2), rgba(248,250,252,0.8), rgba(148,163,184,0.2) );
        pointer-events: none;
    }

/* item */

#mf-roadmap .mf-roadmap-item {
    position: relative;
    flex: 0 0 220px;
    padding-top: 1.8rem;
    font-size: 0.84rem;
    color: #E5E7EB;
}

#mf-roadmap .mf-roadmap-point {
    position: absolute;
    top: 0.7rem;
    left: 0.4rem;
    width: 0.9rem;
    height: 0.9rem;
    border-radius: 999px;
    border: 2px solid rgba(251,191,36,0.9);
    background: radial-gradient(circle at 30% 0, rgba(251,191,36,1), rgba(249,115,22,1));
    box-shadow: 0 0 16px rgba(249,115,22,0.9);
}

/* card */

#mf-roadmap .mf-roadmap-item h3 {
    margin: 0 0 0.2rem 0;
    font-size: 0.9rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

#mf-roadmap .mf-roadmap-item p {
    margin: 0;
    color: #9CA3AF;
}

#mf-roadmap .mf-roadmap-item::before {
    content: "";
    position: absolute;
    left: 0.8rem;
    top: 1.1rem;
    width: 1px;
    height: calc(100% - 1.3rem);
    background: linear-gradient( to bottom, rgba(148,163,184,0.3), rgba(15,23,42,0.0) );
}

#mf-roadmap .mf-roadmap-item {
    padding-left: 1.6rem;
}

/* =========================================================
   5) BEFORE / AFTER PRO SPLITTER
   ========================================================= */

#mf-beforeafter-pro .mf-beforeafter-pro {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

#mf-beforeafter-pro .mf-ba-wrapper {
    position: relative;
    border-radius: 1.2rem;
    overflow: hidden;
    max-width: 900px;
    margin-inline: auto;
    box-shadow: 0 0 0 1px rgba(15,23,42,1), 0 28px 90px rgba(0,0,0,0.98);
}

    /* images */

    #mf-beforeafter-pro .mf-ba-wrapper img {
        display: block;
        width: 100%;
        height: auto;
        object-fit: cover;
    }

#mf-beforeafter-pro .mf-ba-before {
    position: relative;
    display: block;
}

#mf-beforeafter-pro .mf-ba-after {
    position: absolute;
    inset: 0;
    width: 50%;
    height: 100%;
    object-fit: cover;
    clip-path: inset(0 50% 0 0); /* initial half */
}

/* handle */

#mf-beforeafter-pro .mf-ba-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    background: linear-gradient( to bottom, rgba(248,250,252,1), rgba(96,165,250,1), rgba(248,250,252,1) );
    cursor: ew-resize;
}

    /* handle knob */

    #mf-beforeafter-pro .mf-ba-handle::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 2.1rem;
        height: 2.1rem;
        border-radius: 999px;
        transform: translate(-50%, -50%);
        background: radial-gradient(circle at 30% 0, var(--mf-blue), var(--mf-violet));
        border: 2px solid rgba(15,23,42,1);
        box-shadow: 0 0 0 1px rgba(15,23,42,1), 0 0 20px rgba(59,130,246,0.9);
    }

/* optional overlay hint */

#mf-beforeafter-pro .mf-ba-wrapper::after {
    content: "Antes        |        Depois";
    position: absolute;
    bottom: 0.7rem;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(243,244,246,0.9);
    text-shadow: 0 1px 3px rgba(0,0,0,0.9);
}
/* =========================================================
   1) 3D TILT CARDS
   ========================================================= */

#mf-tilt-cards .mf-tilt-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.4rem;
    justify-items: center;
}

#mf-tilt-cards .mf-tilt-card {
    perspective: 1200px; /* required for 3D effect */
}

#mf-tilt-cards .mf-tilt-inner {
    position: relative;
    width: 100%;
    max-width: 260px;
    aspect-ratio: 3 / 4;
    border-radius: 1.1rem;
    overflow: hidden;
    transform-style: preserve-3d;
    transition: transform 0.18s ease-out, box-shadow 0.18s ease-out;
    background: radial-gradient(circle at 0 0, rgba(15,23,42,0.99), rgba(15,23,42,0.94));
    border: 1px solid rgba(15,23,42,1);
    box-shadow: 0 0 0 1px rgba(15,23,42,1), 0 26px 80px rgba(0,0,0,0.98), 0 0 22px rgba(28,141,255,0.7);
    cursor: pointer;
}

    #mf-tilt-cards .mf-tilt-inner::before {
        /* holo accent */
        content: "";
        position: absolute;
        inset: 0;
        background: conic-gradient( from 120deg, rgba(28,141,255,0.55), rgba(160,60,255,0.55), rgba(255,91,0,0.55), rgba(28,141,255,0.55) );
        mix-blend-mode: screen;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.25s ease-out;
    }

    #mf-tilt-cards .mf-tilt-inner img {
        position: absolute;
        inset: 0.6rem 0.6rem 1.6rem 0.6rem;
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 0.9rem;
        transform: translateZ(30px);
        filter: saturate(1.05) contrast(1.05);
    }

    #mf-tilt-cards .mf-tilt-inner h3 {
        position: absolute;
        left: 0.9rem;
        bottom: 0.65rem;
        margin: 0;
        padding: 0.35rem 0.7rem;
        border-radius: 0.8rem;
        background: radial-gradient(circle at 0 0, rgba(15,23,42,0.98), rgba(15,23,42,0.94));
        border: 1px solid rgba(148,163,184,0.9);
        box-shadow: 0 0 16px rgba(15,23,42,1);
        font-size: 0.88rem;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: #E5E7EB;
    }

    /* hover accent */

    #mf-tilt-cards .mf-tilt-inner.is-active {
        box-shadow: 0 0 0 1px rgba(15,23,42,1), 0 32px 90px rgba(0,0,0,0.99), 0 0 28px rgba(28,141,255,0.9);
    }

        #mf-tilt-cards .mf-tilt-inner.is-active::before {
            opacity: 0.4;
        }

@media (max-width: 900px) {
    #mf-tilt-cards .mf-tilt-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    #mf-tilt-cards .mf-tilt-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* =========================================================
   2) INFINITE CATEGORIES WHEEL
   ========================================================= */

#mf-wheel .mf-wheel {
    position: relative;
    width: 260px;
    height: 260px;
    margin: 0 auto;
    border-radius: 999px;
    border: 1px solid rgba(55,65,81,0.95);
    background: radial-gradient(circle at 0 0, rgba(15,23,42,0.98), rgba(15,23,42,1));
    box-shadow: 0 0 0 1px rgba(15,23,42,1), 0 26px 90px rgba(0,0,0,0.98);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: mf-wheel-spin 26s linear infinite;
    transform-origin: center center;
}

#mf-wheel .mf-wheel-item {
    position: absolute;
    width: 90px;
    height: 32px;
    border-radius: 999px;
    background: radial-gradient(circle at 30% 0, var(--mf-blue), var(--mf-violet));
    border: 1px solid rgba(15,23,42,1);
    box-shadow: 0 0 14px rgba(28,141,255,0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.74rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #020617;
    cursor: pointer;
    transform-origin: center center;
}

    /* wheel positions: use nth-child to place items around circle */

    #mf-wheel .mf-wheel-item:nth-child(1) {
        transform: rotate(0deg) translate(100px) rotate(0deg);
    }

    #mf-wheel .mf-wheel-item:nth-child(2) {
        transform: rotate(60deg) translate(100px) rotate(-60deg);
    }

    #mf-wheel .mf-wheel-item:nth-child(3) {
        transform: rotate(120deg) translate(100px) rotate(-120deg);
    }

    #mf-wheel .mf-wheel-item:nth-child(4) {
        transform: rotate(180deg) translate(100px) rotate(-180deg);
    }

    #mf-wheel .mf-wheel-item:nth-child(5) {
        transform: rotate(240deg) translate(100px) rotate(-240deg);
    }

    #mf-wheel .mf-wheel-item:nth-child(6) {
        transform: rotate(300deg) translate(100px) rotate(-300deg);
    }

/* spin base */

@keyframes mf-wheel-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* fast mode when hovered */

#mf-wheel .mf-wheel.is-boosted {
    animation-duration: 10s;
}

/* =========================================================
   3) FORGE MAP (SERVICE NODES)
   ========================================================= */

#mf-forge-map .mf-forge-map {
    position: relative;
    min-height: 320px;
    border-radius: 1.4rem;
    padding: 1.4rem 1.2rem;
    background: radial-gradient(circle at 0 0, rgba(15,23,42,0.99), rgba(15,23,42,0.94));
    border: 1px solid rgba(55,65,81,0.95);
    box-shadow: 0 0 0 1px rgba(15,23,42,1), 0 28px 90px rgba(0,0,0,0.98);
    overflow: hidden;
}

    /* fake network background */

    #mf-forge-map .mf-forge-map::before {
        content: "";
        position: absolute;
        inset: -20%;
        background: radial-gradient(circle at 20% 20%, rgba(28,141,255,0.32), transparent 60%), radial-gradient(circle at 80% 80%, rgba(160,60,255,0.32), transparent 60%), radial-gradient(circle at 40% 70%, rgba(255,91,0,0.28), transparent 55%);
        opacity: 0.12;
        pointer-events: none;
    }

/* nodes */

#mf-forge-map .mf-map-node {
    position: absolute;
    transform: translate(-50%, -50%);
    min-width: 90px;
    text-align: center;
    padding: 0.25rem 0.4rem;
    border-radius: 999px;
    border: 1px solid rgba(148,163,184,0.95);
    background: radial-gradient(circle at 30% 0, rgba(15,23,42,0.98), rgba(15,23,42,0.96));
    color: #E5E7EB;
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 0 16px rgba(15,23,42,0.95);
    z-index: 2;
}

    /* node glow / pulse */

    #mf-forge-map .mf-map-node::before {
        content: "";
        position: absolute;
        inset: -8px;
        border-radius: inherit;
        background: radial-gradient(circle at 50% 50%, rgba(28,141,255,0.6), transparent 60%);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.25s ease-out;
    }

    #mf-forge-map .mf-map-node:hover::before,
    #mf-forge-map .mf-map-node.is-active::before {
        opacity: 1;
    }

/* info panel */

#mf-forge-map .mf-map-panel {
    position: absolute;
    right: 1rem;
    top: 1rem;
    width: min(260px, 40%);
    padding: 0.9rem 1rem;
    border-radius: 1rem;
    background: radial-gradient(circle at 0 0, rgba(15,23,42,0.98), rgba(15,23,42,0.94));
    border: 1px solid rgba(71,85,105,0.95);
    box-shadow: 0 0 0 1px rgba(15,23,42,1), 0 22px 80px rgba(0,0,0,0.98);
    color: #E5E7EB;
    font-size: 0.86rem;
    z-index: 3;
}

#mf-forge-map .mf-map-title {
    margin: 0 0 0.3rem;
    font-size: 0.9rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

#mf-forge-map .mf-map-desc {
    margin: 0;
    color: #9CA3AF;
}

/* mobile layout: panel on bottom */

@media (max-width: 768px) {
    #mf-forge-map .mf-map-panel {
        position: static;
        width: 100%;
        margin-top: 9rem;
    }
}

/* =========================================================
   4) DRAG & SNAP SELECTOR
   ========================================================= */

#mf-drag-snap .mf-drag-snap {
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
}

/* track where item is dragged */

#mf-drag-snap .mf-drag-track {
    position: relative;
    height: 260px;
    border-radius: 1.2rem;
    background: radial-gradient(circle at 0 0, rgba(15,23,42,0.99), rgba(15,23,42,0.94));
    border: 1px solid rgba(71,85,105,0.95);
    box-shadow: 0 0 0 1px rgba(15,23,42,1), 0 26px 80px rgba(0,0,0,0.98);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* draggable item */

#mf-drag-snap .mf-drag-item {
    position: absolute;
    width: 180px;
    height: 220px;
    border-radius: 1rem;
    object-fit: cover;
    box-shadow: 0 0 0 1px rgba(15,23,42,1), 0 22px 70px rgba(0,0,0,0.98);
    cursor: grab;
}

/* slots row */

#mf-drag-snap .mf-drag-slots {
    display: flex;
    gap: 0.7rem;
    justify-content: center;
    flex-wrap: wrap;
}

#mf-drag-snap .mf-drag-slot {
    min-width: 110px;
    border-radius: 999px;
    padding: 0.35rem 0.8rem;
    border: 1px dashed rgba(148,163,184,0.8);
    background: rgba(15,23,42,0.95);
    color: #9CA3AF;
    font-size: 0.78rem;
    text-align: center;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    position: relative;
}

    /* when slot is active */

    #mf-drag-snap .mf-drag-slot.is-active {
        border-style: solid;
        border-color: var(--mf-blue);
        color: #F9FAFB;
        box-shadow: 0 0 18px rgba(28,141,255,0.8);
    }

/* =========================================================
   5) LIGHT ORB CURSOR
   ========================================================= */

.mf-orb-cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    pointer-events: none;
    z-index: 100;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle at 30% 0, rgba(28,141,255,0.95), rgba(160,60,255,0.95));
    box-shadow: 0 0 24px rgba(28,141,255,0.9), 0 0 50px rgba(160,60,255,0.8);
    mix-blend-mode: screen;
    opacity: 0;
    transition: opacity 0.25s ease-out, transform 0.1s ease-out, width 0.2s ease-out, height 0.2s ease-out;
}

    /* when active on page */

    .mf-orb-cursor.is-visible {
        opacity: 0.9;
    }

/* hotspot styles (elements that affect orb) */

[data-mf-orb="primary"],
.mf-orb-hotspot {
    position: relative;
    z-index: 1;
}

    [data-mf-orb="primary"]:hover,
    .mf-orb-hotspot:hover {
        /* subtle hint that orb responds */
        filter: drop-shadow(0 0 12px rgba(28,141,255,0.7));
    }
/* =========================================================
   1) HOLOGRAPHIC STEPPER
   ========================================================= */

#mf-holo-stepper {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    padding: 1.1rem 1.4rem;
    border-radius: 999px;
    background: radial-gradient(circle at 0 0, rgba(15,23,42,0.98), rgba(15,23,42,0.94));
    border: 1px solid rgba(55,65,81,0.95);
    box-shadow: 0 0 0 1px rgba(15,23,42,1), 0 26px 80px rgba(0,0,0,0.98);
    position: relative;
}

    #mf-holo-stepper .mf-holo-step {
        position: relative;
        text-align: center;
        min-width: 90px;
        cursor: pointer;
    }

        #mf-holo-stepper .mf-holo-step .num {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 1.8rem;
            height: 1.8rem;
            border-radius: 999px;
            border: 2px solid rgba(148,163,184,0.9);
            color: #E5E7EB;
            font-size: 0.8rem;
            box-shadow: 0 0 14px rgba(148,163,184,0.7);
            background: radial-gradient(circle at 30% 0, rgba(15,23,42,0.98), rgba(15,23,42,1));
        }

        #mf-holo-stepper .mf-holo-step .label {
            display: block;
            margin-top: 0.35rem;
            font-size: 0.78rem;
            letter-spacing: 0.16em;
            text-transform: uppercase;
            color: #9CA3AF;
        }

    /* connecting line */

    #mf-holo-stepper::before {
        content: "";
        position: absolute;
        left: 2.8rem;
        right: 2.8rem;
        top: 50%;
        height: 2px;
        transform: translateY(-50%);
        background: linear-gradient(to right, rgba(148,163,184,0.1), rgba(148,163,184,0.7), rgba(148,163,184,0.1));
        pointer-events: none;
    }

    /* active */

    #mf-holo-stepper .mf-holo-step.is-active .num {
        border-color: var(--mf-blue);
        box-shadow: 0 0 18px rgba(28,141,255,0.9);
        color: #F9FAFB;
    }

    #mf-holo-stepper .mf-holo-step.is-active .label {
        color: #E5E7EB;
    }

/* =========================================================
   2) NEON FILTER CHIPS
   ========================================================= */

#mf-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

    #mf-filter-chips .mf-chip {
        border-radius: 999px;
        border: 1px solid rgba(55,65,81,0.95);
        background: rgba(15,23,42,0.96);
        color: #9CA3AF;
        padding: 0.25rem 0.9rem;
        font-size: 0.8rem;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        cursor: pointer;
        transition: background 0.2s ease, box-shadow 0.2s ease, color 0.2s ease, transform 0.1s ease;
    }

        #mf-filter-chips .mf-chip:hover {
            color: #E5E7EB;
            background: rgba(15,23,42,1);
        }

        #mf-filter-chips .mf-chip.is-active {
            color: #020617;
            background: linear-gradient(90deg, var(--mf-blue), var(--mf-orange));
            box-shadow: 0 0 16px rgba(28,141,255,0.85), 0 0 24px rgba(255,91,0,0.7);
            border-color: rgba(15,23,42,1);
            transform: translateY(-1px);
        }

/* =========================================================
   3) MORPHING TABS
   ========================================================= */

#mf-morph-tabs {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

    #mf-morph-tabs .mf-morph-nav {
        position: relative;
        display: inline-flex;
        padding: 0.35rem;
        border-radius: 999px;
        background: radial-gradient(circle at 0 0, rgba(15,23,42,0.98), rgba(15,23,42,0.94));
        border: 1px solid rgba(55,65,81,0.95);
    }

        #mf-morph-tabs .mf-morph-nav button {
            position: relative;
            border-radius: 999px;
            border: none;
            background: transparent;
            padding: 0.3rem 0.9rem;
            font-size: 0.78rem;
            letter-spacing: 0.16em;
            text-transform: uppercase;
            color: #9CA3AF;
            cursor: pointer;
            z-index: 1;
            transition: color 0.18s ease;
        }

            #mf-morph-tabs .mf-morph-nav button.is-active {
                color: #020617;
            }

    /* morphing pill */

    #mf-morph-tabs .mf-morph-highlight {
        position: absolute;
        top: 0.2rem;
        bottom: 0.2rem;
        border-radius: 999px;
        background: linear-gradient(120deg, var(--mf-blue), var(--mf-violet));
        box-shadow: 0 0 18px rgba(28,141,255,0.9);
        z-index: 0;
        transition: transform 0.25s ease, width 0.25s ease;
    }

    #mf-morph-tabs .mf-morph-panel {
        display: none;
        border-radius: 1.1rem;
        padding: 0.9rem 1.1rem;
        background: radial-gradient(circle at 0 0, rgba(15,23,42,0.98), rgba(15,23,42,0.94));
        border: 1px solid rgba(71,85,105,0.95);
        box-shadow: 0 0 0 1px rgba(15,23,42,1), 0 22px 80px rgba(0,0,0,0.98);
        color: #E5E7EB;
        font-size: 0.88rem;
    }

        #mf-morph-tabs .mf-morph-panel.is-active {
            display: block;
        }

/* =========================================================
   4) FORGE BADGE CARDS
   ========================================================= */

#mf-badge-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}

    #mf-badge-cards .mf-badge-card {
        border-radius: 1rem;
        padding: 0.8rem 0.9rem;
        background: radial-gradient(circle at 0 0, rgba(15,23,42,0.98), rgba(15,23,42,0.9));
        border: 1px solid rgba(55,65,81,0.95);
        box-shadow: 0 0 0 1px rgba(15,23,42,1), 0 20px 70px rgba(0,0,0,0.96);
        color: #E5E7EB;
        font-size: 0.84rem;
        opacity: 0;
        transform: translateY(10px);
        transition: opacity 0.35s ease-out, transform 0.35s ease-out;
    }

        #mf-badge-cards .mf-badge-card.is-visible {
            opacity: 1;
            transform: translateY(0);
        }

        #mf-badge-cards .mf-badge-card h3 {
            margin: 0 0 0.4rem;
            font-size: 0.95rem;
            letter-spacing: 0.14em;
            text-transform: uppercase;
        }

    #mf-badge-cards .mf-badge-stats {
        display: flex;
        flex-direction: column;
        gap: 0.2rem;
        color: #9CA3AF;
    }

/* =========================================================
   5) ANIMATED LIST REVEAL
   ========================================================= */

#mf-reveal-list ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#mf-reveal-list li {
    position: relative;
    margin-bottom: 0.35rem;
    padding-left: 1.4rem;
    font-size: 0.86rem;
    color: #E5E7EB;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.35s ease-out, transform 0.35s ease-out;
}

    #mf-reveal-list li::before {
        content: "◆";
        position: absolute;
        left: 0;
        top: 0.08rem;
        font-size: 0.7rem;
        color: var(--mf-blue);
    }

/* when list is active */

#mf-reveal-list.is-visible li {
    opacity: 1;
    transform: translateY(0);
}

    #mf-reveal-list.is-visible li:nth-child(2) {
        transition-delay: 0.05s;
    }

    #mf-reveal-list.is-visible li:nth-child(3) {
        transition-delay: 0.1s;
    }

    #mf-reveal-list.is-visible li:nth-child(4) {
        transition-delay: 0.15s;
    }

/* =========================================================
   6) FORGE STATS RINGS
   ========================================================= */

#mf-stats-rings {
    display: flex;
    flex-wrap: wrap;
    gap: 1.4rem;
}

    #mf-stats-rings .mf-ring {
        position: relative;
        width: 110px;
        height: 110px;
        border-radius: 999px;
        background: radial-gradient(circle at 50% 50%, rgba(15,23,42,1), rgba(15,23,42,1));
        display: flex;
        align-items: center;
        justify-content: center;
        color: #E5E7EB;
        font-size: 0.8rem;
    }

        /* base circle */

        #mf-stats-rings .mf-ring::before {
            content: "";
            position: absolute;
            inset: 8px;
            border-radius: inherit;
            background: conic-gradient(from -90deg, rgba(28,141,255,0.0) 0deg, rgba(28,141,255,0.0) 360deg);
            mask: radial-gradient(farthest-side, transparent 60%, #000 62%);
        }

        /* background track */

        #mf-stats-rings .mf-ring::after {
            content: "";
            position: absolute;
            inset: 8px;
            border-radius: inherit;
            border: 1px solid rgba(55,65,81,0.95);
            box-shadow: 0 0 16px rgba(15,23,42,1);
        }

        /* label */

        #mf-stats-rings .mf-ring span {
            position: relative;
            text-align: center;
            letter-spacing: 0.12em;
            text-transform: uppercase;
        }

        /* active ring value: using CSS custom property --mf-ring-value (0-100) */

        #mf-stats-rings .mf-ring.is-animated::before {
            background: conic-gradient(from -90deg, var(--mf-blue) calc(var(--mf-ring-value) * 1deg * 3.6), rgba(28,141,255,0.1) calc(var(--mf-ring-value) * 1deg * 3.6));
        }

/* =========================================================
   7) MAGNETIC GRID
   ========================================================= */

#mf-magnetic-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}

    #mf-magnetic-grid .mg-item {
        position: relative;
        overflow: hidden;
        border-radius: 1.1rem;
        background: #020617;
        box-shadow: 0 0 0 1px rgba(15,23,42,1), 0 22px 80px rgba(0,0,0,0.98);
    }

        #mf-magnetic-grid .mg-item img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
            transform: translate3d(0,0,0);
            transition: transform 0.12s ease-out;
        }

/* =========================================================
   8) TIMELINE SCROLL SYNC
   ========================================================= */

#mf-sync-timeline {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: 1.4rem;
    align-items: flex-start;
}

    #mf-sync-timeline .mf-sync-track {
        position: relative;
        overflow-x: auto;
        padding: 1rem 0.3rem 0.9rem;
        display: flex;
        align-items: center;
        gap: 2.4rem;
        border-radius: 1rem;
        background: radial-gradient(circle at 0 0, rgba(15,23,42,0.98), rgba(15,23,42,0.94));
        border: 1px solid rgba(55,65,81,0.95);
        box-shadow: 0 0 0 1px rgba(15,23,42,1), 0 22px 80px rgba(0,0,0,0.96);
    }

        #mf-sync-timeline .mf-sync-track::before {
            content: "";
            position: absolute;
            left: 1.2rem;
            right: 1.2rem;
            top: 50%;
            height: 2px;
            transform: translateY(-50%);
            background: linear-gradient(to right, rgba(148,163,184,0.2), rgba(248,250,252,0.85), rgba(148,163,184,0.2));
            pointer-events: none;
        }

    #mf-sync-timeline .mf-sync-point {
        position: relative;
        width: 0.9rem;
        height: 0.9rem;
        border-radius: 999px;
        border: 2px solid rgba(148,163,184,0.9);
        background: #020617;
        box-shadow: 0 0 12px rgba(148,163,184,0.7);
        flex: 0 0 auto;
        cursor: pointer;
    }

        /* active point */

        #mf-sync-timeline .mf-sync-point.is-active {
            border-color: var(--mf-blue);
            box-shadow: 0 0 18px rgba(28,141,255,0.9);
        }

    /* content */

    #mf-sync-timeline .mf-sync-content {
        border-radius: 1rem;
        padding: 0.8rem 1rem;
        background: radial-gradient(circle at 0 0, rgba(15,23,42,0.98), rgba(15,23,42,0.94));
        border: 1px solid rgba(71,85,105,0.95);
        box-shadow: 0 0 0 1px rgba(15,23,42,1), 0 22px 80px rgba(0,0,0,0.98);
        font-size: 0.88rem;
        color: #E5E7EB;
    }

        #mf-sync-timeline .mf-sync-content .step {
            display: none;
        }

            #mf-sync-timeline .mf-sync-content .step.is-active {
                display: block;
            }

/* responsive */

@media (max-width: 900px) {
    #mf-sync-timeline {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* =========================================================
   9) HOVER DEPTH STACK
   ========================================================= */

#mf-depth-stack {
    position: relative;
    height: 260px;
    border-radius: 1.4rem;
    overflow: hidden;
    background: radial-gradient(circle at 0 0, rgba(15,23,42,0.98), rgba(15,23,42,0.94));
    box-shadow: 0 0 0 1px rgba(15,23,42,1), 0 28px 90px rgba(0,0,0,0.98);
}

    #mf-depth-stack .layer {
        position: absolute;
        inset: 0;
        background-size: cover;
        background-position: center;
        transform: translate3d(0,0,0);
        transition: transform 0.15s ease-out;
    }

        /* you can override these with real images in your CSS */

        #mf-depth-stack .layer.back {
            background-image: url("https://picsum.photos/800/500?random=111");
            filter: blur(2px);
        }

        #mf-depth-stack .layer.mid {
            background-image: url("https://picsum.photos/800/500?random=112");
            mix-blend-mode: screen;
            opacity: 0.8;
        }

        #mf-depth-stack .layer.front {
            background-image: url("https://picsum.photos/800/500?random=113");
        }

/* =========================================================
   10) ACTION CUE BUTTON
   ========================================================= */

#mf-action-cue {
    display: flex;
    justify-content: center;
}

    #mf-action-cue .mf-cue-btn {
        position: relative;
        border-radius: 999px;
        border: 1px solid rgba(15,23,42,1);
        background: linear-gradient(90deg, var(--mf-orange), var(--mf-blue));
        color: #020617;
        padding: 0.6rem 1.6rem;
        font-size: 0.9rem;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        font-weight: 700;
        cursor: pointer;
        box-shadow: 0 0 0 1px rgba(15,23,42,1), 0 0 24px rgba(255,91,0,0.8), 0 0 32px rgba(28,141,255,0.8);
        overflow: hidden;
    }

        /* pulse halo */

        #mf-action-cue .mf-cue-btn .pulse {
            position: absolute;
            inset: -40%;
            border-radius: inherit;
            background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.2), transparent 65%);
            opacity: 0;
            pointer-events: none;
        }

        /* subtle idle pulse */

        #mf-action-cue .mf-cue-btn::after {
            content: "";
            position: absolute;
            inset: -20%;
            border-radius: inherit;
            background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.1), transparent 70%);
            opacity: 0;
            animation: mf-cue-pulse 2.6s infinite;
        }

@keyframes mf-cue-pulse {
    0% {
        opacity: 0;
        transform: scale(0.9);
    }

    40% {
        opacity: 1;
        transform: scale(1);
    }

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

/* =========================================
   1) Raffle Passaporte
   ========================================= */

.mf-raffle-block {
    position: relative;
    z-index: 1;
}

.mf-raffle-passport-card {
    margin-top: 1.8rem;
    border-radius: 1.1rem;
    padding: 1.7rem 1.9rem;
    background: radial-gradient(circle at 0 0, rgba(60,80,110,0.25), rgba(5,6,12,0.94));
    border: 1px solid rgba(129,140,248,0.4);
    box-shadow: 0 24px 70px rgba(0,0,0,0.95);
}

.mf-raffle-passport-header {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
    margin-bottom: 1.3rem;
}

.mf-raffle-label {
    font-size: 0.75rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #9ca3af;
}

.mf-raffle-prize {
    font-size: 1.1rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #f9fafb;
}

.mf-raffle-badge {
    padding: 0.3rem 0.9rem;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--mf-orange, #ff5b00), #f97316);
    color: #111827;
    font-size: 0.75rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    box-shadow: 0 0 16px rgba(248,113,22,0.9);
}

.mf-raffle-passport-body {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1.4fr);
    gap: 1.4rem;
    align-items: center;
}

@media (max-width: 900px) {
    .mf-raffle-passport-body {
        grid-template-columns: minmax(0, 1fr);
    }
}

.mf-raffle-user {
    display: flex;
    gap: 0.8rem;
    align-items: center;
}

.mf-raffle-avatar {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--mf-blue, #1C8DFF), var(--mf-violet, #A03CFF));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
    color: #020617;
    box-shadow: 0 0 14px rgba(59,130,246,0.8);
}

.mf-raffle-user-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: #e5e7eb;
}

.mf-raffle-user-meta {
    font-size: 0.78rem;
    color: #9ca3af;
}

.mf-raffle-stats {
    display: flex;
    gap: 0.8rem;
    justify-content: flex-end;
}

.mf-raffle-stat {
    flex: 0 0 auto;
    min-width: 6rem;
    padding: 0.5rem 0.7rem;
    border-radius: 0.7rem;
    background: rgba(15,23,42,0.94);
    border: 1px solid rgba(75,85,99,0.95);
    text-align: left;
}

    .mf-raffle-stat .label {
        display: block;
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 0.13em;
        color: #9ca3af;
        margin-bottom: 0.15rem;
    }

    .mf-raffle-stat .value {
        display: block;
        font-size: 0.92rem;
        font-weight: 600;
        color: #f9fafb;
    }

.mf-raffle-progress-wrap {
    margin-top: 1.2rem;
}

.mf-raffle-progress-bar {
    width: 100%;
    height: 0.65rem;
    border-radius: 999px;
    background: radial-gradient(circle at 0 0, rgba(15,23,42,0.98), rgba(3,7,18,0.95));
    overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(55,65,81,0.85);
}

.mf-raffle-progress-fill {
    height: 100%;
    width: 0%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--mf-blue, #1C8DFF), var(--mf-violet, #A03CFF));
    box-shadow: 0 0 18px rgba(59,130,246,0.9);
    transition: width 0.25s ease-out;
}

.mf-raffle-progress-label {
    margin-top: 0.35rem;
    font-size: 0.78rem;
    color: #9ca3af;
}

.mf-raffle-passport-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    align-items: center;
    margin-top: 1.4rem;
}

.mf-raffle-message {
    font-size: 0.8rem;
    color: #e5e7eb;
    opacity: 0.9;
}

/* =========================================
   2) Reactor / Community goal
   ========================================= */

.mf-reactor-block {
    position: relative;
    z-index: 1;
}

.mf-reactor-inner {
    margin-top: 1.8rem;
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr);
    gap: 1.6rem;
    align-items: center;
}

@media (max-width: 900px) {
    .mf-reactor-inner {
        grid-template-columns: minmax(0, 1fr);
    }
}

.mf-reactor-core {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.7rem;
}

.mf-reactor-orb {
    width: 170px;
    height: 170px;
    border-radius: 999px;
    background: radial-gradient(circle at 30% 0, var(--mf-blue, #1C8DFF), #0f172a);
    border: 4px solid rgba(15,23,42,0.96);
    box-shadow: 0 0 25px rgba(59,130,246,0.9), 0 0 70px rgba(59,130,246,0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    font-weight: 700;
    color: #f9fafb;
    text-shadow: 0 0 14px rgba(15,23,42,0.9);
}

.mf-reactor-core-label {
    font-size: 0.85rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #9ca3af;
}

.mf-reactor-progress {
    border-radius: 1rem;
    padding: 1.3rem 1.5rem;
    background: radial-gradient(circle at 0 0, rgba(60,80,120,0.28), rgba(5,6,12,0.96));
    border: 1px solid rgba(148,163,184,0.5);
    box-shadow: 0 22px 60px rgba(0,0,0,0.95);
}

.mf-reactor-bar {
    width: 100%;
    height: 0.65rem;
    border-radius: 999px;
    background: rgba(15,23,42,0.95);
    overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(55,65,81,0.9);
}

.mf-reactor-fill {
    height: 100%;
    width: 32%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--mf-blue,#1C8DFF), var(--mf-orange,#ff5b00));
    box-shadow: 0 0 20px rgba(59,130,246,0.9);
    transition: width 0.25s ease-out;
}

.mf-reactor-ticks {
    margin-top: 0.35rem;
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: #9ca3af;
}

.mf-reactor-actions {
    margin-top: 1rem;
    display: flex;
    gap: 0.7rem;
    flex-wrap: wrap;
}

.mf-reactor-log {
    margin-top: 0.7rem;
    font-size: 0.78rem;
    color: #e5e7eb;
    opacity: 0.85;
}

/* =========================================
   3) Gacha / Capsula
   ========================================= */

.mf-gacha-block {
    position: relative;
    z-index: 1;
}

.mf-gacha-layout {
    margin-top: 1.8rem;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.7fr);
    gap: 1.6rem;
    align-items: stretch;
}

@media (max-width: 900px) {
    .mf-gacha-layout {
        grid-template-columns: minmax(0, 1fr);
    }
}

.mf-gacha-machine {
    border-radius: 1rem;
    padding: 1.5rem 1.3rem;
    background: radial-gradient(circle at 0 0, rgba(255,91,0,0.25), rgba(5,6,12,0.96));
    border: 1px solid rgba(248,113,22,0.5);
    box-shadow: 0 24px 70px rgba(0,0,0,0.96);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.mf-gacha-orb {
    width: 160px;
    height: 160px;
    border-radius: 999px;
    background: radial-gradient(circle at 30% 0, #f97316, #7c2d12);
    border: 4px solid rgba(15,23,42,1);
    box-shadow: 0 0 25px rgba(248,113,22,0.95), 0 0 70px rgba(248,113,22,0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

    .mf-gacha-orb::after {
        content: "";
        position: absolute;
        inset: 15%;
        border-radius: inherit;
        background: radial-gradient(circle at 20% 0, rgba(255,255,255,0.4), transparent 55%);
        mix-blend-mode: screen;
    }

.mf-gacha-orb-icon {
    font-size: 2.3rem;
    position: relative;
    z-index: 1;
}

.mf-gacha-note {
    font-size: 0.75rem;
    color: #9ca3af;
    text-align: center;
}

.mf-gacha-result {
    border-radius: 1rem;
    padding: 1.4rem 1.5rem;
    background: radial-gradient(circle at 100% 0, rgba(88,28,135,0.3), rgba(5,6,12,0.97));
    border: 1px solid rgba(129,140,248,0.5);
    box-shadow: 0 24px 70px rgba(0,0,0,0.95);
    display: flex;
    align-items: center;
    justify-content: center;
}

.mf-gacha-placeholder {
    font-size: 0.85rem;
    color: #9ca3af;
}

/* gacha prize card */
.mf-gacha-prize-card {
    width: 100%;
    max-width: 420px;
    border-radius: 1rem;
    padding: 1.1rem 1.2rem;
    position: relative;
    overflow: hidden;
    background: radial-gradient(circle at 0 0, rgba(15,23,42,0.98), rgba(15,23,42,0.96));
    border: 1px solid rgba(148,163,184,0.7);
    box-shadow: 0 22px 60px rgba(0,0,0,0.95);
}

.mf-gacha-prize-rarity {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: #9ca3af;
    margin-bottom: 0.25rem;
}

.mf-gacha-prize-name {
    font-size: 1.02rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #f9fafb;
    margin-bottom: 0.4rem;
}

.mf-gacha-prize-desc {
    font-size: 0.82rem;
    color: #e5e7eb;
    margin-bottom: 0.8rem;
}

.mf-gacha-prize-tag {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border: 1px solid rgba(148,163,184,0.75);
    color: #e5e7eb;
}

/* rarity colors */
.mf-gacha-prize-card[data-rarity="rare"] {
    border-color: rgba(56,189,248,0.9);
    box-shadow: 0 0 24px rgba(56,189,248,0.8);
}

.mf-gacha-prize-card[data-rarity="epic"] {
    border-color: rgba(129,140,248,0.95);
    box-shadow: 0 0 28px rgba(129,140,248,0.9);
}

.mf-gacha-prize-card[data-rarity="legendary"] {
    border-color: rgba(251,191,36,0.95);
    box-shadow: 0 0 32px rgba(251,191,36,0.95);
}

/* spin animation */
.mf-gacha-orb--spinning {
    animation: mf-gacha-spin 0.7s linear infinite;
}

@keyframes mf-gacha-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}
/* =========================================================
   HERO Passport Teaser (curiosity card)
   - Keeps 3D tilt container
   - Shows runes neon + skeleton glitch
   - Adds orange neon base
========================================================= */
/* =========================================================
   HERO – Reduce height of main 3D cards
========================================================= */

#hero .mf-hero-visual .mf-3dcard {
    max-height: 520px; /* antes era demasiado */
    aspect-ratio: 3 / 4; /* mantiene proporción elegante */
}

.mf-3dcard--passport-teaser {
    position: relative;
    overflow: hidden;
}

    /* Apaga cualquier bg-image que tu mf-3dcard use */
    .mf-3dcard--passport-teaser .mf-3dcard-bg-image {
        opacity: 0 !important;
        background-image: none !important;
    }

    /* Teaser layout */
    .mf-3dcard--passport-teaser .mf-passport-teaser {
        position: relative;
        height: 100%;
        padding: 20px 18px 56px; /* deja espacio para el neon base + botón */
        border-radius: 18px;
        background: radial-gradient(120% 100% at 50% 0%, rgba(28,141,255,0.12), rgba(12,12,14,0.92));
        border: 1px solid rgba(255,255,255,0.08);
        transform-style: preserve-3d;
    }

/* Top line */
.mf-passport-teaser-top {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    opacity: 0.9;
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.mf-passport-teaser-series {
    opacity: 0.75;
}

/* Runes neon */
.mf-passport-teaser-runes {
    margin: 18px 0 14px;
    display: flex;
    justify-content: center;
    gap: 16px;
    font-size: 18px;
    letter-spacing: 0.2em;
    transform: translateZ(18px);
}

    .mf-passport-teaser-runes .rune {
        color: rgba(255, 91, 0, 0.95);
        text-shadow: 0 0 10px rgba(255, 91, 0, 0.55), 0 0 22px rgba(255, 91, 0, 0.35), 0 0 40px rgba(255, 91, 0, 0.22);
        filter: drop-shadow(0 6px 14px rgba(255,91,0,0.22));
    }

/* Plate (distorted preview area) */
.mf-passport-teaser-plate {
    position: relative;
    border-radius: 14px;
    height: 230px;
    border: 1px solid rgba(255,255,255,0.08);
    background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
    overflow: hidden;
    transform: translateZ(14px);
}

/* Glitch overlay */
.mf-passport-teaser-glitch {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    gap: 12px;
}

    .mf-passport-teaser-glitch::before,
    .mf-passport-teaser-glitch::after {
        content: "";
        position: absolute;
        inset: -20%;
        background: repeating-linear-gradient( 135deg, rgba(255,91,0,0.0) 0px, rgba(255,91,0,0.0) 10px, rgba(255,91,0,0.10) 12px, rgba(255,91,0,0.0) 18px );
        opacity: 0.55;
        mix-blend-mode: screen;
        animation: mf-glitch-scan 4.5s linear infinite;
    }

    .mf-passport-teaser-glitch::after {
        opacity: 0.35;
        animation-duration: 6.2s;
        filter: blur(0.6px);
    }

@keyframes mf-glitch-scan {
    0% {
        transform: translateY(-8%) skewX(8deg);
    }

    50% {
        transform: translateY(8%) skewX(-6deg);
    }

    100% {
        transform: translateY(-8%) skewX(8deg);
    }
}

/* Skeleton blocks */
.mf-skel {
    border-radius: 10px;
    background: linear-gradient(90deg, rgba(255,255,255,0.06), rgba(255,255,255,0.14), rgba(255,255,255,0.06) );
    background-size: 220% 100%;
    animation: mf-skel 1.6s ease-in-out infinite;
    opacity: 0.9;
}

@keyframes mf-skel {
    0% {
        background-position: 0% 0%;
    }

    100% {
        background-position: 220% 0%;
    }
}

.skel-big {
    width: 68%;
    height: 54px;
}

.skel-mid {
    width: 52%;
    height: 18px;
}

.mf-passport-teaser-meta {
    margin-top: 14px;
    display: grid;
    gap: 10px;
    transform: translateZ(10px);
}

.skel-row {
    width: 100%;
    height: 14px;
    border-radius: 8px;
    opacity: 0.65;
}

.mf-passport-teaser-name {
    margin-top: 16px;
    display: flex;
    justify-content: center;
    transform: translateZ(12px);
}

.skel-name {
    width: 46%;
    height: 18px;
    border-radius: 10px;
    opacity: 0.55;
}

/* Orange neon base */
.mf-passport-teaser-neon-base {
    position: absolute;
    left: 8%;
    right: 8%;
    bottom: 12px;
    height: 10px;
    border-radius: 999px;
    background: rgba(255,91,0,0.75);
    filter: blur(10px);
    opacity: 0.85;
    transform: translateZ(22px);
}

/* Ensure button overlays nicely */
.mf-3dcard--passport-teaser .mf-3dcard-btn-layer {
    position: absolute;
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%);
    z-index: 5;
}
#hero .mf-hero-visual .mf-3dcard {
    max-height: 450px;
}
#hero .mf-passport-teaser-plate {
    height: 180px; /* antes 230px */
}
#hero .mf-passport-teaser {
    padding-top: 16px;
    padding-bottom: 44px; /* deja espacio para el botón */
}
#hero .mf-hero-inner {
    align-items: center;
}
/* =========================================================
   HERO – Passport teaser hover (soft orange neon)
========================================================= */

#hero .mf-3dcard--passport-teaser:hover::after {
    background: radial-gradient( 120% 80% at 50% 100%, var(--mf-neon-orange-soft), transparent 70% );
    opacity: 0.85;
}

/* Si además hay glow por box-shadow */
#hero .mf-3dcard--passport-teaser:hover {
    box-shadow: 0 20px 60px rgba(0,0,0,0.45), 0 0 28px var(--mf-neon-orange-glow);
}
#hero .mf-3dcard--passport-teaser{
  --mf-3dcard-glow-color: rgba(255, 91, 0, 0.35);
}

#hero .mf-3dcard--passport-teaser:hover{
  --mf-3dcard-glow-color: rgba(255, 91, 0, 0.55);
}
/* =========================================================
   Process steps – equal height panels
========================================================= */

.mf-ps-panel-shell {
    display: grid;
}

.mf-ps-panel {
    min-height: 260px; /* ajusta si ves mucho aire */
    display: flex;
    flex-direction: column;
}

    .mf-ps-panel p {
        margin-bottom: auto; /* empuja la lista hacia abajo */
    }
/* =========================================================
   Process steps – panel with visual preview
========================================================= */

.mf-ps-panel-content {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 32px;
    align-items: center;
}

.mf-ps-panel-visual {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
}

    .mf-ps-panel-visual img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        filter: saturate(0.95) contrast(1.05);
    }

/* Mobile: stack nicely */
@media (max-width: 900px) {
    .mf-ps-panel-content {
        grid-template-columns: 1fr;
    }

    .mf-ps-panel-visual {
        margin-top: 16px;
        height: 180px;
    }
}
/* =========================================================
   Process steps – image animation on step change (CSS only)
========================================================= */

.mf-ps-panel-content {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 32px;
    align-items: center;
}

.mf-ps-panel-visual {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    min-height: 220px;
}

    /* Base image style */
    .mf-ps-panel-visual img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        filter: saturate(0.95) contrast(1.05);
        /* animation base state */
        opacity: 0;
        transform: translateY(10px) scale(1.02);
        transition: opacity .35s ease, transform .45s ease;
        will-change: opacity, transform;
    }

/* When panel becomes active, image animates in */
.mf-ps-panel.is-active .mf-ps-panel-visual img {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Nice subtle overlay to keep it “tech” */
.mf-ps-panel-visual::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(120% 80% at 50% 0%, rgba(28,141,255,0.14), transparent 60%);
    opacity: 0.9;
}

/* Mobile stacking */
@media (max-width: 900px) {
    .mf-ps-panel-content {
        grid-template-columns: 1fr;
    }

    .mf-ps-panel-visual {
        min-height: 180px;
    }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .mf-ps-panel-visual img {
        transition: none;
        transform: none;
        opacity: 1;
    }
}
/* =========================================================
   Process steps – equal height + animated panel switch
   Comments in English per project preference
========================================================= */

.mf-ps-panel-shell {
    position: relative;
    min-height: 320px; /* keep stable height to avoid layout jump */
}

/* Panels are stacked, we fade/slide the active one */
.mf-ps-panel {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(10px);
    transition: opacity .28s ease, transform .28s ease, visibility 0s linear .28s;
}

    .mf-ps-panel.is-active {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
        transition: opacity .28s ease, transform .28s ease;
    }

/* Two-column layout inside panel */
.mf-ps-panel-content {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 32px;
    align-items: center;
    height: 100%;
}

/* Equalize internal block feel */
.mf-ps-panel-text {
    min-height: 240px; /* keeps the left side consistent */
    display: flex;
    flex-direction: column;
}

    .mf-ps-panel-text p {
        margin-bottom: 14px;
    }

    .mf-ps-panel-text ul {
        margin-top: auto; /* push list down for consistent rhythm */
    }

/* Visual preview box */
.mf-ps-panel-visual {
    height: 240px; /* equal height for all visuals */
    border-radius: 14px;
    overflow: hidden;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 18px 40px rgba(0,0,0,0.35);
}

    /* Image animates subtly on panel activation */
    .mf-ps-panel-visual img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transform: scale(1.03);
        filter: saturate(0.95) contrast(1.05);
        opacity: 0;
        transition: opacity .28s ease, transform .55s ease;
    }

.mf-ps-panel.is-active .mf-ps-panel-visual img {
    opacity: 1;
    transform: scale(1);
}

/* Mobile: stack */
@media (max-width: 900px) {
    .mf-ps-panel-shell {
        min-height: 520px;
    }

    .mf-ps-panel-content {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .mf-ps-panel-visual {
        height: 180px;
    }

    .mf-ps-panel-text {
        min-height: auto;
    }
}
.mf-ps-panel {
    display: block;
}
/* =========================================================
   MaxiForge – Before/After v2 (self-contained)
   Comments in English per preference
========================================================= */

.mf-ba2 {
    --mf-ba2-radius: 1.1rem;
    --mf-ba2-border: rgba(71,85,105,0.55);
    --mf-ba2-glow: rgba(28,141,255,0.28);
    --mf-ba2-line: rgba(28,141,255,0.75);
    --mf-ba2-knob-bg: rgba(12,12,14,0.92);
}

.mf-ba2-stage {
    position: relative;
    height: clamp(260px, 42vw, 520px);
    border-radius: var(--mf-ba2-radius);
    overflow: hidden;
    background: radial-gradient(circle at 0 0, rgba(15,23,42,0.98), rgba(15,23,42,0.92));
    border: 1px solid var(--mf-ba2-border);
    box-shadow: 0 0 0 1px rgba(15,23,42,1), 0 24px 70px rgba(0,0,0,0.75);
    user-select: none;
    touch-action: none; /* we handle touch drag */
}

    /* subtle inner frame */
    .mf-ba2-stage::before {
        content: "";
        position: absolute;
        inset: 0.7rem;
        border-radius: calc(var(--mf-ba2-radius) - 0.15rem);
        border: 2px solid rgba(249,250,251,0.18);
        box-shadow: 0 0 18px rgba(249,250,251,0.08);
        pointer-events: none;
        z-index: 4;
    }

.mf-ba2-layer {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transform: translateZ(0);
}

/* AFTER starts at 50% and is clipped */
.mf-ba2-after {
    width: 100%; /* keep full size */
    z-index: 2;
    clip-path: inset(0 50% 0 0);
    will-change: clip-path;
}


/* BEFORE sits behind */
.mf-ba2-before {
    z-index: 1;
}

/* Divider */
.mf-ba2-divider {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    display: grid;
    place-items: center;
    pointer-events: none;
}

.mf-ba2-line {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient( to bottom, rgba(28,141,255,0) 0%, rgba(28,141,255,0.25) 15%, rgba(28,141,255,1) 50%, rgba(28,141,255,0.25) 85%, rgba(28,141,255,0) 100% );
    box-shadow: 0 0 10px rgba(28,141,255,0.6), 0 0 22px rgba(28,141,255,0.45), 0 0 40px rgba(28,141,255,0.25), 0 0 70px rgba(28,141,255,0.15);
    filter: saturate(1.3);
    pointer-events: none;
}


.mf-ba2-knob {
    width: 18px;
    height: 18px;
    border-radius: 999px;
    background: radial-gradient( circle at 30% 30%, rgba(255,255,255,1), rgba(28,141,255,0.95) 40%, rgba(28,141,255,0.75) 65% );
    box-shadow: 0 0 0 4px rgba(28,141,255,0.25), 0 0 14px rgba(28,141,255,0.8), 0 0 32px rgba(28,141,255,0.55), 0 0 60px rgba(28,141,255,0.35), 0 12px 28px rgba(0,0,0,0.6);
    border: none;
    pointer-events: none;
}



/* Range control (invisible but accessible) */
.mf-ba2-range {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: ew-resize;
    z-index: 5;
}

.mf-ba2-hint {
    margin-top: 14px;
    opacity: 0.85;
}

/* Mobile */
@media (max-width: 900px) {
    .mf-ba2-stage {
        height: 320px;
    }
}
.mf-ba2-stage {
    position: relative;
}
.mf-ba2-before,
.mf-ba2-after {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

.mf-ba2-divider {
    transition: left 0.04s linear;
}
@keyframes mf-neon-pulse {
    0%,100% {
        opacity: 0.9;
    }

    50% {
        opacity: 1;
    }
}

.mf-ba2-line,
.mf-ba2-knob {
    animation: mf-neon-pulse 3.2s ease-in-out infinite;
}
/* =========================================================
   Services Spotlight – thumbs gallery
   ========================================================= */

#services-spotlight .mf-service-spot-hero img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transform: scale(1.02);
    filter: saturate(1.05) contrast(1.06);
    transition: opacity 180ms ease, transform 220ms ease;
}

    #services-spotlight .mf-service-spot-hero img.is-fading {
        opacity: 0.15;
        transform: scale(1.01);
    }

#services-spotlight .mf-service-spot-thumbs {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    margin-top: 12px;
}

    #services-spotlight .mf-service-spot-thumbs button {
        padding: 0;
        border-radius: 0.9rem;
        overflow: hidden;
        background: transparent;
        border: 1px solid rgba(148,163,184,0.22);
        cursor: pointer;
    }

    #services-spotlight .mf-service-spot-thumbs img {
        width: 100%;
        height: 74px;
        object-fit: cover;
        display: block;
        opacity: 0.86;
        transition: opacity 160ms ease, transform 160ms ease;
    }

    #services-spotlight .mf-service-spot-thumbs button.is-active {
        border-color: rgba(28,141,255,0.65);
        box-shadow: 0 0 0 3px rgba(28,141,255,0.18);
    }

        #services-spotlight .mf-service-spot-thumbs button.is-active img {
            opacity: 1;
            transform: scale(1.02);
        }

#services-spotlight .mf-spot-cta {
    margin-top: 12px;
}

/* Responsive thumbs: 3 columns on small */
@media (max-width: 700px) {
    #services-spotlight .mf-service-spot-thumbs {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
/* =========================================================
   FAQs (premium + spacing + hover + footer panel)
   ========================================================= */

#faqs .mf-section-header {
    margin-bottom: 1.4rem;
}

#faqs .mf-faq-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.6rem;
    margin-top: 1.6rem;
}

/* Columns (for divider) */
#faqs .mf-faq-col {
    position: relative;
}

/* Subtle divider between columns (desktop only) */
@media (min-width: 901px) {
    #faqs .mf-faq-col:first-child::after {
        content: "";
        position: absolute;
        top: 0.4rem;
        right: -0.8rem;
        bottom: 0.4rem;
        width: 1px;
        background: linear-gradient( to bottom, rgba(28,141,255,0), rgba(28,141,255,0.35), rgba(255,91,0,0.28), rgba(28,141,255,0) );
        filter: blur(0.2px);
        opacity: 0.9;
        pointer-events: none;
    }
}

/* Item shell */
#faqs .mf-faq-item {
    border-radius: 1.2rem;
    border: 1px solid rgba(71,85,105,0.45);
    background: radial-gradient(circle at 20% 10%, rgba(15,23,42,0.92), rgba(15,23,42,0.78));
    box-shadow: 0 0 0 1px rgba(15,23,42,1), 0 20px 70px rgba(0,0,0,0.55);
    overflow: hidden;
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

    #faqs .mf-faq-item:hover {
        transform: translateY(-2px);
        border-color: rgba(28,141,255,0.35);
        box-shadow: 0 0 0 1px rgba(15,23,42,1), 0 26px 80px rgba(0,0,0,0.62);
    }

/* Summary row */
#faqs .mf-faq-q {
    list-style: none;
    cursor: pointer;
    padding: 1.15rem 1.15rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(248,250,252,0.95);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

    /* Remove default marker */
    #faqs .mf-faq-q::-webkit-details-marker {
        display: none;
    }

/* Answer */
#faqs .mf-faq-a {
    padding: 0 1.15rem 1.15rem;
    color: rgba(226,232,240,0.9);
}

    #faqs .mf-faq-a p {
        margin: 0.2rem 0 0;
        line-height: 1.6;
    }

/* Plus icon bubble */
#faqs .mf-faq-icon {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: 1px solid rgba(148,163,184,0.25);
    background: rgba(15,23,42,0.35);
    position: relative;
    box-shadow: 0 10px 26px rgba(0,0,0,0.45);
    backdrop-filter: blur(10px);
    flex: 0 0 auto;
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

    #faqs .mf-faq-icon::before,
    #faqs .mf-faq-icon::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        width: 14px;
        height: 2px;
        background: rgba(248,250,252,0.9);
        transform: translate(-50%, -50%);
        border-radius: 2px;
    }

    #faqs .mf-faq-icon::after {
        width: 2px;
        height: 14px;
    }

/* Open state */
#faqs details[open] .mf-faq-icon {
    border-color: rgba(28,141,255,0.55);
    box-shadow: 0 0 0 4px rgba(28,141,255,0.14), 0 16px 36px rgba(0,0,0,0.55);
    transform: rotate(0deg);
}

    #faqs details[open] .mf-faq-icon::after {
        height: 0;
    }

/* Hover accent on icon too */
#faqs .mf-faq-item:hover .mf-faq-icon {
    border-color: rgba(28,141,255,0.45);
    box-shadow: 0 0 0 4px rgba(28,141,255,0.10), 0 16px 34px rgba(0,0,0,0.55);
}

/* Footer CTA bar */
#faqs .mf-faq-footer {
    margin-top: 1.8rem;
    padding: 1rem 1.1rem;
    border-radius: 1.2rem;
    border: 1px solid rgba(71,85,105,0.45);
    background: radial-gradient(circle at 20% 0%, rgba(15,23,42,0.92), rgba(15,23,42,0.72));
    box-shadow: 0 0 0 1px rgba(15,23,42,1), 0 18px 60px rgba(0,0,0,0.45);
    display: flex;
    align-items: center;
    gap: 0.8rem;
    flex-wrap: wrap;
    justify-content: space-between;
}

#faqs .mf-faq-note {
    margin: 0;
    color: rgba(226,232,240,0.85);
    max-width: 38rem;
}

/* If you wrap buttons in .mf-faq-actions */
#faqs .mf-faq-actions {
    display: flex;
    gap: 0.8rem;
    flex-wrap: wrap;
}

/* Mobile */
@media (max-width: 900px) {
    #faqs .mf-faq-grid {
        grid-template-columns: 1fr;
    }

    #faqs .mf-faq-footer {
        justify-content: flex-start;
    }

    /* Divider off on mobile */
    #faqs .mf-faq-col:first-child::after {
        display: none;
    }
}
/* =========================================================
   HERO – left card polish (badge + stats + better glow)
   ========================================================= */

.mf-hero-copy {
    position: relative;
}

/* tiny identity badge */
.mf-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .45rem .7rem;
    border-radius: 999px;
    border: 1px solid rgba(71,85,105,0.45);
    background: rgba(12,18,34,0.45);
    box-shadow: 0 0 0 1px rgba(15,23,42,1), 0 12px 30px rgba(0,0,0,0.35);
    backdrop-filter: blur(10px);
    margin-bottom: .85rem;
}

.mf-hero-badge-chip {
    font-weight: 800;
    letter-spacing: .12em;
    font-size: .72rem;
    color: rgba(248,250,252,0.92);
}

.mf-hero-badge-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: rgba(28,141,255,0.95);
    box-shadow: 0 0 0 4px rgba(28,141,255,0.16), 0 0 22px rgba(28,141,255,0.55);
}

.mf-hero-badge-text {
    font-size: .78rem;
    color: rgba(226,232,240,0.78);
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* stats row */
.mf-hero-stats {
    margin-top: 1.05rem;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .75rem;
}

.mf-hero-stat {
    padding: .75rem .85rem;
    border-radius: 1rem;
    border: 1px solid rgba(71,85,105,0.35);
    background: radial-gradient(circle at 20% 0%, rgba(15,23,42,0.86), rgba(15,23,42,0.62));
    box-shadow: 0 0 0 1px rgba(15,23,42,1), 0 18px 55px rgba(0,0,0,0.35);
}

.mf-hero-stat-k {
    display: block;
    font-size: .72rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(148,163,184,0.9);
    margin-bottom: .25rem;
}

.mf-hero-stat-v {
    display: block;
    font-weight: 700;
    color: rgba(248,250,252,0.92);
}



@media (max-width: 900px) {
    .mf-hero-stats {
        grid-template-columns: 1fr;
    }
}
/* =========================================================
   PROCESS · match Services Spotlight glass language
   ========================================================= */

#mf-process-steps .mf-process-glass {
    padding: 2rem 2rem 1.8rem;
    border-radius: 1.8rem;
    /* same "dark premium" base used across spotlight */
    background: radial-gradient(circle at 0 0, rgba(15,23,42,0.96), rgba(15,23,42,0.90) );
    border: 1px solid rgba(55,65,81,0.90);
    box-shadow: 0 0 0 1px rgba(2,6,23,0.85), 0 26px 90px rgba(0,0,0,0.70);
}

/* keep spacing consistent with the services section rhythm */
#mf-process-steps .mf-section-header {
    margin-bottom: 1.2rem;
}

/* rail tabs sit nicely inside the glass */
#mf-process-steps .mf-ps-steps {
    justify-content: center; /* similar to .mf-services-rail */
    gap: .5rem;
    margin-bottom: 1.2rem;
}

/* panel shell doesn't touch edges */
#mf-process-steps .mf-ps-panel-shell {
    margin-top: 0;
}

/* optional: subtle top sheen like hero in spotlight */
#mf-process-steps .mf-process-glass::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 1.8rem;
    pointer-events: none;
    background: radial-gradient(circle at 0 0, rgba(255,255,255,0.10), transparent 55%);
    mix-blend-mode: screen;
    opacity: .45;    
}

/* make wrapper positioning valid for ::after */
#mf-process-steps .mf-process-glass {
    position: relative;
}

/* responsive padding */
@media (max-width: 960px) {
    #mf-process-steps .mf-process-glass {
        padding: 1.4rem 1.2rem 1.2rem;
        border-radius: 1.4rem;
    }
}
/* =========================================================
   SERVICES SPOTLIGHT · centered header & rail (correct selectors)
   ========================================================= */

.mf-services-spotlight .mf-section-header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 1.35rem;
}

.mf-services-spotlight .mf-section-title {
    margin-bottom: .5rem;
}

.mf-services-spotlight .mf-section-subtitle {
    margin: 0 auto;
}

/* center the category rail you already have */
.mf-services-spotlight .mf-services-rail {
    justify-content: center;
    margin: 0 auto 1.6rem;
    max-width: 980px;
}


/* =========================================================
   BUNDLE · Force centered header (correct specificity)
   ========================================================= */

#mf-process-glass .mf-section-header {
    text-align: center;
    max-width: 780px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1.6rem;
}

#mf-process-glass .mf-section-subtitle {
    margin-bottom: .55rem;
    max-width: auto !important;
}

    #mf-page-section .mf-section-pattern-inner .mf-section-header .mf-section-subtitle {
        margin-left: auto;
        margin-right: auto;
    }
.mf-section-header{
    text-align: center !important;
}
/* =========================================================
   BEFORE/AFTER · Glass panel (same as bundle)
   ========================================================= */

#before-after .mf-section-pattern-inner {
    position: relative;
    max-width: 1500px;
    margin: 0 auto;
    padding: 2.4rem 2.8rem 2.6rem;
    border-radius: 32px;
    /* Glass base */
    background: linear-gradient( 135deg, rgba(15, 23, 42, 0.80), rgba(3, 7, 18, 0.88) );
    border: 1px solid rgba(148, 163, 184, 0.28);
    /* Deep shadow */
    box-shadow: 0 40px 90px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(15, 23, 42, 0.85);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    overflow: hidden;
}

/* optional: tighten header spacing inside this panel */
#before-after .mf-section-header {
    margin-bottom: 1.6rem;
}
/* =========================================================
   BEFORE/AFTER · Panel glass (bundle vibe)
   ========================================================= */

#before-after .mf-section-pattern-inner {
    position: relative;
    max-width: 1400px;
    margin: 0 auto;
    padding: 2.4rem 2.8rem 2.6rem;
    border-radius: 32px;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.80), rgba(3, 7, 18, 0.88));
    border: 1px solid rgba(148, 163, 184, 0.28);
    box-shadow: 0 40px 90px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(15, 23, 42, 0.85);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    overflow: hidden;
}

#before-after .mf-section-header {
    text-align: center;
    max-width: 860px;
    margin: 0 auto 1.6rem;
}

/* =========================================================
   BEFORE/AFTER · Grid + neon glass cards
   ========================================================= */

#before-after .mf-ba2-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.2rem;
    margin-top: 1.2rem;
}

#before-after .mf-ba2-card {
    position: relative;
    padding: .85rem .85rem .75rem; /* antes ~1.1rem */
    border-radius: 1.1rem;
    background: linear-gradient(135deg, rgba(15,23,42,0.72), rgba(3,7,18,0.86));
    border: 1px solid rgba(148,163,184,0.18);
    box-shadow: 0 18px 60px rgba(0,0,0,0.70), 0 0 0 1px rgba(15,23,42,0.60);
    overflow: hidden;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

    #before-after .mf-ba2-card::before {
        content: "";
        position: absolute;
        inset: -2px;
        border-radius: 1.4rem;
        background: radial-gradient(circle at 15% 15%, rgba(28,141,255,0.22), transparent 55%), radial-gradient(circle at 90% 85%, rgba(255,91,0,0.16), transparent 60%);
        opacity: .45; /* antes .70 */
        pointer-events: none;
    }

    #before-after .mf-ba2-card:hover {
        border-color: rgba(148,163,184,0.32);
        box-shadow: 0 22px 75px rgba(0,0,0,0.78), 0 0 0 1px rgba(15,23,42,0.70);
    }

#before-after .mf-ba2-card-head {
    position: relative;
    margin-bottom: .75rem;
}

#before-after .mf-ba2-card-title {
    font-size: .78rem; /* antes .92rem */
    letter-spacing: .18em;
    text-transform: uppercase;
    margin: 0 0 .25rem;
    color: #E5E7EB;
}

#before-after .mf-ba2-card-sub {
    margin: 0;
    color: rgba(229,231,235,0.72);
    font-size: .78rem; /* antes .92rem */
    letter-spacing: .18em;
}

/* keep your stage safe */
#before-after .mf-ba2-stage {
    border-radius: 1.1rem;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    max-height: 220px;
}

/* responsive */
@media (max-width: 980px) {
    #before-after .mf-section-pattern-inner {
        padding: 1.6rem 1.2rem 1.4rem;
        border-radius: 24px;
    }

    #before-after .mf-ba2-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

#before-after .mf-ba2-card {
    background: linear-gradient(135deg, rgba(15,23,42,.68), rgba(3,7,18,.82));
}

#before-after .mf-section-pattern-inner {
    max-width: 100%;
}
#before-after .mf-ba2-stage {
    aspect-ratio: 21 / 9;
    max-height: 240px;
}
/* =========================================================
   ABOUT · Simple “Who we are” (neon glass + video)
   ========================================================= */

#about .mf-about-glass {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    padding: 2.4rem 2.6rem 2.2rem;
    border-radius: 32px;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.80), rgba(3, 7, 18, 0.88));
    border: 1px solid rgba(148, 163, 184, 0.28);
    box-shadow: 0 40px 90px rgba(0, 0, 0, 0.92), 0 0 0 1px rgba(15, 23, 42, 0.85);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    overflow: hidden;
}

    #about .mf-about-glass::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: radial-gradient(circle at 0 0, rgba(255,255,255,0.10), transparent 55%);
        mix-blend-mode: screen;
        opacity: .45;
    }

#about .mf-section-header {
    text-align: center;
    max-width: 860px;
    margin: 0 auto 1.8rem;
}

#about .mf-about-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 1.6rem;
    align-items: center;
}

/* Media */
#about .mf-about-media {
    position: relative;
    border-radius: 1.4rem;
    overflow: hidden;
    background: #020617;
    border: 1px solid rgba(55,65,81,0.85);
    box-shadow: 0 18px 60px rgba(0,0,0,0.55);
    min-height: 320px;
}

#about .mf-about-video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transform: scale(1.03);
    filter: saturate(1.06) contrast(1.06);
}

#about .mf-about-media-overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 10% 10%, rgba(28,141,255,0.22), transparent 55%), radial-gradient(circle at 90% 90%, rgba(255,91,0,0.14), transparent 60%), linear-gradient(180deg, rgba(2,6,23,0.12), rgba(2,6,23,0.55));
    pointer-events: none;
}

/* Copy */
#about .mf-about-copy {
    display: flex;
    flex-direction: column;
    gap: .85rem;
}

#about .mf-about-title {
    margin: 0;
    font-size: 1.35rem;
    color: #E5E7EB;
    letter-spacing: .04em;
}

#about .mf-about-text {
    margin: 0;
    color: rgba(229,231,235,0.78);
    line-height: 1.6;
}

#about .mf-about-list {
    margin: .2rem 0 0;
    padding-left: 1.1rem;
    color: rgba(229,231,235,0.86);
}

    #about .mf-about-list li {
        margin: .35rem 0;
    }

    #about .mf-about-list strong {
        color: rgba(248,250,252,0.95);
    }

/* Actions */
#about .mf-about-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .7rem;
    margin-top: .35rem;
}

/* Responsive */
@media (max-width: 980px) {
    #about .mf-about-glass {
        padding: 1.6rem 1.2rem 1.4rem;
        border-radius: 24px;
    }

    #about .mf-about-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    #about .mf-about-media {
        min-height: 240px;
    }
}
/* =========================================================
   FAQS · Glass panel wrapper (bundle style)
   ========================================================= */
#faqs .mf-section-pattern-inner {
    position: relative;
    max-width: 1180px;
    margin: 0 auto;
    padding: 3rem 3.2rem 3.2rem;
    border-radius: 28px;
    /* GLASS MÁS TRANSPARENTE */
    background: linear-gradient( 135deg, rgba(15, 23, 42, 0.3), rgba(2, 6, 23, 0.4) );
    border: 1px solid rgba(148, 163, 184, 0.28);
    box-shadow: inset 0 0 0 1px rgba(15,23,42,0.55), 0 30px 70px rgba(0,0,0,0.75);
    -webkit-backdrop-filter: blur(20px) saturate(1.05);
}


#faqs .mf-section-header {
    text-align: center;
    max-width: 820px;
    margin: 0 auto 1.6rem;
}

@media (max-width: 900px) {
    #faqs .mf-section-pattern-inner {
        padding: 1.6rem 1.2rem 1.4rem;
        border-radius: 24px;
    }
}
/* =========================================================
   FAQ · SPACING & BREATHING FIX
   ========================================================= */

/* Header más aire */
#faqs .mf-section-header {
    margin-bottom: 2.6rem;
}

#faqs .mf-section-title {
    margin-bottom: 0.9rem;
}

#faqs .mf-section-subtitle {
    max-width: 680px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Grid de FAQs */
.mf-faq-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.6rem 2.2rem; /* vertical / horizontal */
}

/* Cada columna respira */
.mf-faq-col {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

/* Card FAQ */
.mf-faq-item {
    padding: 1.2rem 1.4rem;
    border-radius: 1.2rem;
    background: linear-gradient( 135deg, rgba(15, 23, 42, 0.85), rgba(2, 6, 23, 0.9) );
    border: 1px solid rgba(148, 163, 184, 0.22);
    transition: border-color .2s ease, box-shadow .2s ease;
}

    .mf-faq-item:hover {
        border-color: rgba(148, 163, 184, 0.45);
        box-shadow: 0 0 0 1px rgba(15,23,42,0.9), 0 0 24px rgba(56,189,248,0.15);
    }

/* Pregunta */
.mf-faq-q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.9rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* Respuesta */
.mf-faq-a {
    margin-top: 1rem;
    padding-top: 0.9rem;
    border-top: 1px solid rgba(148,163,184,0.15);
    line-height: 1.6;
    font-size: 0.9rem;
    color: #CBD5E1;
}

/* Footer FAQ */
.mf-faq-footer {
    margin-top: 3rem;
    padding-top: 2rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.2rem;
    border-top: 1px solid rgba(148,163,184,0.15);
}

/* Responsive */
@media (max-width: 900px) {
    .mf-faq-grid {
        grid-template-columns: 1fr;
        gap: 1.4rem;
    }
}
/* =========================================================
   Bundle view – Selector map (reuses mf-forge-map)
   ========================================================= */

#mf-niche .mf-bundle-map {
    position: relative;
    min-height: 520px;
    border-radius: 22px;
    padding: 1.2rem;
}

    /* A subtle "arena" background */
    #mf-niche .mf-bundle-map::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 22px;
        pointer-events: none;
        background: radial-gradient(800px 420px at 20% 30%, rgba(28,141,255,0.12), rgba(0,0,0,0) 60%), radial-gradient(700px 380px at 80% 65%, rgba(255,91,0,0.08), rgba(0,0,0,0) 62%), rgba(2,6,23,0.45);
        border: 1px solid rgba(148,163,184,0.18);
        box-shadow: inset 0 -10px 0 rgba(0,0,0,0.35), 0 30px 70px rgba(0,0,0,0.55);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
    }

    #mf-niche .mf-bundle-map > * {
        position: relative;
        z-index: 1;
    }

    /* Nodes */
    #mf-niche .mf-bundle-map .mf-map-node {
        position: absolute;
        transform: translate(-50%, -50%);
        padding: 0.55rem 0.8rem;
        border-radius: 999px;
        background: rgba(2,6,23,0.65);
        border: 2px solid rgba(148,163,184,0.22);
        color: rgba(255,255,255,0.92);
        font-weight: 650;
        font-size: 0.95rem;
        letter-spacing: 0.01em;
        cursor: pointer;
        box-shadow: 0 14px 34px rgba(0,0,0,0.55), inset 0 -4px 0 rgba(0,0,0,0.35);
        transition: transform 160ms ease, border-color 160ms ease, filter 160ms ease;
    }

        #mf-niche .mf-bundle-map .mf-map-node:hover {
            transform: translate(-50%, -52%);
        }

        #mf-niche .mf-bundle-map .mf-map-node.is-active {
            border-color: rgba(28,141,255,0.65);
            filter: drop-shadow(0 0 10px rgba(28,141,255,0.35));
        }

    /* Panel top-right (like your existing behavior) */
    #mf-niche .mf-bundle-map .mf-map-panel {
        position: absolute;
        right: 18px;
        top: 18px;
        width: min(420px, calc(100% - 36px));
        border-radius: 18px;
        background: rgba(2,6,23,0.70);
        border: 1px solid rgba(148,163,184,0.22);
        box-shadow: inset 0 -10px 0 rgba(0,0,0,0.40), 0 26px 60px rgba(0,0,0,0.60);
        overflow: hidden;
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
    }

#mf-niche .mf-map-panel-media {
    height: 160px;
    border-bottom: 1px solid rgba(148,163,184,0.16);
    background: rgba(12,12,14,0.45);
}

#mf-niche .mf-map-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: saturate(1.05) contrast(1.02);
}

#mf-niche .mf-map-panel-body {
    padding: 0.95rem 1rem 1rem;
}

#mf-niche .mf-bundle-map .mf-map-title {
    margin: 0 0 0.35rem;
    font-size: 1.1rem;
    line-height: 1.2;
}

#mf-niche .mf-bundle-map .mf-map-desc {
    margin: 0 0 0.85rem;
    opacity: 0.9;
    line-height: 1.35;
}

#mf-niche .mf-map-panel-actions {
    display: flex;
    gap: 0.7rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

#mf-niche .mf-map-note {
    margin: 0;
    opacity: 0.75;
    font-size: 0.92rem;
}

/* Responsive: panel becomes flow content */
@media (max-width: 920px) {
    #mf-niche .mf-bundle-map {
        min-height: auto;
        padding: 1rem;
    }

        #mf-niche .mf-bundle-map .mf-map-panel {
            position: relative;
            right: auto;
            top: auto;
            width: 100%;
            margin-top: 1rem;
        }

        #mf-niche .mf-bundle-map .mf-map-node {
            position: relative;
            transform: none;
            margin: 0.4rem 0.4rem 0 0;
            display: inline-flex;
        }
}