/* subpage-coherence.css — alinea las subpáginas (about, service, contact,
   product, gallery, faq, help, support) con el vocabulario visual del index
   (home.css): tipografía Plus Jakarta Sans, tokens oscuros neutros, paneles
   en lugar de cards azules, botones con gradiente verde y links cyan suave.

   Cárgalo SIEMPRE como ÚLTIMA hoja de estilos (después de core.css,
   inline-migrated.css, animations.css, etc.) para ganar por especificidad
   + orden de cascada. No se aplica al index porque el index ya usa home.css. */

/* === Tokens (mismos que home.css) ================================== */
:root {
    --cn-bg: #0b0d12;
    --cn-bg-2: #101319;
    --cn-panel: #12151c;
    --cn-panel-2: #171b24;
    --cn-border: rgba(255, 255, 255, 0.08);
    --cn-border-2: rgba(255, 255, 255, 0.14);
    --cn-text: #ececf1;
    --cn-text-2: #b4b8c4;
    --cn-text-3: #7d8090;
    --cn-text-4: #5b606b;
    --cn-accent: #10a37f;
    --cn-accent-2: #19c37d;
    --cn-accent-soft: rgba(25, 195, 125, 0.12);
    --cn-link: #7dd3fc;
    --cn-radius: 14px;
    --cn-radius-sm: 10px;
    --cn-radius-lg: 24px;
    --cn-shadow:
        0 1px 0 rgba(255, 255, 255, 0.04) inset,
        0 24px 48px -24px rgba(0, 0, 0, 0.6);
}

/* === Tipografía global (no toca .page-index) ====================== */
body:not(.page-index),
body:not(.page-index) p,
body:not(.page-index) span,
body:not(.page-index) li,
body:not(.page-index) a,
body:not(.page-index) button,
body:not(.page-index) input,
body:not(.page-index) textarea,
body:not(.page-index) select,
body:not(.page-index) .navbar,
body:not(.page-index) .nav-link,
body:not(.page-index) .btn {
    font-family: "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont,
        "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}

body:not(.page-index) h1,
body:not(.page-index) h2,
body:not(.page-index) h3,
body:not(.page-index) h4,
body:not(.page-index) h5,
body:not(.page-index) h6 {
    font-family: "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont,
        "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    letter-spacing: -0.02em;
    color: var(--cn-text);
    font-weight: 700;
}

body:not(.page-index) {
    color: var(--cn-text);
}

body:not(.page-index) p {
    color: var(--cn-text-2);
}

body:not(.page-index) a:not(.btn):not(.btn-primary):not(.nav-login):not(.nav-link-mobile-only):not(.lang-btn) {
    color: inherit;
    transition: color 0.15s ease;
}

/* === Hero / jumbotron / breadcrumb: ocultos =====================
   El usuario pidió quitar el banner "ACERCA DE / INICIO" en todas las
   secciones. Lo escondemos con display:none en lugar de borrar el HTML
   (preserva las traducciones data-i18n y es reversible). */
body:not(.page-index) .jumbotron.page-header,
body:not(.page-index) .jumbotron-fluid.page-header,
body:not(.page-index) .u-inline-5270f70490,
.cn-breadcrumb {
    display: none !important;
}

/* === Section title ================================================= */
body:not(.page-index) .section-title-text {
    color: var(--cn-text) !important;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
    text-shadow: none !important;
    background: linear-gradient(135deg, #ececf1 0%, #7dd3fc 60%, #19c37d 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

body:not(.page-index) .service-divider-pink,
body:not(.page-index) .section-title::before,
body:not(.page-index) .section-title::after {
    background: linear-gradient(90deg, transparent, var(--cn-accent-2), transparent) !important;
    height: 2px !important;
    border: 0 !important;
    max-width: 120px;
}

/* === Cards (Bootstrap .bg-content / .container .card) ============== */
body:not(.page-index) .bg-content,
body:not(.page-index) .bg-header,
body:not(.page-index) .container .card {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0)),
        var(--cn-panel) !important;
    border: 1px solid var(--cn-border) !important;
    border-radius: var(--cn-radius-lg) !important;
    box-shadow: var(--cn-shadow) !important;
    backdrop-filter: none !important;
    color: var(--cn-text) !important;
}

body:not(.page-index) .bg-content h1,
body:not(.page-index) .bg-content h2,
body:not(.page-index) .bg-content h3,
body:not(.page-index) .bg-content h4,
body:not(.page-index) .bg-content h5,
body:not(.page-index) .bg-content .font-weight-bold {
    color: var(--cn-text) !important;
}

body:not(.page-index) .bg-content p,
body:not(.page-index) .bg-content li,
body:not(.page-index) .bg-content span:not(.robotic-letter):not(.animated-letter) {
    color: var(--cn-text-2) !important;
}

body:not(.page-index) .bg-content strong {
    color: var(--cn-text) !important;
}

body:not(.page-index) .bg-content .fa-check {
    color: var(--cn-accent-2) !important;
}

/* === Botones tipo index =========================================== */
body:not(.page-index) .btn-primary,
body:not(.page-index) .btn.btn-primary {
    background: linear-gradient(135deg, var(--cn-accent), var(--cn-accent-2)) !important;
    border: 0 !important;
    color: #04150e !important;
    font-weight: 600;
    border-radius: 999px !important;
    padding: 12px 26px !important;
    box-shadow:
        0 12px 24px -12px rgba(25, 195, 125, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

body:not(.page-index) .btn-primary:hover,
body:not(.page-index) .btn.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow:
        0 16px 28px -12px rgba(25, 195, 125, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
    color: #04150e !important;
}

body:not(.page-index) .btn-secondary,
body:not(.page-index) .btn.btn-secondary {
    background: transparent !important;
    border: 1px solid var(--cn-border-2) !important;
    color: var(--cn-text) !important;
    border-radius: 999px !important;
    padding: 11px 24px !important;
    font-weight: 600;
}

body:not(.page-index) .btn-outline-secondary {
    border-color: var(--cn-border-2) !important;
    color: var(--cn-text-2) !important;
}

body:not(.page-index) .btn-outline-secondary:hover {
    background: rgba(255, 255, 255, 0.04) !important;
    color: var(--cn-text) !important;
}

/* Back to top */
body:not(.page-index) .back-to-top {
    background: linear-gradient(135deg, var(--cn-accent), var(--cn-accent-2)) !important;
    border: 0 !important;
    color: #04150e !important;
    border-radius: 999px !important;
    box-shadow: 0 12px 24px -12px rgba(25, 195, 125, 0.6) !important;
}

/* === Footer ======================================================= */
body:not(.page-index) .footer.bg-light,
body:not(.page-index) .container-fluid.footer {
    background: var(--cn-bg-2) !important;
    background-color: var(--cn-bg-2) !important;
    background-image: none !important;
    border-top: 1px solid var(--cn-border) !important;
    color: var(--cn-text-2) !important;
}

body:not(.page-index) .footer h1,
body:not(.page-index) .footer h5,
body:not(.page-index) .footer .text-primary {
    color: var(--cn-text) !important;
}

body:not(.page-index) .footer p,
body:not(.page-index) .footer .m-0,
body:not(.page-index) .footer span:not(.animated-letter):not(.robotic-letter) {
    color: var(--cn-text-2) !important;
}

body:not(.page-index) .footer .border-right {
    border-color: var(--cn-border) !important;
}

body:not(.page-index) .footer .btn-social {
    border-color: var(--cn-border-2) !important;
    color: var(--cn-text-2) !important;
}

body:not(.page-index) .footer .btn-social:hover {
    background: var(--cn-accent-soft) !important;
    color: var(--cn-text) !important;
    border-color: var(--cn-accent-2) !important;
}

/* === Forms (contact / support) ==================================== */
body:not(.page-index) .form-control,
body:not(.page-index) input.form-control,
body:not(.page-index) textarea.form-control,
body:not(.page-index) select.form-control {
    background: var(--cn-panel-2) !important;
    border: 1px solid var(--cn-border) !important;
    color: var(--cn-text) !important;
    border-radius: var(--cn-radius) !important;
}

body:not(.page-index) .form-control::placeholder {
    color: var(--cn-text-3) !important;
}

body:not(.page-index) .form-control:focus {
    border-color: var(--cn-accent-2) !important;
    box-shadow: 0 0 0 3px rgba(25, 195, 125, 0.15) !important;
    background: var(--cn-panel-2) !important;
    color: var(--cn-text) !important;
}

/* === Robot animation: keep, just retint ============================ */
body:not(.page-index) .u-inline-462717ae67 {
    color: var(--cn-link) !important;
}

body:not(.page-index) .u-inline-b7ce7e3e4f {
    color: var(--cn-text-2) !important;
}

/* === FAQ / Help / Support accordions ============================== */
body:not(.page-index) .accordion .card,
body:not(.page-index) .card-header {
    background: var(--cn-panel) !important;
    border-color: var(--cn-border) !important;
    color: var(--cn-text) !important;
}

body:not(.page-index) .accordion .card-body {
    background: var(--cn-panel-2) !important;
    color: var(--cn-text-2) !important;
    border-color: var(--cn-border) !important;
}

/* Gallery captions */
body:not(.page-index) .gallery-caption,
body:not(.page-index) .lightbox-caption {
    color: var(--cn-text-2) !important;
    background: var(--cn-panel) !important;
}

/* Gallery — el .portfolio-btn original se pone blanco solido en hover y
   tapa toda la imagen. Lo cambiamos a overlay oscuro translucido con borde
   acento para que la imagen siga viendose y haga match con el tema index. */
body:not(.page-index) .portfolio-item::after {
    border-color: rgba(255, 255, 255, 0.22) !important;
}

body:not(.page-index) .portfolio-item .portfolio-btn {
    background: rgba(11, 13, 18, 0.55) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(25, 195, 125, 0.55) !important;
    border-radius: 12px;
}

body:not(.page-index) .portfolio-item .portfolio-btn .text-primary,
body:not(.page-index) .portfolio-item .portfolio-btn .fa,
body:not(.page-index) .portfolio-item .portfolio-btn .fa-plus,
body:not(.page-index) .portfolio-item .portfolio-btn i {
    color: var(--cn-accent-2) !important;
    font-size: 28px !important;
    text-shadow: 0 0 14px rgba(25, 195, 125, 0.4);
}

/* === Breadcrumb compacto compartido (subpáginas + index) ==========
   Misma pieza visual que el jumbotron compacto, ahora reutilizable como
   <div class="cn-breadcrumb">. Sin selector body:not(.page-index) para que
   también aplique al index. */
.cn-breadcrumb {
    padding: 24px 16px 8px;
    text-align: center;
}

.cn-breadcrumb__title {
    font-size: 0.82rem;
    color: var(--cn-text-3, #7d8090);
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0.85;
    margin: 0 0 4px;
    line-height: 1.2;
}

.cn-breadcrumb__path {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--cn-text-3, #7d8090);
    font-size: 0.85rem;
}

.cn-breadcrumb__path a {
    color: var(--cn-text-2, #b4b8c4);
    text-decoration: none;
    transition: color 0.15s ease;
}

.cn-breadcrumb__path a:hover {
    color: var(--cn-accent-2, #19c37d);
}

.cn-breadcrumb__sep {
    color: var(--cn-text-4, #5b606b);
    font-size: 0.32rem;
    line-height: 1;
}

/* ============================================================
   NAVBAR UNIFICADO — copia exacta del nav del index (home.css)
   SOLO para subpáginas + pricing (no toca el index, que ya usa
   home.css para esto). Tokens hardcodeados con los valores de
   home.css para evitar conflictos con --bg/--text de
   inline-migrated.css en subpáginas.
   ============================================================ */
body:not(.page-index) .site-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 50 !important;
    background: rgba(11, 13, 18, 0.78) !important;
    backdrop-filter: saturate(1.4) blur(16px) !important;
    -webkit-backdrop-filter: saturate(1.4) blur(16px) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

body:not(.page-index) .site-header .nav-wrap {
    width: auto !important;
    max-width: 1280px !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    padding: 14px 24px !important;
    display: flex !important;
    align-items: center !important;
    gap: 18px !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

body:not(.page-index) .site-header .brand {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex: 0 0 auto !important;
    font-weight: 700 !important;
    font-size: 1.02rem !important;
    color: #ececf1 !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    margin-right: 8px !important;
}

body:not(.page-index) .site-header .brand-mark {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: 11px !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.018)),
        radial-gradient(80% 90% at 28% 20%, rgba(45, 212, 191, 0.28), transparent 62%),
        radial-gradient(80% 90% at 80% 84%, rgba(56, 189, 248, 0.24), transparent 64%),
        #0b1118 !important;
    color: #dffcff !important;
    font-size: 0.9rem !important;
    flex-shrink: 0 !important;
    border: 1px solid rgba(125, 211, 252, 0.18) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.10),
        0 10px 28px -18px rgba(56, 189, 248, 0.74),
        0 0 0 1px rgba(45, 212, 191, 0.08) !important;
    overflow: hidden !important;
}

body:not(.page-index) .site-header .nav-links {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    gap: 2px !important;
    margin: 0 0 0 8px !important;
    padding: 0 !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

body:not(.page-index) .site-header .nav-links a {
    padding: 8px 12px !important;
    border-radius: 8px !important;
    color: #b4b8c4 !important;
    font-size: 0.92rem !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    transition: color 0.15s ease, background 0.15s ease, box-shadow 0.25s ease !important;
}

body:not(.page-index) .site-header .nav-link-mobile-only {
    display: none !important;
}

body:not(.page-index) .site-header .nav-actions {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-shrink: 0 !important;
}

body:not(.page-index) .site-header .nav-login {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 50px !important;
    padding: 0 20px !important;
    border-radius: 14px !important;
    color: #ececf1 !important;
    font-size: 0.97rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.018)) !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}

body:not(.page-index) .site-header .nav-login:hover {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.035)) !important;
    transform: translateY(-2px) !important;
}

body:not(.page-index) .site-header .btn,
body:not(.page-index) .site-header .btn-secondary {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 13px 22px !important;
    border-radius: 14px !important;
    font-size: 0.97rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    text-decoration: none !important;
}

body:not(.page-index) .site-header .btn-secondary {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.018)) !important;
    color: #ececf1 !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
}

body:not(.page-index) .site-header .btn-secondary.demo-cta-nav {
    min-height: 50px !important;
    padding: 0 22px !important;
}

body:not(.page-index) .site-header .btn-secondary:hover,
body:not(.page-index) .site-header .btn-secondary.demo-cta-nav:hover {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.035)) !important;
    transform: translateY(-2px) !important;
}

/* Ver planes — primary CTA con gradiente verde + flecha */
body:not(.page-index) .site-header .btn.demo-cta {
    position: relative !important;
    display: inline-grid !important;
    grid-auto-flow: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 14px !important;
    min-height: 54px !important;
    padding: 16px 20px 16px 26px !important;
    border-radius: 18px !important;
    font-size: 1rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.015em !important;
    color: #04150e !important;
    background:
        linear-gradient(115deg, #0fb88a 0%, #22dca4 24%, #96efff 52%, #25d59e 76%, #0fb88a 100%) !important;
    background-size: 220% 100% !important;
    border: 1px solid rgba(255, 255, 255, 0.24) !important;
    box-shadow:
        0 22px 54px -20px rgba(25, 195, 125, 0.88),
        0 0 0 1px rgba(25, 195, 125, 0.16),
        0 0 34px -10px rgba(125, 211, 252, 0.5) !important;
    overflow: hidden !important;
    isolation: isolate !important;
    animation: primaryCtaPulse 5.8s ease-in-out infinite !important;
}

body:not(.page-index) .site-header .btn.demo-cta::after {
    content: "→" !important;
    position: relative !important;
    z-index: 2 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 999px !important;
    background: rgba(4, 21, 14, 0.16) !important;
    color: #042118 !important;
    font-size: 1.05rem !important;
    font-weight: 900 !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        0 8px 18px -10px rgba(4, 21, 14, 0.6) !important;
    transition: transform 0.24s cubic-bezier(0.2, 0.8, 0.28, 1) !important;
}

body:not(.page-index) .site-header .btn.demo-cta:hover {
    transform: translateY(-4px) scale(1.045) !important;
    box-shadow:
        0 28px 62px -20px rgba(25, 195, 125, 0.95),
        0 0 0 1px rgba(125, 211, 252, 0.22),
        0 0 46px -8px rgba(125, 211, 252, 0.62) !important;
}

body:not(.page-index) .site-header .btn.demo-cta:hover::after {
    transform: translateX(4px) scale(1.06) !important;
}

body:not(.page-index) .site-header .btn.demo-cta.demo-cta-nav-primary {
    min-height: 50px !important;
    height: 50px !important;
    padding: 0 18px 0 24px !important;
    border-radius: 16px !important;
    font-size: 0.97rem !important;
}

body:not(.page-index) .site-header .btn.demo-cta.demo-cta-nav-primary::after {
    width: 26px !important;
    height: 26px !important;
    font-size: 1rem !important;
}

@keyframes primaryCtaPulse {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* Utility strip (FAQs / Ayuda / Soporte / ES) — visible en desktop */
body:not(.page-index) .utility-strip {
    display: none;
}

@media (min-width: 921px) {
    body:not(.page-index) .utility-strip {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 18px !important;
        padding: 8px 24px !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
        background: rgba(11, 13, 18, 0.5) !important;
        font-size: 0.78rem !important;
        color: #7d8090 !important;
    }
    body:not(.page-index) .utility-strip .utility-links {
        display: flex !important;
        gap: 14px !important;
        align-items: center !important;
    }
    body:not(.page-index) .utility-strip .utility-links a {
        color: #7d8090 !important;
        text-decoration: none !important;
    }
    body:not(.page-index) .utility-strip .utility-links a:hover {
        color: #b4b8c4 !important;
    }
}

body:not(.page-index) .lang-drawer-toggle {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 6px 12px 6px 10px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #b4b8c4 !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    line-height: 1 !important;
}

body:not(.page-index) .lang-drawer-toggle__icon {
    color: #19c37d !important;
    flex-shrink: 0;
}

body:not(.page-index) .lang-drawer-toggle__copy strong {
    font-size: 0.82rem !important;
    color: #ececf1 !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
}

/* ============================================================
   BACK TO TOP — fondo oscuro con tinte azul/verde visible
   Cuerpo negro + sheen radial bicolor + borde gradient + glow.
   ============================================================ */
.back-to-top,
.cn-back-to-top,
a.back-to-top,
a.btn.back-to-top,
a.btn.btn-primary.back-to-top {
    position: fixed !important;
    right: 28px !important;
    bottom: 28px !important;
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;
    padding: 0 !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    /* Cuerpo: negro como base + dos sheens radiales (verde arriba-izquierda, azul abajo-derecha) */
    background:
        radial-gradient(80% 80% at 25% 20%, rgba(25, 195, 125, 0.28) 0%, transparent 60%),
        radial-gradient(80% 80% at 75% 80%, rgba(59, 130, 246, 0.32) 0%, transparent 60%),
        #0a0d12 !important;
    background-color: #0a0d12 !important;
    background-image:
        radial-gradient(80% 80% at 25% 20%, rgba(25, 195, 125, 0.28) 0%, transparent 60%),
        radial-gradient(80% 80% at 75% 80%, rgba(59, 130, 246, 0.32) 0%, transparent 60%) !important;
    /* Borde transparente: el ::before pinta el gradient blue→green */
    border: 1px solid transparent !important;
    border-radius: 999px !important;
    color: #ffffff !important;
    text-decoration: none !important;
    z-index: 2147483647 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(12px) scale(0.96) !important;
    transition:
        opacity 0.24s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.24s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.24s ease,
        background-position 0.4s ease !important;
    /* Glow externo bicolor: verde arriba, azul abajo */
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.04) inset,
        0 -2px 14px -2px rgba(25, 195, 125, 0.42),
        0 6px 14px -2px rgba(59, 130, 246, 0.42),
        0 8px 22px -8px rgba(0, 0, 0, 0.65) !important;
    isolation: isolate;
    overflow: visible !important;
    cursor: pointer;
}

/* Borde gradient blue→green */
.back-to-top::before,
.cn-back-to-top::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    border-radius: inherit !important;
    padding: 1.5px !important;
    background: linear-gradient(135deg, #19c37d 0%, #5eead4 30%, #38bdf8 70%, #3b82f6 100%) !important;
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0) !important;
    -webkit-mask-composite: xor;
    mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0) !important;
    mask-composite: exclude;
    pointer-events: none !important;
    opacity: 0.85;
    transition: opacity 0.2s ease !important;
}

.back-to-top.is-visible,
.cn-back-to-top.is-visible,
html.cn-back-to-top-visible .back-to-top,
html.cn-back-to-top-visible .cn-back-to-top {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) scale(1) !important;
}

.back-to-top.cn-bt-hidden:not(.is-visible),
.cn-back-to-top.cn-bt-hidden:not(.is-visible) {
    display: none !important;
}

.back-to-top:hover,
.cn-back-to-top:hover {
    transform: translateY(-2px) !important;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.08) inset,
        0 -2px 18px 0 rgba(25, 195, 125, 0.6),
        0 6px 18px 0 rgba(59, 130, 246, 0.6),
        0 14px 28px -10px rgba(0, 0, 0, 0.75) !important;
}

.back-to-top:hover::before,
.cn-back-to-top:hover::before {
    opacity: 1;
}

.back-to-top:active,
.cn-back-to-top:active {
    transform: translateY(0) !important;
    transition-duration: 0.1s !important;
}

.back-to-top:focus-visible,
.cn-back-to-top:focus-visible {
    outline: 2px solid rgba(94, 234, 212, 0.55);
    outline-offset: 3px;
}

/* Iconos: ocultar Font Awesome chunky, dejar solo el SVG fino */
.back-to-top .fa,
.back-to-top i,
.cn-back-to-top .fa,
.cn-back-to-top i {
    font-size: 0 !important;
    line-height: 0 !important;
    display: none !important;
}

.back-to-top svg,
.cn-back-to-top svg {
    width: 16px !important;
    height: 16px !important;
    color: inherit !important;
    stroke: currentColor !important;
    fill: none !important;
    stroke-width: 2 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.back-to-top:hover svg,
.cn-back-to-top:hover svg {
    transform: translateY(-1px) !important;
}

/* Back-to-top: executive trust style.
   Graphite body, restrained blue/teal edge, low glow. */
.back-to-top.cn-back-to-top,
a.back-to-top.cn-back-to-top,
html .back-to-top.cn-back-to-top {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.018)),
        radial-gradient(75% 70% at 34% 22%, rgba(45, 212, 191, 0.26), transparent 64%),
        radial-gradient(78% 76% at 76% 78%, rgba(56, 189, 248, 0.24), transparent 66%),
        #0c121a !important;
    background-color: #0c121a !important;
    background-image:
        linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.018)),
        radial-gradient(75% 70% at 34% 22%, rgba(45, 212, 191, 0.26), transparent 64%),
        radial-gradient(78% 76% at 76% 78%, rgba(56, 189, 248, 0.24), transparent 66%) !important;
    color: #e7fbff !important;
    border: 1px solid rgba(125, 211, 252, 0.28) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        inset 0 -1px 0 rgba(2, 6, 23, 0.78),
        0 12px 28px -18px rgba(0, 0, 0, 0.96),
        0 0 24px -12px rgba(56, 189, 248, 0.74),
        0 0 22px -15px rgba(45, 212, 191, 0.72) !important;
}

.back-to-top.cn-back-to-top::before,
html .back-to-top.cn-back-to-top::before {
    background: linear-gradient(135deg, rgba(45, 212, 191, 0.88), rgba(56, 189, 248, 0.9)) !important;
    opacity: 0.78 !important;
}

.back-to-top.cn-back-to-top:hover,
html .back-to-top.cn-back-to-top:hover {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        inset 0 -1px 0 rgba(2, 6, 23, 0.72),
        0 14px 30px -18px rgba(0, 0, 0, 0.98),
        0 0 32px -12px rgba(56, 189, 248, 0.72),
        0 0 24px -14px rgba(45, 212, 191, 0.62) !important;
}

.back-to-top.cn-back-to-top svg,
html .back-to-top.cn-back-to-top svg {
    color: #d9f7ff !important;
    opacity: 0.86;
}

/* Craftnex brand mark: custom nexus glyph, shared by index and subpages. */
.brand-mark,
.site-header .brand-mark,
.showcase-video__brand-mark,
.showcase-shell__brand-mark {
    position: relative !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: 11px !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.018)),
        radial-gradient(80% 90% at 28% 20%, rgba(45, 212, 191, 0.28), transparent 62%),
        radial-gradient(80% 90% at 80% 84%, rgba(56, 189, 248, 0.24), transparent 64%),
        #0b1118 !important;
    color: #dffcff !important;
    border: 1px solid rgba(125, 211, 252, 0.18) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        inset 0 -1px 0 rgba(2, 6, 23, 0.74),
        0 12px 30px -20px rgba(56, 189, 248, 0.82),
        0 0 0 1px rgba(45, 212, 191, 0.08) !important;
    overflow: hidden !important;
}

.brand-mark::before,
.site-header .brand-mark::before,
.showcase-video__brand-mark::before,
.showcase-shell__brand-mark::before {
    content: "" !important;
    position: absolute !important;
    inset: -35% !important;
    background:
        linear-gradient(115deg, transparent 34%, rgba(125, 211, 252, 0.16) 49%, transparent 64%) !important;
    transform: rotate(10deg) !important;
    pointer-events: none !important;
}

.cn-brand-glyph {
    position: relative;
    z-index: 1;
    width: 21px !important;
    height: 21px !important;
    overflow: visible;
}

.cn-glyph-shell {
    stroke: rgba(125, 211, 252, 0.74);
    stroke-width: 1.45;
    fill: rgba(15, 23, 42, 0.16);
}

.cn-glyph-c,
.cn-glyph-n {
    stroke: #dffcff;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 5px rgba(56, 189, 248, 0.42));
}

.cn-glyph-n {
    stroke: #5eead4;
}

.cn-glyph-node {
    fill: #7dd3fc;
    filter: drop-shadow(0 0 5px rgba(125, 211, 252, 0.72));
}

@media (max-width: 720px) {
    .back-to-top,
    .cn-back-to-top {
        right: 16px !important;
        bottom: 16px !important;
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
    }
    .back-to-top svg,
    .cn-back-to-top svg {
        width: 15px !important;
        height: 15px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .site-header .btn.demo-cta {
        animation: none !important;
        background: #19c37d !important;
    }
}

/* === Borde luminoso animado en los botones del nav ================
   Aplica en TODAS las páginas (index + subpáginas). Usa un conic
   gradient que rota alrededor del botón con la técnica de @property
   + CSS mask para mostrar solo el contorno. */
@property --cn-nav-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

.nav-login,
body:not(.page-index) .site-header .btn-secondary,
body:not(.page-index) .site-header .btn,
.nav-actions .btn-secondary,
.nav-actions .btn,
.nav-actions .nav-login,
.nav-actions .demo-cta-nav,
.nav-actions .demo-cta-nav-primary,
a.nav-login,
a.btn-secondary.demo-cta-nav,
a.btn.demo-cta-nav-primary {
    position: relative !important;
    isolation: isolate !important;
    overflow: visible !important;
}

/* Conic gradient ring (animado) — forzado con !important y especificidad
   suficiente para vencer cualquier ::before previo en home.css */
.nav-actions a.nav-login::before,
.nav-actions a.btn-secondary::before,
.nav-actions a.btn-secondary.demo-cta-nav::before,
.nav-actions a.btn::before,
.nav-actions a.btn.demo-cta-nav-primary::before,
body:not(.page-index) .site-header a.nav-login::before,
body:not(.page-index) .site-header a.btn-secondary::before,
body:not(.page-index) .site-header a.btn::before,
.nav-login::before,
a.nav-login::before {
    content: "" !important;
    position: absolute !important;
    inset: -2px !important;
    border-radius: inherit !important;
    padding: 2px !important;
    background: conic-gradient(
        from var(--cn-nav-angle, 0deg),
        transparent 0deg,
        rgba(125, 249, 255, 1) 30deg,
        rgba(94, 234, 212, 1) 80deg,
        rgba(52, 214, 255, 1) 130deg,
        transparent 200deg,
        transparent 360deg
    ) !important;
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0) !important;
    -webkit-mask-composite: xor !important;
    mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0) !important;
    mask-composite: exclude !important;
    z-index: 2 !important;
    pointer-events: none !important;
    filter: drop-shadow(0 0 8px rgba(94, 234, 212, 0.6))
            drop-shadow(0 0 16px rgba(52, 214, 255, 0.35)) !important;
    animation: cnNavGlow 3.6s linear infinite !important;
    width: auto !important;
    height: auto !important;
    opacity: 1 !important;
}

@keyframes cnNavGlow {
    to {
        --cn-nav-angle: 360deg;
    }
}

/* Halo ambiental: glow azul SIEMPRE visible en el botón mismo, no solo
   en el aro animado. Esto garantiza que el botón "se sienta" iluminado
   incluso cuando el conic está en su fase transparente. */
.nav-actions .nav-login,
.nav-actions .btn-secondary,
.nav-actions .btn,
body:not(.page-index) .site-header .nav-login,
body:not(.page-index) .site-header .btn-secondary,
body:not(.page-index) .site-header .btn {
    box-shadow:
        0 0 0 1px rgba(94, 234, 212, 0.18) inset,
        0 0 18px -2px rgba(52, 214, 255, 0.18),
        0 8px 22px -10px rgba(0, 0, 0, 0.5) !important;
}

.nav-actions .nav-login:hover,
.nav-actions .btn-secondary:hover,
.nav-actions .btn:hover,
body:not(.page-index) .site-header .nav-login:hover,
body:not(.page-index) .site-header .btn-secondary:hover,
body:not(.page-index) .site-header .btn:hover {
    box-shadow:
        0 0 0 1px rgba(94, 234, 212, 0.42) inset,
        0 0 28px -2px rgba(52, 214, 255, 0.4),
        0 12px 26px -10px rgba(0, 0, 0, 0.55) !important;
}

/* Texto: blanco por defecto, cyan SOLO al hacer hover.
   NO se aplica a .btn (Ver planes) que tiene fondo verde sólido y debe
   mantener su texto oscuro siempre. */
.nav-actions .nav-login:hover,
.nav-actions .btn-secondary:not(.btn):hover,
.nav-actions .btn-secondary.demo-cta-nav:hover,
body:not(.page-index) .site-header .nav-login:hover,
body:not(.page-index) .site-header .btn-secondary:not(.btn):hover,
body:not(.page-index) .site-header .btn-secondary.demo-cta-nav:hover,
a.nav-login:hover,
a.btn-secondary.demo-cta-nav:hover {
    color: #7df9ff !important;
    text-shadow: 0 0 14px rgba(94, 234, 212, 0.7);
}

.nav-actions .nav-login:hover span,
.nav-actions .btn-secondary.demo-cta-nav:hover span,
body:not(.page-index) .site-header .nav-login:hover span,
body:not(.page-index) .site-header .btn-secondary.demo-cta-nav:hover span {
    color: inherit !important;
}

/* Aceleración al hover para feedback */
.nav-login:hover::before,
body:not(.page-index) .site-header .btn-secondary:hover::before,
body:not(.page-index) .site-header .btn:hover::before,
.nav-actions .btn-secondary:hover::before,
.nav-actions .btn:hover::before,
.nav-actions .nav-login:hover::before,
.nav-actions .demo-cta-nav:hover::before,
.nav-actions .demo-cta-nav-primary:hover::before {
    animation-duration: 1.4s !important;
    filter: drop-shadow(0 0 12px rgba(94, 234, 212, 0.85))
            drop-shadow(0 0 24px rgba(52, 214, 255, 0.5)) !important;
}

@media (prefers-reduced-motion: reduce) {
    .nav-login::before,
    .site-header .btn-secondary::before,
    .site-header .btn::before,
    .nav-actions .btn-secondary::before,
    .nav-actions .btn::before,
    .nav-actions .nav-login::before,
    .nav-actions .demo-cta-nav::before,
    .nav-actions .demo-cta-nav-primary::before {
        animation: none !important;
    }
}

/* === Hover azul corporativo (serio y de confianza) en links del nav
   ================================================================
   Aplica a: enlaces principales del nav (Soluciones, Flujo, About,
   Planes, Galería, etc.), strip de utilidades (FAQs / Ayuda / Soporte),
   selector de idioma. El acento es un azul tipo "fintech" #3b82f6 →
   #60a5fa con glow suave. */

.nav-links a,
.utility-links a,
body:not(.page-index) .lang-drawer-toggle,
.lang-btn,
.mobile-utility-toggle {
    position: relative;
    transition:
        color 0.2s cubic-bezier(0.22, 1, 0.36, 1),
        background 0.2s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.25s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.nav-links a:hover,
.nav-links a:focus-visible {
    color: #dbeafe !important;
    background: linear-gradient(180deg, rgba(96, 165, 250, 0.14), rgba(59, 130, 246, 0.08)) !important;
    box-shadow:
        inset 0 0 0 1px rgba(96, 165, 250, 0.32),
        0 0 18px rgba(59, 130, 246, 0.28),
        0 8px 22px -10px rgba(59, 130, 246, 0.4);
    text-shadow: 0 0 14px rgba(147, 197, 253, 0.45);
}

.utility-links a:hover,
.utility-links a:focus-visible {
    color: #93c5fd !important;
    text-shadow: 0 0 12px rgba(96, 165, 250, 0.45);
}

body:not(.page-index) .lang-drawer-toggle:hover,
body:not(.page-index) .lang-drawer-toggle:focus-visible,
.mobile-utility-toggle:hover,
.mobile-utility-toggle:focus-visible {
    border-color: rgba(96, 165, 250, 0.45) !important;
    background: linear-gradient(180deg, rgba(96, 165, 250, 0.12), rgba(59, 130, 246, 0.06)) !important;
    color: #dbeafe !important;
    box-shadow:
        0 0 18px rgba(59, 130, 246, 0.28),
        0 10px 24px -10px rgba(59, 130, 246, 0.4);
}

.lang-btn:hover,
.lang-btn:focus-visible {
    color: #dbeafe !important;
    background: linear-gradient(180deg, rgba(96, 165, 250, 0.14), rgba(59, 130, 246, 0.08)) !important;
    box-shadow:
        inset 0 0 0 1px rgba(96, 165, 250, 0.32),
        0 0 14px rgba(59, 130, 246, 0.25);
}

/* Estado activo / página actual también con tinte azul para coherencia */
.nav-links a.active,
.nav-links a[aria-current="page"] {
    color: #dbeafe !important;
    background: linear-gradient(180deg, rgba(96, 165, 250, 0.12), rgba(59, 130, 246, 0.06)) !important;
    box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.22);
}