/* ======================================================
       TODO: TODO EL ESTILO VA SCOPEADO A #nexomk-landing
       PARA NO AFECTAR OTRAS PARTES DEL SITIO
       ====================================================== */

        #nexomk-landing {
            --primary-color: #0f172a;
            --secondary-color: #16213e;
            --accent-color: #0f3460;
            --highlight-color: rgb(233, 69, 96);
            --success-color: #00d4aa;
            --warning-color: #ff6b35;
            --light-accent: #533483;
            --text-light: #f5f5f5;
            --text-muted: #8892b0;
            --background-dark: #0a0e1a;
            --card-bg: rgba(255, 255, 255, 0.05);
            --gradient-primary: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
            --gradient-accent: linear-gradient(135deg, #533483 0%, #e94560 100%);
            --gradient-success: linear-gradient(135deg, #00d4aa 0%, #02a085 100%);
            --glass-bg: rgba(255, 255, 255, 0.08);
            --glass-border: rgba(255, 255, 255, 0.2);
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
            color: var(--text-light);
            background: var(--background-dark);
        }

        #nexomk-landing * {
            box-sizing: border-box;
        }

        #nexomk-landing body {
            margin: 0;
        }

        #nexomk-landing .page {
            overflow-x: hidden;
            padding-top: 70px;
        }

        html {
            scroll-behavior: smooth;
        }

        /* Offer banner global removido */
/* ---------- Glass ---------- */
        #nexomk-landing .glass-card {
            background: var(--glass-bg);
            backdrop-filter: blur(20px);
            border: 1px solid var(--glass-border);
            border-radius: 20px;
            transition: all .3s ease;
        }

        #nexomk-landing .glass-card:hover {
            background: rgba(255, 255, 255, 0.12);
            transform: translateY(-5px);
        }

        /* ---------- Navbar fija y no conflictiva ---------- */
        #nexomk-landing .navbar {
            background:var(--primary-color);
            backdrop-filter: blur(20px);
            border-bottom: 1px solid rgba(255, 255, 255, .1);
            padding: 1rem 0;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 1050;
            transition: all .3s ease;
        }

        /* Cuando hay banner activo empujamos la navbar hacia abajo */
        #nexomk-landing.with-offer .navbar {
            top: 50px;
        }

        #nexomk-landing .navbar.scrolled {
            background: rgba(26, 26, 46, .98);
            padding: .5rem 0;
        }

        #nexomk-landing .navbar-brand {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--text-light);
            text-decoration: none;
        }

        #nexomk-landing .navbar-nav .nav-link {
            color: var(--text-muted);
            font-weight: 500;
            transition: all .3s ease;
            margin: 0 .5rem;
            position: relative;
        }

        #nexomk-landing .navbar-nav .nav-link:hover {
            color: var(--text-light);
        }

        /* ---------- Hero ---------- */
        #nexomk-landing .hero-section {
            background: var(--gradient-primary);
            min-height: 90vh;
            display: flex;
            align-items: center;
            position: relative;
            overflow: hidden;
            padding-top: 40px;
        }

        #nexomk-landing .hero-section::before {
            content: '';
            position: absolute;
            inset: 0;
            background:
                radial-gradient(circle at 30% 20%, rgba(13, 27, 42, 0.6) 0%, transparent 70%),
    radial-gradient(circle at 70% 80%, rgba(27, 38, 59, 0.4) 0%, transparent 70%);

            animation: nx-float 20s ease-in-out infinite;
        }

        @keyframes nx-float {

            0%,
            100% {
                opacity: .8;
            }

            50% {
                opacity: 1;
            }
        }

        #nexomk-landing .hero-content {
            position: relative;
            z-index: 2;
        }

        #nexomk-landing .hero-title {
            font-size: clamp(2.5rem, 5vw, 4rem);
            font-weight: 800;
            margin-bottom: 1.5rem;
            background: linear-gradient(135deg, #fff 0%, #e94560 100%);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        #nexomk-landing .hero-subtitle {
            font-size: clamp(1.1rem, 2vw, 1.4rem);
            color: var(--text-muted);
            margin-bottom: 2rem;
            line-height: 1.8;
        }

        #nexomk-landing .hero-highlight {
            color: var(--highlight-color);
            font-weight: 600;
        }

        #nexomk-landing .hero-buttons {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            align-items: center;
            margin-bottom: 2rem;
        }

        #nexomk-landing .btn-custom {
            padding: 15px 30px;
            font-size: 1.1rem;
            font-weight: 600;
            border-radius: 50px;
            text-decoration: none;
            transition: all .3s ease;
            display: inline-block;
            position: relative;
            overflow: hidden;
            border: none;
            text-align: center;
            white-space: nowrap;
        }

        #nexomk-landing .btn-primary-custom {
            background: var(--gradient-accent);
            color: #fff;
            /*box-shadow: 0 10px 30px rgba(233, 69, 96, .3);*/
        }

        #nexomk-landing .btn-primary-custom:hover {
            transform: translateY(-3px);
            /*box-shadow: 0 15px 40px rgba(233, 69, 96, .4);*/
            color: #fff;
        }

        #nexomk-landing .btn-outline-custom {
            border: 2px solid var(--glass-border);
            color: var(--text-light);
            background: var(--glass-bg);
            backdrop-filter: blur(10px);
        }

        #nexomk-landing .btn-outline-custom:hover {
            background: var(--highlight-color);
            border-color: var(--highlight-color);
            color: #fff;
            transform: translateY(-3px);
        }

        /* ---------- Modal / Form ---------- */
        #nexomk-landing .modal-content {
            background: var(--primary-color);
            border: 1px solid var(--glass-border);
            border-radius: 20px;
        }

        #nexomk-landing .modal-header {
            border-bottom: 1px solid var(--glass-border);
        }

        #nexomk-landing .modal-title {
            color: var(--text-light);
            font-weight: 600;
        }

        #nexomk-landing .form-control {
            background: var(--glass-bg);
            border: 1px solid var(--glass-border);
            border-radius: 10px;
            color: var(--text-light);
            padding: 12px 15px;
        }

        #nexomk-landing .form-control:focus {
            background: rgba(255, 255, 255, .1);
            border-color: var(--highlight-color);
          /*  box-shadow: 0 0 0 .2rem rgba(233, 69, 96, .25);*/
            color: var(--text-light);
        }

        #nexomk-landing .form-control::placeholder {
            color: var(--text-muted);
        }

        #nexomk-landing .form-label {
            color: var(--text-light);
            font-weight: 500;
            margin-bottom: 8px;
        }

        /* ---------- Secciones ---------- */
        #nexomk-landing .stats-section {
            padding: 80px 0;
            background: var(--secondary-color);
        }

        #nexomk-landing .stat-card {
            text-align: center;
            padding: 2rem;
        }

        #nexomk-landing .stat-number {
            font-size: 3rem;
            font-weight: 800;
            color: var(--highlight-color);
            display: block;
            margin-bottom: .5rem;
        }

        #nexomk-landing .stat-label {
            color: var(--text-muted);
            font-size: 1.1rem;
            font-weight: 500;
        }

        #nexomk-landing .features-section {
            padding: 100px 0;
            background: var(--background-dark);
        }

        #nexomk-landing .section-title {
            font-size: clamp(2rem, 4vw, 3rem);
            font-weight: 700;
            color: var(--text-light);
            margin-bottom: 1rem;
            text-align: center;
        }

        #nexomk-landing .section-subtitle {
            font-size: clamp(1rem, 2vw, 1.2rem);
            color: var(--text-muted);
            text-align: center;
            margin-bottom: 4rem;
            max-width: 800px;
            margin-inline: auto;
        }

        #nexomk-landing .feature-card {
            background: var(--glass-bg);
            backdrop-filter: blur(20px);
            border: 1px solid var(--glass-border);
            border-radius: 20px;
            padding: 2.5rem;
            text-align: center;
            transition: all .3s ease;
            height: 100%;
            position: relative;
            overflow: hidden;
        }

        #nexomk-landing .feature-card::before {
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            height: 3px;
            background: var(--gradient-accent);
            transform: scaleX(0);
            transition: transform .3s ease;
        }

        #nexomk-landing .feature-card:hover::before {
            transform: scaleX(1);
        }

        #nexomk-landing .feature-card:hover {
            background: rgba(255, 255, 255, .1);
            transform: translateY(-10px);
            /*box-shadow: 0 20px 50px rgba(233, 69, 96, .2);*/
        }

        #nexomk-landing .feature-icon {
            width: 80px;
            height: 80px;
            background: var(--gradient-accent);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 1.5rem;
            font-size: 2rem;
            color: #fff;
            /*box-shadow: 0 10px 30px rgba(233, 69, 96, .3);*/
        }

        #nexomk-landing .feature-title {
            font-size: 1.3rem;
            font-weight: 600;
            color: var(--text-light);
            margin-bottom: 1rem;
        }

        #nexomk-landing .feature-description {
            color: var(--text-muted);
            line-height: 1.6;
        }

        /* ---------- Pricing ---------- */
        #nexomk-landing .pricing-section {
            padding: 100px 0;
            background: linear-gradient(135deg, var(--secondary-color) 0%, var(--accent-color) 100%);
        }

        #nexomk-landing .pricing-card {
            background: var(--glass-bg);
            backdrop-filter: blur(20px);
            border: 1px solid var(--glass-border);
            border-radius: 20px;
            padding: 2.5rem;
            text-align: center;
            transition: all .3s ease;
            position: relative;
            height: 100%;
            /* FIX: permitir que la etiqueta “Más Popular” flote sin cortarse */
            overflow: visible;
        }

        #nexomk-landing .pricing-card.featured {
            border-color: var(--highlight-color);
            background: rgba(233, 69, 96, .1);
            transform: scale(1.05);
        }

        #nexomk-landing .pricing-card.featured::before {
            content: 'Más Popular';
            position: absolute;
            top: -14px;
            left: 50%;
            transform: translateX(-50%);
            background: var(--highlight-color);
            color: #fff;
            padding: 8px 20px;
            border-radius: 50px;
            font-size: .9rem;
            font-weight: 600;
            /* sombra sutil para separarla del borde del card */
           /* box-shadow: 0 6px 16px rgba(0, 0, 0, .25);*/
        }

        #nexomk-landing .pricing-card:hover {
            transform: translateY(-10px);
            background: rgba(255, 255, 255, .1);
        }

        #nexomk-landing .pricing-card.featured:hover {
            transform: scale(1.05) translateY(-10px);
        }

        #nexomk-landing .price {
            font-size: 3rem;
            font-weight: 800;
            color: var(--text-light);
            margin: 1rem 0;
        }

        #nexomk-landing .price-currency {
            color: var(--highlight-color);
        }

        /* ---------- WhatsApp Float ---------- */
        #nexomk-landing .whatsapp-float {
            position: fixed;
            width: 60px;
            height: 60px;
            bottom: 40px;
            right: 40px;
            z-index: 1000;
            background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
            color: #fff;
            border-radius: 50px;
            text-align: center;
            font-size: 28px;
            /*box-shadow: 0 8px 30px rgba(37, 211, 102, .4);*/
            display: flex;
            align-items: center;
            justify-content: center;
            text-decoration: none;
            transition: all .3s ease;
        }

        #nexomk-landing .whatsapp-float:hover {
            transform: scale(1.1);
            color: #fff;
           /* box-shadow: 0 12px 40px rgba(37, 211, 102, .6);*/
        }

        /* ---------- Footer ---------- */
        #nexomk-landing .footer {
            background: var(--primary-color);
            color: var(--text-muted);
            padding: 60px 0 20px;
            border-top: 1px solid rgba(255, 255, 255, .1);
        }

        #nexomk-landing .footer h5 {
            color: var(--text-light);
            font-weight: 600;
            margin-bottom: 1.5rem;
        }

        #nexomk-landing .footer a {
            color: var(--text-muted);
            text-decoration: none;
            transition: all .3s ease;
        }

        #nexomk-landing .footer a:hover {
            color: var(--highlight-color);
        }

        /* ---------- Carátula + imagen hover (no rompe otras zonas) ---------- */
        #nexomk-landing .caratula {
            max-width: 100%;
            display: block;
            border-radius: 15px;
        }

        #nexomk-landing .hover-image {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            opacity: 0;
            transition: opacity .4s ease;
            border-radius: 15px;
            pointer-events: none;
        }

        #nexomk-landing .glass-card:hover .hover-image {
            opacity: 1;
        }

        /* ---------- Utilidades ---------- */
        #nexomk-landing .pulse {
            animation: nx-pulse 2s infinite;
        }

        /* --- Mantener carátula con bordes suaves --- */
        #nexomk-landing .device-frame .caratula {
            display: block;
            width: 100%;
            height: auto;
            border-radius: 16px;
        }

        /* --- “Pantalla” interna mapeada al rectángulo 400x250 (de 500x350) --- */
        #nexomk-landing .device-frame {
            /* Evitar transform en hover (para que no “empuje” secciones) */
            transition: none;
            /* Evitar que se “coma” secciones cercanas por hover general de .glass-card */
        }

        #nexomk-landing .device-frame.glass-card:hover {
            transform: none;
            /* sin efecto hover aquí */
            background: var(--glass-bg);
            /* estable */
        }

        #nexomk-landing .device-frame {
            position: relative;
        }

        /* Posicionamiento proporcional: left 10%, top 14.2857%, width 80%, height 71.4286% */
        #nexomk-landing .device-screen {
            position: absolute;
            left: 10%;
            top: 14.2857%;
            width: 80%;
            height: 71.4286%;
            border-radius: 15px;
            overflow: hidden;
            /* recorta la imagen para que no salga del marco */
            z-index: 2;
            /* por encima de la carátula */
            background: rgba(0, 0, 0, 0.08);
            /* leve fondo para transiciones limpias */
        }

        /* Imagen dentro de la pantalla: sin estirar, bien encuadrada */
        #nexomk-landing .device-screen .screen-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            /* llená el marco recortando lo que sobre: no se deforma */
            object-position: center;
            display: block;
            transition: transform .35s ease, opacity .35s ease;
        }

        /* Si querés que sólo aparezca al hover, activa esta clase en el HTML: 'show-on-hover' */
        #nexomk-landing .device-screen .screen-image.show-on-hover {
            opacity: 0;
        }

        #nexomk-landing .device-frame:hover .device-screen .screen-image.show-on-hover {
            opacity: 1;
        }

        /* (Opcional) efecto sutil al pasar el mouse */
        #nexomk-landing .device-frame:hover .device-screen .screen-image {
            transform: scale(1.02);
        }

        /* --- Margen seguro para secciones que parecían “pegadas” o superpuestas --- */
        #nexomk-landing .section-spacing-fix {
            margin-top: 1.5rem;
            margin-bottom: 2rem;
            z-index: 1;
            /* por si algún layout tenía z-index raro */
            position: relative;
            /* ancla el stacking context */
        }

        /* Si el problema era por el hover global de .glass-card (levanta y se mete en el de arriba),
   ya neutralizamos el hover en .device-frame (ver arriba). */

        /* === FIX: textos del modal claros y legibles === */
        #nexomk-landing #registroModal .modal-body p,
        #nexomk-landing #registroModal .modal-body .text-muted,
        #nexomk-landing #registroModal .modal-title {
            color: rgba(255, 255, 255, 0.92) !important;
            /* vuelve a claro */
        }

        /* Trust indicators: forzar texto claro */
        #nexomk-landing .trust-indicators .d-flex,
        #nexomk-landing .trust-indicators .d-flex span,
        #nexomk-landing .trust-indicators .text-muted {
            color: rgba(255, 255, 255, 0.92) !important;
        }


        /* Mantener contraste en labels y placeholders */
        #nexomk-landing #registroModal .form-label {
            color: rgba(255, 255, 255, 0.92) !important;
        }

        #nexomk-landing #registroModal .form-control::placeholder {
            color: rgba(255, 255, 255, 0.55) !important;
        }

        /* Opcional: subrayar links dentro del texto del modal con color de marca */
        #nexomk-landing #registroModal .modal-body a {
            color: var(--highlight-color) !important;
            text-decoration: underline;
        }


        #nexomk-landing .btn-loading {
            position: relative;
            pointer-events: none;
            opacity: .85;
        }

        #nexomk-landing .btn-loading::after {
            content: "";
            position: absolute;
            right: 14px;
            top: 50%;
            transform: translateY(-50%);
            width: 16px;
            height: 16px;
            border: 2px solid rgba(255, 255, 255, .6);
            border-top-color: transparent;
            border-radius: 50%;
            animation: nx-spin 0.8s linear infinite;
        }


        /* Select legible en modal (texto claro + fondo oscuro) */
        #nexomk-landing #registroModal select.form-control {
            background-color: var(--glass-bg);
            color: rgba(35, 36, 34, 0.92);
        }

        /* Opciones del desplegable (para navegadores que permiten estilarlas) */
        #nexomk-landing #registroModal select.form-control option {
            background-color: #1a1a2e;
            /* fondo oscuro */
            color: #fff;
            /* texto claro */
        }

        /* Form-select en tema oscuro */
        #nexomk-landing #registroModal .form-select {
            background-color: var(--glass-bg);
            color: rgba(255, 255, 255, 0.92);
            border: 1px solid var(--glass-border);
        }

        #nexomk-landing #registroModal .form-select:focus {
            background-color: rgba(255, 255, 255, 0.10);
            border-color: var(--highlight-color);
           /* box-shadow: 0 0 0 .2rem rgba(233, 69, 96, .25);*/
        }

        /* Opciones (cuando el navegador lo permite) */
        #nexomk-landing #registroModal .form-select option {
            background-color: #1a1a2e;
            color: #fff;
        }



        @keyframes nx-spin {
            to {
                transform: translateY(-50%) rotate(360deg);
            }
        }


        @keyframes nx-pulse {
            0% {
                transform: scale(1);
            }

            50% {
                transform: scale(1.05);
            }

            100% {
                transform: scale(1);
            }
        }

        /* ---------- Responsive ---------- */
        @media (max-width: 768px) {
            #nexomk-landing .page {
                padding-top: 70px;
            }

            #nexomk-landing.with-offer .page {
                padding-top: 120px;
            }

            #nexomk-landing .hero-section {
                padding-top: 50px;
                min-height: 90vh;
            }

            #nexomk-landing .hero-title {
                font-size: 2.5rem;
            }

            #nexomk-landing .hero-subtitle {
                font-size: 1.1rem;
            }

            #nexomk-landing .section-title {
                font-size: 2.2rem;
            }

            #nexomk-landing .hero-buttons {
                flex-direction: column;
                align-items: stretch;
                gap: 10px;
            }

            #nexomk-landing .btn-custom {
                width: 100%;
            }

            #nexomk-landing .pricing-card.featured {
                transform: none;
                margin-top: 2rem;
            }

            #nexomk-landing .whatsapp-float {
                width: 50px;
                height: 50px;
                font-size: 24px;
                bottom: 20px;
                right: 20px;
            }


        }

        @media (max-width: 991.98px) {

            /* Pila vertical en el menú móvil */
            #nexomk-landing .navbar-collapse .navbar-nav {
                flex-direction: column !important;
                align-items: stretch !important;
                gap: .5rem;
            }

            /* Enlaces del menú */
            #nexomk-landing .navbar-collapse .nav-link {
                padding: .75rem 1rem;
            }

            /* Botones: ancho completo y sin encimarse */
            #nexomk-landing .navbar-collapse .nav-item .btn {
                display: block;
                width: 30%;
                margin: 0;
                /* quita posibles márgenes laterales */
            }

            /* Mejor target táctil */
            #nexomk-landing .navbar .btn.btn-sm {
                padding: .75rem 1rem;
                font-size: 1rem;
            }
        }

        /* Asegura separación vertical si algo quedaba muy pegado */
        #nexomk-landing .nav-item+.nav-item {
            margin-left: 0 !important;
        }

        /* ===== FIX solape pricing en pantallas pequeñas ===== */
        @media (max-width: 991.98px) {

            /* 1) Neutralizar transformaciones que provocan solapes */
            #nexomk-landing .pricing-card,
            #nexomk-landing .pricing-card:hover,
            #nexomk-landing .pricing-card.featured,
            #nexomk-landing .pricing-card.featured:hover {
                transform: none !important;
            }

            /* 2) Asegurar stacking limpio y separación vertical */
            #nexomk-landing .pricing-card {
                position: relative;
                /* nuevo stacking context */
                z-index: 0;
                margin-top: 1rem;
                margin-bottom: 1.25rem;
                overflow: visible;
                /* mantiene visible el badge si existe */
            }

            /* 3) El destacado (“Profesional”) a altura normal y con respiro extra */
            #nexomk-landing .pricing-card.featured {
                margin-top: 1.5rem;
                /* separa del card anterior */
                margin-bottom: 1.75rem;
                border-color: var(--highlight-color);
                background: rgba(233, 69, 96, .10);
            }

            /* 4) Badge “Más Popular”: acercarlo un poco al card en móvil para que no invada al siguiente */
            #nexomk-landing .pricing-card.featured::before {
                top: -8px;
                /* antes: -14px */
            }

            /* 5) El último card (“Empresarial”) con margen superior extra 
        para prevenir cualquier “toque” visual con el destacado anterior */
            #nexomk-landing #precios .row [class*="col-"]:last-child .pricing-card {
                margin-top: 1.75rem;
            }
        }

        /* Opcional: si seguís notando “brinco” por hover en tablets, extiende el corte */
        @media (max-width: 1199.98px) {

            #nexomk-landing .pricing-card:hover,
            #nexomk-landing .pricing-card.featured:hover {
                transform: none !important;
            }
        }

        /* ===== Testimonios (scope: #nexomk-landing) ===== */
#nexomk-landing .testimonials-section {
  padding: 90px 0;
  background: var(--background-dark);
}

#nexomk-landing .testimonial-card {
  border-radius: 20px;
  padding: 1.75rem;
  color: var(--text-light);
  height: 100%;
}

#nexomk-landing .testimonial-card .avatar {
  width: 52px; height: 52px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255,255,255,0.2);
}

#nexomk-landing .testimonial-card .quote {
  color: rgba(255,255,255,0.92);
  line-height: 1.7;
  margin-bottom: 1rem;
}

#nexomk-landing .testimonial-card .rating i {
  color: #f5c85a; /* estrellas */
  margin-right: 2px;
  font-size: 1rem;
}

/* Carrusel móvil: ajustar controles para tema oscuro */
#nexomk-landing #testimonialsCarousel .carousel-control-prev-icon,
#nexomk-landing #testimonialsCarousel .carousel-control-next-icon {
  filter: invert(1) grayscale(1);
}

@media (max-width: 991.98px) {
  #nexomk-landing .testimonials-section { padding: 70px 0; }
}

    

/* === Etiqueta de oferta por tarjeta (en la parte inferior del card) === */
#nexomk-landing .pricing-card {
  position: relative;
  padding-bottom: 3.75rem; /* espacio para la etiqueta inferior */
}

#nexomk-landing .pricing-card .offer-tag {
  position: absolute;
  left: 50%;
  bottom: -12px;
  transform: translateX(-50%);
  background: linear-gradient(135deg, var(--warning-color) 0%, var(--highlight-color) 100%);
  color: #fff;
  padding: 10px 16px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.95rem;
  display: none; /* visible sólo si hay oferta activa */
  white-space: nowrap;
  border: 1px solid rgba(255,255,255,0.3);
}

#nexomk-landing .pricing-card .offer-tag .timer {
  font-weight: 800;
  margin-left: 8px;
  background: rgba(255,255,255,0.18);
  padding: 3px 8px;
  border-radius: 8px;
  letter-spacing: 0.5px;
}

/* Precio con descuento dentro del card */
#nexomk-landing .pricing-card .price-wrap {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: .65rem;
  flex-wrap: wrap;
}

#nexomk-landing .pricing-card .price-old {
  color: var(--text-muted);
  text-decoration: line-through;
  font-weight: 500;
  opacity: .85;
}

#nexomk-landing .pricing-card .price-new {
  font-size: 3rem;
  font-weight: 800;
  color: var(--text-light);
}

#nexomk-landing .pricing-card .discount-badge-inline {
  background: var(--highlight-color);
  color: #fff;
  padding: 4px 8px;
  border-radius: 8px;
  font-size: .85rem;
  font-weight: 700;
}


/* === Brand logo (reemplaza texto) === */
.brand-logo{
  display:block;
  width:100%;
  max-width: var(--logo-max-width, 220px);
  height:auto;
}

/* === Toolbar de controles (demo/config) === */
.controls-toolbar{
  position: sticky;
  top: 0;
  z-index: 1030;
  backdrop-filter: blur(8px);
  background: rgba(22, 22, 28, 0.55);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  padding: .6rem 0;
}
.controls-toolbar .form-label{
  color: var(--text-muted);
  font-size: .8rem;
}
.controls-toolbar .btn.btn-warning{
  border-radius: 999px;
}
@media (max-width: 576px){
  .controls-toolbar{
    position: static;
  }
}


/* === Admin-only toolbar visibility === */
.controls-toolbar.hidden{ display:none !important; }

/* === Equalize specific feature cards === */
.equal-card{
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 320px;
}
.equal-card > *:last-child{
  margin-top: auto;
}

/* Top & Hero logo modifiers */
.brand-logo--top{ max-width: var(--logo-max-width, 200px); }
.brand-logo--hero{ max-width: var(--logo-max-width, 220px); }



/* Estilos personalizados para la sección FAQ en nexoMk */
#faq.faq-section {
  background: transparent;
  padding-top: 4rem;
  padding-bottom: 4rem;
}

#faq .accordion-item {
  background-color: rgba(255, 255, 255, 0.05); /* estilo glass-card */
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  margin-bottom: 12px;
}

#faq .accordion-button {
  background-color: transparent;
  color: #ffffff; /* texto blanco puro */
  font-weight: 600;
  font-size: 1.1rem;
  box-shadow: none;
}

#faq .accordion-button.collapsed {
  color: #ffffff;
}

#faq .accordion-button:not(.collapsed) {
  background-color: var(--accent-color, #4CAF50); /* usa tu color de marca si está definido */
  color: #ffffff;
}

#faq .accordion-body {
  background-color: transparent;
  color: #ffffff;
  font-size: 1rem;
  line-height: 1.6;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

/* Hero: imágenes más grandes, SIN transform para evitar render raro */
#nexomk-landing .hero-section .col-lg-6 .text-center { 
  overflow: hidden;               /* recorta el excedente limpio */
}

#nexomk-landing .hero-section .col-lg-6 img.img-fluid.hero-img {
  max-width: none;                /* permitimos crecer más que la columna */
  width: 110%;                    /* mismo “tamaño grande” que antes */
  height: auto;
  transform: none;                /* <- clave: elimina el efecto “por bloques” */
  will-change: auto;
}