/* ===================================================================== NIX Arc — Caso de estudio: NIX Membership Lenguaje visual: un sistema operativo modular en construcción. Reutiliza tokens, botones, header, footer y reveal globales. Prefijo de página: .nm- ===================================================================== */ /* ------------------------------------------------------------------ */ /* 0. BASE DE PÁGINA */ /* ------------------------------------------------------------------ */ .nm-shell { width: min(100%, var(--container-wide)); margin-inline: auto; padding-inline: var(--gutter); min-width: 0; } .nm-section { position: relative; padding: var(--section-y) 0; border-top: 1px solid var(--border); } .nm-kicker { margin: 0 0 1.3rem; color: var(--violet-bright); font-family: var(--font-display); font-size: var(--fs-kicker); font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; } .nm-lead { color: var(--text-muted); font-size: var(--fs-lead); max-width: 58ch; margin-top: 1.4rem; } .nm-section h2 { font-size: var(--fs-h2); max-width: 24ch; } .nm-tag-dev { font-size: 0.66rem; letter-spacing: 0.12em; color: var(--text-muted); border: 1px dashed var(--border-strong); border-radius: var(--r-pill); padding: 0.28rem 0.65rem; } /* Nota editorial bajo mockups (fuera de aria-hidden, legible por lectores) */ .nm-frame-note { margin-top: 1.1rem; color: var(--text-faint); font-size: 0.85rem; max-width: 60ch; } /* ---------- Reveal: variante de esta página (blur ligero) ---------- Solo se aplica cuando main.js confirmó observer y no hay prefers-reduced-motion (clase motion-ready en ). Sin JS, el contenido queda visible por defecto. */ /* El reveal es global: styles.css sección 16. */ /* ------------------------------------------------------------------ */ /* 1. PIEZAS DE INTERFAZ COMPARTIDAS (átomos de los mockups) */ /* ------------------------------------------------------------------ */ .nm-state { display: inline-flex; align-items: center; gap: 0.45em; font-family: var(--font-display); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; padding: 0.32em 0.75em; border-radius: var(--r-pill); border: 1px solid var(--border); color: var(--text-muted); font-style: normal; } .nm-state::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; } .nm-state--ok { color: #7ee2a1; border-color: rgba(126, 226, 161, 0.35); background: rgba(74, 222, 128, 0.08); } .nm-state--soon { color: #f5c563; border-color: rgba(245, 197, 99, 0.35); background: rgba(251, 191, 36, 0.08); } .nm-state--off { color: #f79a9a; border-color: rgba(247, 154, 154, 0.35); background: rgba(248, 113, 113, 0.08); } .nm-state--frozen { color: #8fd3f2; border-color: rgba(143, 211, 242, 0.35); background: rgba(125, 211, 252, 0.08); } .nm-state--lg { font-size: 0.85rem; padding: 0.5em 1em; } .nm-ui-chip { font-family: var(--font-display); font-size: 0.64rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--violet-bright); border: 1px solid rgba(132, 18, 241, 0.35); border-radius: var(--r-pill); padding: 0.3em 0.75em; white-space: nowrap; } .nm-avatar { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; flex: none; font-family: var(--font-display); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.04em; color: var(--on-violet); background: linear-gradient(135deg, var(--violet-bright), var(--violet-deep)); } .nm-avatar--lg { width: 46px; height: 46px; font-size: 0.85rem; } .nm-console__mark { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; flex: none; font-family: var(--font-display); font-weight: 600; font-size: 0.8rem; color: var(--on-violet); background: linear-gradient(135deg, var(--violet), var(--violet-deep)); box-shadow: 0 4px 14px -6px var(--violet-glow); } .nm-ui-field { display: flex; flex-direction: column; gap: 0.35rem; } .nm-ui-field span { font-size: 0.66rem; color: var(--text-faint); letter-spacing: 0.06em; text-transform: uppercase; font-family: var(--font-display); } .nm-ui-field i { display: block; height: 26px; border-radius: 8px; background: rgba(255, 255, 255, 0.045); border: 1px solid var(--border); } .nm-ui-field i.w2 { width: 70%; } .nm-ui-field i.w3 { width: 55%; } .nm-ui-option { font-family: var(--font-display); font-size: 0.74rem; font-weight: 500; color: var(--text-muted); border: 1px solid var(--border); border-radius: 9px; padding: 0.42rem 0.6rem; } .nm-ui-option.is-on { color: var(--text); border-color: rgba(132, 18, 241, 0.55); background: rgba(132, 18, 241, 0.12); } .nm-ui-btn { display: inline-flex; align-items: center; font-family: var(--font-display); font-size: 0.78rem; font-weight: 500; padding: 0.5rem 1rem; border-radius: var(--r-pill); border: 1px solid var(--border-strong); color: var(--text); width: fit-content; } .nm-ui-btn.is-primary { background: var(--violet); border-color: var(--violet); color: var(--on-violet); } .nm-ui-btn.is-quiet { border-color: transparent; color: var(--violet-bright); } .nm-ui-search { display: flex; align-items: center; gap: 0.6rem; font-size: 0.8rem; color: var(--text-faint); border: 1px solid var(--border); border-radius: var(--r-pill); padding: 0.5rem 0.9rem; background: rgba(255, 255, 255, 0.03); } .nm-ui-search i { width: 12px; height: 12px; flex: none; border: 1.5px solid var(--text-faint); border-radius: 50%; position: relative; } .nm-ui-search i::after { content: ""; position: absolute; width: 5px; height: 1.5px; background: var(--text-faint); bottom: -2px; right: -4px; transform: rotate(45deg); } /* ------------------------------------------------------------------ */ /* 2. NAVEGACIÓN DE PROGRESO (desktop) */ /* ------------------------------------------------------------------ */ .nm-progress { position: fixed; right: clamp(0.8rem, 2vw, 2rem); top: 50%; transform: translateY(-50%); z-index: 60; opacity: 0; visibility: hidden; transition: opacity var(--dur-2) var(--ease), visibility var(--dur-2); } .nm-progress.is-shown { opacity: 1; visibility: visible; } .nm-progress ul { display: flex; flex-direction: column; gap: 0.35rem; } .nm-progress a { display: flex; align-items: center; justify-content: flex-end; gap: 0.6rem; padding: 0.3rem 0.2rem; color: var(--text-faint); font-family: var(--font-display); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.06em; transition: color var(--dur-1) var(--ease); } .nm-progress a span { opacity: 0; transform: translateX(6px); transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease); } .nm-progress:hover a span, .nm-progress a:focus-visible span, .nm-progress a.is-current span { opacity: 1; transform: none; } .nm-progress a i { width: 7px; height: 7px; flex: none; border-radius: 2px; transform: rotate(45deg); background: rgba(255, 255, 255, 0.16); transition: background-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease); } .nm-progress a:hover { color: var(--text); } .nm-progress a.is-current { color: var(--violet-bright); } .nm-progress a.is-current i { background: var(--violet); box-shadow: 0 0 12px -2px var(--violet-glow); } @media (max-width: 1280px) { .nm-progress { display: none; } } /* ------------------------------------------------------------------ */ /* 3. HERO */ /* ------------------------------------------------------------------ */ .nm-hero { position: relative; overflow: hidden; } .nm-hero__grid { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); align-items: center; gap: clamp(2rem, 4.5vw, 4.5rem); } .nm-breadcrumbs { margin-bottom: 1.4rem; } .nm-breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; } .nm-breadcrumbs li { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.82rem; color: var(--text-faint); } .nm-breadcrumbs li + li::before { content: "/"; opacity: 0.5; } .nm-breadcrumbs a { color: var(--text-muted); transition: color var(--dur-1) var(--ease); } .nm-breadcrumbs a:hover { color: var(--text); } .nm-hero__title { font-size: clamp(2.05rem, 3.9vw, 3.35rem); max-width: 19ch; } .nm-hero__lead { font-size: var(--fs-lead); color: var(--text-muted); max-width: 50ch; margin: 1.6rem 0 1.9rem; } .nm-hero__meta { display: grid; grid-template-columns: repeat(4, auto); justify-content: start; gap: 0.5rem clamp(1.4rem, 2.5vw, 2.5rem); margin: 0 0 2.2rem; padding: 1.1rem 0; border-block: 1px solid var(--border); } .nm-hero__meta div { min-width: 0; } .nm-hero__meta dt { font-family: var(--font-display); font-size: 0.66rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 0.3rem; } .nm-hero__meta dd { margin: 0; font-size: 0.92rem; color: var(--text); font-weight: 500; } .nm-hero__actions { display: flex; flex-wrap: wrap; gap: 0.9rem; } /* Escena por capas: el producto como sistema modular */ .nm-hero__visual { position: relative; min-width: 0; } .nm-hero-scene { position: relative; aspect-ratio: 10 / 8.4; max-width: 640px; margin-left: auto; } .nm-hero-scene::before { content: ""; position: absolute; inset: 6% -4% -2% 10%; background: radial-gradient(closest-side, rgba(132, 18, 241, 0.22), transparent 72%); filter: blur(14px); z-index: 0; } .nm-hero-layer { position: absolute; z-index: 2; will-change: transform; transform: translate3d(calc(var(--mx, 0) * var(--depth, 0) * 1px), calc(var(--my, 0) * var(--depth, 0) * 1px), 0); } .nm-hero-layer--back { --depth: 10; top: 0; right: 0; width: 34%; z-index: 1; opacity: 0.85; } .nm-hero-layer--main { --depth: 4; top: 9%; left: 4%; width: 82%; } .nm-hero-layer--profile { --depth: 16; left: -2%; bottom: 4%; width: 42%; z-index: 3; } .nm-hero-layer--access { --depth: 24; right: 0; bottom: 18%; width: 40%; z-index: 4; } /* Entrada: las capas se acomodan al aparecer */ html.motion-ready .nm-hero__visual.is-visible .nm-hero-layer--back { animation: nm-settle 0.9s var(--ease) 0.15s both; } html.motion-ready .nm-hero__visual.is-visible .nm-hero-layer--main { animation: nm-settle 0.9s var(--ease) 0s both; } html.motion-ready .nm-hero__visual.is-visible .nm-hero-layer--profile { animation: nm-settle 0.9s var(--ease) 0.28s both; } html.motion-ready .nm-hero__visual.is-visible .nm-hero-layer--access { animation: nm-settle 0.9s var(--ease) 0.42s both; } @keyframes nm-settle { from { opacity: 0; transform: translate3d(0, 26px, 0) scale(0.985); } to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); } } /* Panel principal del hero */ .nm-console { display: flex; border-radius: var(--r-md); border: 1px solid var(--border-strong); background: linear-gradient(160deg, rgba(26, 22, 42, 0.96), rgba(11, 11, 18, 0.97)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 44px 90px -36px rgba(0, 0, 0, 0.9); overflow: hidden; } .nm-console__side { width: 30%; min-width: 0; padding: 1rem 0.85rem; border-right: 1px solid var(--border); background: rgba(255, 255, 255, 0.02); } .nm-console__side ul { margin-top: 1rem; display: flex; flex-direction: column; gap: 0.28rem; } .nm-console__side li { display: flex; align-items: center; gap: 0.5rem; font-family: var(--font-display); font-size: 0.68rem; font-weight: 500; color: var(--text-faint); padding: 0.4rem 0.55rem; border-radius: 8px; white-space: nowrap; } .nm-console__side li i { width: 9px; height: 9px; flex: none; border-radius: 3px; background: rgba(255, 255, 255, 0.12); } .nm-console__side li.is-on { color: var(--text); background: rgba(132, 18, 241, 0.16); } .nm-console__side li.is-on i { background: var(--violet-bright); } .nm-console__body { flex: 1; min-width: 0; padding: 1rem 1.1rem 1.2rem; display: flex; flex-direction: column; gap: 0.9rem; } .nm-console__top { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; } .nm-console__top small { display: block; font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint); font-family: var(--font-display); } .nm-console__top strong { font-family: var(--font-display); font-size: 0.92rem; font-weight: 600; } .nm-console__kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.55rem; } .nm-console__kpis > div { min-width: 0; border: 1px solid var(--border); border-radius: 10px; padding: 0.55rem 0.65rem; background: rgba(255, 255, 255, 0.025); } .nm-console__kpis small { display: block; font-size: 0.56rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); font-family: var(--font-display); margin-bottom: 0.2rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nm-console__kpis b { font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; } .nm-console__table { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; } .nm-console__thead, .nm-console__tr { display: grid; grid-template-columns: 1.2fr 1fr auto; gap: 0.6rem; align-items: center; padding: 0.5rem 0.7rem; font-size: 0.72rem; } .nm-console__thead { font-family: var(--font-display); font-size: 0.58rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); background: rgba(255, 255, 255, 0.03); border-bottom: 1px solid var(--border); } .nm-console__tr { border-bottom: 1px solid rgba(255, 255, 255, 0.045); color: var(--text-muted); } .nm-console__tr:last-child { border-bottom: 0; } .nm-console__tr span:first-child { color: var(--text); font-weight: 500; } /* Módulo trasero */ .nm-mini-module { border-radius: 12px; border: 1px solid var(--border); background: rgba(16, 15, 26, 0.92); padding: 0.85rem; box-shadow: 0 24px 50px -28px rgba(0, 0, 0, 0.8); } .nm-mini-module small { display: block; font-family: var(--font-display); font-size: 0.58rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 0.6rem; } .nm-mini-module span { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; } .nm-mini-module span:last-child { margin-bottom: 0; } .nm-mini-module i { width: 7px; height: 7px; border-radius: 50%; background: var(--violet-bright); opacity: 0.7; flex: none; } .nm-mini-module b { display: block; height: 7px; border-radius: 4px; background: rgba(255, 255, 255, 0.1); flex: 1; } .nm-mini-module b.w2 { flex: 0.75; } .nm-mini-module b.w3 { flex: 0.55; } /* Ficha de cliente flotante */ .nm-hero-card { border-radius: 14px; border: 1px solid var(--border-strong); background: linear-gradient(160deg, rgba(30, 25, 48, 0.98), rgba(13, 12, 21, 0.98)); padding: 1rem; box-shadow: 0 30px 60px -26px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(132, 18, 241, 0.06); display: flex; flex-direction: column; gap: 0.7rem; } .nm-hero-card__head { display: flex; align-items: center; gap: 0.65rem; } .nm-hero-card__head b { display: block; font-family: var(--font-display); font-size: 0.85rem; } .nm-hero-card__head small { color: var(--text-faint); font-size: 0.66rem; } .nm-hero-card__rows { display: flex; gap: 1.1rem; } .nm-hero-card__rows small { display: block; font-size: 0.58rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); font-family: var(--font-display); } .nm-hero-card__rows b { font-family: var(--font-display); font-size: 0.78rem; } /* Tarjeta de validación flotante */ .nm-hero-access { position: relative; border-radius: 14px; border: 1px solid rgba(126, 226, 161, 0.3); background: linear-gradient(160deg, rgba(20, 34, 26, 0.92), rgba(12, 14, 15, 0.96)); padding: 0.9rem 1rem; box-shadow: 0 26px 55px -26px rgba(0, 0, 0, 0.9); } .nm-hero-access b { display: flex; align-items: center; gap: 0.5rem; font-family: var(--font-display); font-size: 0.85rem; color: #9ceeb7; } .nm-hero-access b::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #6ee79a; box-shadow: 0 0 10px rgba(110, 231, 154, 0.7); } .nm-hero-access small { display: block; margin-top: 0.3rem; color: var(--text-faint); font-size: 0.68rem; } .nm-hero-access__pulse { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; border: 1px solid rgba(126, 226, 161, 0.35); } @media (prefers-reduced-motion: no-preference) { .nm-hero-access__pulse { animation: nm-pulse 3.2s var(--ease) infinite; } } @keyframes nm-pulse { 0%, 100% { opacity: 0; transform: scale(1); } 35% { opacity: 0.8; transform: scale(1.035); } 70% { opacity: 0; transform: scale(1.07); } } .nm-hero .nm-frame-note { text-align: right; margin-top: 0.9rem; } .nm-hero__scrollhint { position: absolute; left: 50%; bottom: clamp(0.7rem, 2vh, 1.6rem); transform: translateX(-50%); width: 26px; height: 40px; border: 1px solid var(--border-strong); border-radius: var(--r-pill); display: grid; justify-items: center; padding-top: 7px; } .nm-hero__scrollhint span { width: 3px; height: 8px; border-radius: 2px; background: var(--violet-bright); display: block; } @media (prefers-reduced-motion: no-preference) { .nm-hero__scrollhint span { animation: nm-hint 2.4s var(--ease) infinite; } } @keyframes nm-hint { 0%, 100% { transform: translateY(0); opacity: 1; } 50% { transform: translateY(10px); opacity: 0.35; } } /* ------------------------------------------------------------------ */ /* 4. RESUMEN */ /* ------------------------------------------------------------------ */ .nm-summary__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; } .nm-summary__copy p + p { margin-top: 1.2rem; } .nm-summary__copy > p:not(.nm-kicker) { color: var(--text-muted); font-size: 1.05rem; max-width: 58ch; } .nm-summary__copy h2 { margin-bottom: 1.6rem; } .nm-summary__quote { margin: 0; align-self: center; border-left: 2px solid var(--violet); padding: 0.6rem 0 0.6rem clamp(1.2rem, 2.5vw, 2rem); } .nm-summary__quote p { font-family: var(--font-display); font-size: clamp(1.25rem, 2.1vw, 1.7rem); font-weight: 500; line-height: 1.32; letter-spacing: -0.01em; color: var(--text); } .nm-summary__visual { grid-column: 1 / -1; margin-top: clamp(1.5rem, 3vw, 2.5rem); } .nm-summary__note { grid-column: 1 / -1; } /* Antes / después */ .nm-beforeafter { display: grid; grid-template-columns: minmax(0, 1.15fr) auto minmax(0, 1fr); align-items: stretch; gap: clamp(1rem, 2.5vw, 2rem); border: 1px solid var(--border); border-radius: var(--r-lg); background: rgba(10, 10, 17, 0.6); padding: clamp(1.25rem, 3vw, 2.5rem); overflow: hidden; } .nm-beforeafter__label { display: inline-block; font-family: var(--font-display); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 1.1rem; } .nm-beforeafter__label--after { color: var(--violet-bright); } .nm-scatter { position: relative; min-height: 240px; } .nm-scatter > div { position: absolute; border-radius: 10px; border: 1px solid var(--border); background: rgba(20, 19, 30, 0.92); padding: 0.75rem 0.9rem; box-shadow: 0 16px 36px -20px rgba(0, 0, 0, 0.8); } .nm-scatter b { display: block; font-family: var(--font-display); font-size: 0.72rem; font-weight: 500; color: var(--text-muted); margin-bottom: 0.5rem; } .nm-scatter__sheet { top: 0; left: 0; width: 56%; transform: rotate(-2.2deg); } .nm-scatter__sheet span { display: block; height: 8px; margin-bottom: 6px; border-radius: 3px; background: linear-gradient(90deg, rgba(255,255,255,0.09) 30%, rgba(255,255,255,0.045) 30%, rgba(255,255,255,0.045) 62%, rgba(255,255,255,0.08) 62%); } .nm-scatter__chat { top: 8%; right: 0; width: 46%; transform: rotate(1.8deg); } .nm-scatter__chat i { display: block; font-style: normal; font-size: 0.7rem; color: var(--text-muted); background: rgba(255, 255, 255, 0.05); border-radius: 10px 10px 10px 3px; padding: 0.4rem 0.6rem; margin-bottom: 0.45rem; width: fit-content; max-width: 100%; } .nm-scatter__chat i.me { background: rgba(132, 18, 241, 0.16); border-radius: 10px 10px 3px 10px; margin-left: auto; } .nm-scatter__note { bottom: 14%; left: 12%; width: 34%; transform: rotate(-1.4deg); } .nm-scatter__note span { display: block; height: 6px; margin-bottom: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.08); } .nm-scatter__legacy { bottom: 0; right: 6%; width: 44%; transform: rotate(1.2deg); } .nm-scatter__legacy span { font-size: 0.64rem; color: var(--text-faint); } .nm-beforeafter__arrow { display: grid; place-items: center; } .nm-beforeafter__arrow i { width: clamp(2rem, 4vw, 3.4rem); height: 1px; position: relative; background: linear-gradient(90deg, transparent, var(--violet-bright)); } .nm-beforeafter__arrow i::after { content: ""; position: absolute; right: -1px; top: -3.5px; width: 8px; height: 8px; border-top: 1px solid var(--violet-bright); border-right: 1px solid var(--violet-bright); transform: rotate(45deg); } .nm-unified { height: 100%; display: flex; flex-direction: column; border-radius: 14px; border: 1px solid rgba(132, 18, 241, 0.4); background: linear-gradient(165deg, rgba(30, 22, 50, 0.92), rgba(12, 11, 20, 0.96)); padding: 1.1rem 1.2rem; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 24px 60px -30px var(--violet-glow); } .nm-unified header { display: flex; align-items: center; gap: 0.6rem; font-family: var(--font-display); font-weight: 600; font-size: 0.9rem; } .nm-unified ul { margin: 1.1rem 0; display: flex; flex-direction: column; gap: 0.45rem; flex: 1; } .nm-unified li { display: flex; align-items: center; gap: 0.55rem; font-family: var(--font-display); font-size: 0.78rem; font-weight: 500; color: var(--text-muted); padding: 0.45rem 0.6rem; border-radius: 8px; background: rgba(255, 255, 255, 0.03); } .nm-unified li::before { content: ""; width: 8px; height: 8px; border-radius: 3px; transform: rotate(45deg); background: var(--violet); opacity: 0.8; } .nm-unified footer { font-size: 0.78rem; color: var(--violet-bright); font-family: var(--font-display); font-weight: 500; border-top: 1px solid var(--border); padding-top: 0.8rem; } /* ------------------------------------------------------------------ */ /* 5. PROBLEMA */ /* ------------------------------------------------------------------ */ .nm-problem__head { max-width: 62ch; } .nm-problem__list { margin-top: clamp(2.5rem, 5vw, 4rem); display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 clamp(1.5rem, 3vw, 3rem); } .nm-problem__list li { padding: 1.4rem 0 1.6rem; border-top: 1px solid var(--border); } .nm-problem__list b { display: block; font-family: var(--font-display); font-size: 1.02rem; font-weight: 600; margin-bottom: 0.45rem; } .nm-problem__list span { color: var(--text-muted); font-size: 0.94rem; } .nm-problem__visual { margin-top: clamp(2rem, 4vw, 3rem); } .nm-journey { border: 1px solid var(--border); border-radius: var(--r-lg); background: rgba(10, 10, 17, 0.6); padding: clamp(1.5rem, 3.5vw, 3rem); overflow: hidden; } .nm-journey__label { display: block; font-family: var(--font-display); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 1.6rem; } .nm-journey__strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(0.7rem, 1.5vw, 1.2rem); } .nm-journey__frag { border: 1px solid var(--border); border-radius: 12px; background: rgba(19, 18, 29, 0.9); padding: 0.85rem 0.9rem; transform: rotate(var(--fr, 0deg)); box-shadow: 0 18px 36px -22px rgba(0, 0, 0, 0.85); } .nm-journey__frag small { display: block; font-family: var(--font-display); font-size: 0.62rem; color: var(--violet-bright); letter-spacing: 0.1em; margin-bottom: 0.4rem; } .nm-journey__frag b { display: block; font-family: var(--font-display); font-size: 0.82rem; font-weight: 600; line-height: 1.3; margin-bottom: 0.3rem; } .nm-journey__frag span { font-size: 0.72rem; color: var(--text-faint); } .nm-journey__merge { display: grid; grid-template-columns: repeat(5, 1fr); justify-items: center; height: clamp(2.2rem, 5vw, 3.4rem); margin: 0.6rem 0; } .nm-journey__merge i { width: 1px; height: 100%; background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(132, 18, 241, 0.55)); } .nm-journey__merge i:nth-child(1) { transform: skewX(20deg); } .nm-journey__merge i:nth-child(2) { transform: skewX(10deg); } .nm-journey__merge i:nth-child(4) { transform: skewX(-10deg); } .nm-journey__merge i:nth-child(5) { transform: skewX(-20deg); } .nm-journey__system { display: flex; align-items: center; gap: 1rem; border: 1px solid rgba(132, 18, 241, 0.42); border-radius: 14px; background: linear-gradient(160deg, rgba(28, 21, 46, 0.94), rgba(12, 11, 20, 0.96)); padding: 0.9rem 1.1rem; box-shadow: 0 24px 60px -30px var(--violet-glow); flex-wrap: wrap; } .nm-journey__tabs { display: flex; gap: 0.4rem; flex-wrap: wrap; } .nm-journey__tabs b { font-family: var(--font-display); font-size: 0.74rem; font-weight: 500; color: var(--text-muted); border: 1px solid var(--border); border-radius: var(--r-pill); padding: 0.35rem 0.8rem; } .nm-journey__tabs b.is-on { color: var(--on-violet); background: var(--violet); border-color: var(--violet); } .nm-journey__system small { margin-left: auto; color: var(--text-faint); font-size: 0.78rem; } /* ------------------------------------------------------------------ */ /* 6. USUARIOS */ /* ------------------------------------------------------------------ */ .nm-users__grid { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(2.5rem, 5vw, 5rem); align-items: center; } .nm-users__profiles { margin-top: 2.2rem; display: flex; flex-direction: column; } .nm-users__profiles > div { padding: 1.1rem 0; border-top: 1px solid var(--border); } .nm-users__profiles dt { font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; margin-bottom: 0.35rem; } .nm-users__profiles dd { margin: 0; color: var(--text-muted); font-size: 0.95rem; max-width: 52ch; } .nm-views { position: relative; min-height: 460px; } .nm-views__panel { position: absolute; border-radius: 14px; border: 1px solid var(--border-strong); background: linear-gradient(160deg, rgba(24, 21, 40, 0.96), rgba(12, 12, 20, 0.97)); box-shadow: 0 30px 70px -32px rgba(0, 0, 0, 0.9); padding: 1.1rem; } .nm-views__panel header { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin-bottom: 0.9rem; } .nm-views__panel header b { font-family: var(--font-display); font-size: 0.86rem; font-weight: 600; } .nm-views__panel--admin { top: 0; right: 0; width: 78%; z-index: 1; } .nm-views__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.7rem; } .nm-views__cols > div { border: 1px solid var(--border); border-radius: 10px; padding: 0.6rem; } .nm-views__cols small { display: block; font-family: var(--font-display); font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 0.5rem; } .nm-views__cols i { display: block; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.08); margin-bottom: 6px; } .nm-views__panel--admin footer { display: flex; gap: 0.5rem; margin-top: 0.8rem; } .nm-views__panel--admin footer span { height: 9px; border-radius: 4px; background: rgba(132, 18, 241, 0.35); flex: 1; } .nm-views__panel--admin footer span.w2 { flex: 0.5; background: rgba(255, 255, 255, 0.07); } .nm-views__panel--front { left: 0; bottom: 12%; width: 58%; z-index: 2; } .nm-views__search { display: flex; align-items: center; gap: 0.5rem; font-size: 0.74rem; color: var(--text-faint); border: 1px solid var(--border); border-radius: var(--r-pill); padding: 0.45rem 0.8rem; margin-bottom: 0.7rem; background: rgba(255, 255, 255, 0.03); } .nm-views__search i { width: 10px; height: 10px; border: 1.5px solid var(--text-faint); border-radius: 50%; flex: none; } .nm-views__row { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.55rem 0.6rem; border-radius: 9px; background: rgba(255, 255, 255, 0.03); margin-bottom: 0.45rem; } .nm-views__row:last-child { margin-bottom: 0; } .nm-views__row b { font-family: var(--font-display); font-size: 0.78rem; font-weight: 500; } .nm-views__panel--check { right: 4%; bottom: 0; width: 38%; z-index: 3; display: flex; flex-direction: column; align-items: flex-start; gap: 0.6rem; border-color: rgba(126, 226, 161, 0.28); } .nm-views__panel--check b { font-family: var(--font-display); font-size: 0.82rem; font-weight: 600; } .nm-views__panel--check small { color: var(--text-faint); font-size: 0.7rem; } .nm-users__visual .nm-frame-note { margin-top: 1.2rem; } /* ------------------------------------------------------------------ */ /* 7. OBJETIVOS */ /* ------------------------------------------------------------------ */ .nm-goals__head { max-width: 62ch; margin-bottom: clamp(2rem, 4vw, 3.5rem); } .nm-goals__list { display: flex; flex-direction: column; counter-reset: goals; } .nm-goal { display: grid; grid-template-columns: auto minmax(0, 1.3fr) minmax(0, 1fr); align-items: center; gap: clamp(1.25rem, 3.5vw, 3.5rem); padding: clamp(1.6rem, 3vw, 2.4rem) 0; border-top: 1px solid var(--border); } .nm-goal:last-child { border-bottom: 1px solid var(--border); } .nm-goal__num { font-family: var(--font-display); font-size: clamp(2.2rem, 4.5vw, 3.4rem); font-weight: 600; line-height: 1; color: rgba(168, 85, 255, 0.55); min-width: 2ch; text-align: center; } @supports (-webkit-text-stroke: 1px #000) { .nm-goal__num { color: transparent; -webkit-text-stroke: 1px rgba(168, 85, 255, 0.55); } } .nm-goal__copy h3 { font-size: clamp(1.2rem, 2vw, 1.55rem); margin-bottom: 0.5rem; } .nm-goal__copy p { color: var(--text-muted); font-size: 0.98rem; max-width: 48ch; } .nm-goal__demo { display: flex; justify-content: flex-end; } .nm-goal__panel { display: flex; align-items: center; gap: 0.5rem; border: 1px solid var(--border); border-radius: 12px; padding: 0.8rem 1rem; background: rgba(255, 255, 255, 0.025); font-family: var(--font-display); font-size: 0.78rem; color: var(--text-muted); } .nm-goal__panel i { width: 14px; height: 14px; border-radius: 4px; background: rgba(255, 255, 255, 0.08); } .nm-goal__panel i.on { background: var(--violet); box-shadow: 0 0 12px -3px var(--violet-glow); } .nm-goal__panel b { margin-left: 0.4rem; font-weight: 500; } .nm-goal__steps { display: flex; flex-direction: column; gap: 0.5rem; align-items: flex-end; font-family: var(--font-display); } .nm-goal__steps s { color: var(--text-faint); font-size: 0.82rem; text-decoration-color: rgba(248, 113, 113, 0.6); } .nm-goal__steps b { color: var(--violet-bright); font-size: 1rem; font-weight: 600; letter-spacing: 0.04em; } .nm-goal__states { display: flex; flex-wrap: wrap; gap: 0.45rem; justify-content: flex-end; } .nm-goal__roles { display: flex; gap: 1rem; } .nm-goal__roles > div { border: 1px solid var(--border); border-radius: 10px; padding: 0.7rem; display: flex; flex-direction: column; gap: 5px; } .nm-goal__roles small { font-family: var(--font-display); font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 0.2rem; } .nm-goal__roles i { width: 54px; height: 7px; border-radius: 4px; background: rgba(132, 18, 241, 0.4); } .nm-goal__roles > div:last-child i { background: rgba(255, 255, 255, 0.1); } /* ------------------------------------------------------------------ */ /* 8. ARQUITECTURA */ /* ------------------------------------------------------------------ */ .nm-arch__head { max-width: 64ch; margin-bottom: clamp(2.5rem, 5vw, 4rem); } .nm-arch__map { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); } .nm-arch__layer { border: 1px solid var(--border); border-radius: var(--r-lg); padding: clamp(1.4rem, 2.6vw, 2.2rem); background: rgba(11, 11, 18, 0.66); min-width: 0; } .nm-arch__layer--core { grid-column: 1 / -1; border-color: rgba(132, 18, 241, 0.45); background: radial-gradient(40rem 14rem at 12% 0%, rgba(132, 18, 241, 0.12), transparent 70%), rgba(13, 11, 22, 0.8); box-shadow: 0 30px 70px -40px var(--violet-glow); } .nm-arch__layer--future { border-style: dashed; } .nm-arch__layer header small { display: block; font-family: var(--font-display); font-size: 0.64rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 0.4rem; } .nm-arch__layer h3 { font-size: 1.25rem; margin-bottom: 1.2rem; } .nm-arch__layer ul { display: flex; flex-wrap: wrap; gap: 0.55rem; } .nm-arch__layer li { font-family: var(--font-display); font-size: 0.84rem; font-weight: 500; color: var(--text); border: 1px solid var(--border-strong); border-radius: 10px; padding: 0.6rem 0.95rem; background: rgba(255, 255, 255, 0.03); display: inline-flex; align-items: center; gap: 0.5rem; } .nm-arch__layer li::before { content: ""; width: 7px; height: 7px; border-radius: 2px; transform: rotate(45deg); background: rgba(255, 255, 255, 0.22); } .nm-arch__layer--core li { border-color: rgba(132, 18, 241, 0.4); background: rgba(132, 18, 241, 0.09); } .nm-arch__layer--core li::before { background: var(--violet-bright); } .nm-arch__layer--core li.is-core { background: var(--violet); border-color: var(--violet); color: var(--on-violet); } .nm-arch__layer--core li.is-core::before { background: #fff; } .nm-arch__layer--future li { border-style: dashed; color: var(--text-muted); } .nm-arch__why { margin-top: 1.2rem; color: var(--text-faint); font-size: 0.86rem; max-width: 60ch; border-top: 1px solid var(--border); padding-top: 0.9rem; } /* ------------------------------------------------------------------ */ /* 9. FLUJOS */ /* ------------------------------------------------------------------ */ .nm-flows__head { max-width: 62ch; margin-bottom: clamp(2.5rem, 5vw, 4rem); } .nm-flow { border-top: 1px solid var(--border); padding: clamp(2rem, 4vw, 3.2rem) 0; } .nm-flow:last-child { padding-bottom: 0; } .nm-flow__head { max-width: 62ch; margin-bottom: 1.8rem; } .nm-flow__head h3 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); margin-bottom: 0.55rem; } .nm-flow__head p { color: var(--text-muted); font-size: 0.98rem; } .nm-flow__annotation { margin-top: 1.4rem; padding-left: 1rem; border-left: 2px solid var(--violet); color: var(--text-muted); font-size: 0.92rem; max-width: 60ch; } /* Flujo 1: secuencia de pantallas */ .nm-flow__screens { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.4rem, 2.6vw, 2.4rem); } .nm-flow__screen { position: relative; border: 1px solid var(--border-strong); border-radius: 14px; background: linear-gradient(160deg, rgba(23, 21, 38, 0.94), rgba(12, 12, 20, 0.96)); padding: 1rem; display: flex; flex-direction: column; gap: 0.65rem; box-shadow: 0 22px 46px -26px rgba(0, 0, 0, 0.85); } .nm-flow__screen small { font-family: var(--font-display); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--violet-bright); margin-bottom: 0.2rem; } .nm-flow__screen:not(:last-child)::after { content: ""; position: absolute; top: 50%; right: calc(-1 * clamp(1.4rem, 2.6vw, 2.4rem) + 4px); width: calc(clamp(1.4rem, 2.6vw, 2.4rem) - 8px); height: 1px; background: linear-gradient(90deg, rgba(168, 85, 255, 0.6), rgba(168, 85, 255, 0.15)); } .nm-flow__screen.is-done { border-color: rgba(126, 226, 161, 0.3); } .nm-flow__done-note { font-size: 0.72rem; color: var(--text-faint); } /* Flujo 2: pipeline */ .nm-flow__pipeline { display: flex; align-items: center; gap: clamp(0.6rem, 1.4vw, 1.1rem); } .nm-flow__node { flex: 1; min-width: 0; border: 1px solid var(--border-strong); border-radius: 12px; background: rgba(17, 16, 27, 0.92); padding: 0.9rem 1rem; } .nm-flow__node small { display: block; font-family: var(--font-display); font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 0.35rem; } .nm-flow__node b { font-family: var(--font-display); font-size: 0.86rem; font-weight: 600; } .nm-flow__node--result { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; border-color: rgba(132, 18, 241, 0.4); background: rgba(24, 17, 38, 0.9); } .nm-flow__link { flex: none; width: clamp(1rem, 2.4vw, 2.2rem); height: 1px; background: linear-gradient(90deg, rgba(168, 85, 255, 0.55), rgba(168, 85, 255, 0.14)); } /* Flujo 3: renovar (antes / después) */ .nm-flow__renew { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: clamp(1.2rem, 2.6vw, 2.4rem); max-width: 900px; } .nm-flow__renew-card { border: 1px solid var(--border-strong); border-radius: 14px; background: linear-gradient(160deg, rgba(23, 21, 38, 0.94), rgba(12, 12, 20, 0.96)); padding: 1.1rem 1.2rem; display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; box-shadow: 0 22px 46px -26px rgba(0, 0, 0, 0.85); } .nm-flow__renew-card small { font-family: var(--font-display); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-faint); } .nm-flow__renew-card b { font-family: var(--font-display); font-size: 0.95rem; font-weight: 600; } .nm-flow__renew-card span { font-size: 0.8rem; color: var(--text-muted); } .nm-flow__renew-card.is-after { border-color: rgba(126, 226, 161, 0.3); } .nm-flow__renew-action { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; } .nm-flow__renew-action b { font-family: var(--font-display); font-size: 0.78rem; font-weight: 500; color: var(--on-violet); background: var(--violet); border-radius: var(--r-pill); padding: 0.45rem 1.1rem; box-shadow: 0 10px 26px -12px var(--violet-glow); } .nm-flow__renew-action i { width: clamp(2.4rem, 5vw, 4rem); height: 1px; background: linear-gradient(90deg, rgba(168, 85, 255, 0.55), rgba(168, 85, 255, 0.12)); } /* Flujo 4: congelar (línea de tiempo) */ .nm-flow__timeline { max-width: 860px; } .nm-flow__track { display: flex; height: 54px; border-radius: 12px; overflow: hidden; border: 1px solid var(--border-strong); } .nm-flow__seg { position: relative; display: grid; place-items: center; min-width: 0; } .nm-flow__seg small { font-family: var(--font-display); font-size: 0.66rem; font-weight: 500; letter-spacing: 0.06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 92%; } .nm-flow__seg--active { flex: 2.6; background: rgba(132, 18, 241, 0.2); color: #d9c2ff; } .nm-flow__seg--frozen { flex: 1.2; background: repeating-linear-gradient(-45deg, rgba(125, 211, 252, 0.14) 0 8px, rgba(125, 211, 252, 0.05) 8px 16px); color: #8fd3f2; border-inline: 1px dashed rgba(125, 211, 252, 0.4); } .nm-flow__seg--extended { flex: 1.2; background: rgba(132, 18, 241, 0.32); color: #e6d6ff; } .nm-flow__dates { display: flex; justify-content: space-between; margin-top: 0.6rem; font-family: var(--font-display); font-size: 0.72rem; color: var(--text-faint); } .nm-flow__dates .is-strong { color: var(--violet-bright); font-weight: 600; } /* ------------------------------------------------------------------ */ /* 10. DECISIONES UX */ /* ------------------------------------------------------------------ */ .nm-decisions__grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: start; } .nm-decisions__sticky { position: sticky; top: clamp(96px, 16vh, 150px); } .nm-decisions__list { display: flex; flex-direction: column; gap: clamp(2.2rem, 4vw, 3.4rem); } .nm-decision { border-top: 1px solid var(--border); padding-top: 1.6rem; position: relative; } .nm-decision::before { content: ""; position: absolute; top: -1px; left: 0; width: 44px; height: 2px; background: var(--violet); } .nm-decision h3 { font-size: clamp(1.15rem, 1.9vw, 1.45rem); margin-bottom: 0.7rem; } .nm-decision > p { color: var(--text-muted); font-size: 0.97rem; max-width: 58ch; } .nm-decision__compare { margin-top: 1.4rem; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .nm-decision__side { border-radius: 12px; border: 1px solid var(--border); padding: 0.95rem 1rem 1.1rem; background: rgba(14, 13, 22, 0.75); min-width: 0; } .nm-decision__side.is-after { border-color: rgba(132, 18, 241, 0.42); background: linear-gradient(160deg, rgba(26, 19, 42, 0.9), rgba(13, 12, 21, 0.92)); } .nm-decision__side small { display: block; font-family: var(--font-display); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 0.8rem; } .nm-decision__side.is-after small { color: var(--violet-bright); } .nm-decision__mini { display: flex; flex-direction: column; align-items: flex-start; gap: 0.45rem; } .nm-decision__mini b { font-family: var(--font-display); font-size: 0.88rem; font-weight: 600; } .nm-decision__mini span { font-size: 0.76rem; color: var(--text-faint); } .nm-decision__mini i { font-style: normal; font-size: 0.72rem; color: var(--text-faint); border: 1px dashed var(--border-strong); border-radius: 7px; padding: 0.3rem 0.55rem; } .nm-decision__mini--tabs .tabs { display: flex; gap: 0.35rem; } .nm-decision__mini--tabs .tabs i { border: 1px solid var(--border); border-radius: var(--r-pill); padding: 0.28rem 0.6rem; font-size: 0.68rem; color: var(--text-muted); border-style: solid; } .nm-decision__mini--tabs .tabs i.on { background: rgba(132, 18, 241, 0.18); border-color: rgba(132, 18, 241, 0.5); color: var(--text); } .nm-decision__frags { display: flex; flex-wrap: wrap; gap: 0.45rem; } .nm-decision__frags i { font-style: normal; font-size: 0.72rem; color: var(--text-muted); border: 1px dashed var(--border-strong); border-radius: 8px; padding: 0.35rem 0.6rem; transform: rotate(-1.2deg); } .nm-decision__frags i:nth-child(2n) { transform: rotate(1.4deg); } .nm-decision__acts { display: flex; flex-wrap: wrap; gap: 0.45rem; } .nm-decision__acts i { font-style: normal; font-family: var(--font-display); font-size: 0.72rem; font-weight: 500; border: 1px solid var(--border-strong); border-radius: var(--r-pill); padding: 0.35rem 0.75rem; color: var(--text); } .nm-decision__acts i.danger { color: #f79a9a; border-color: rgba(247, 154, 154, 0.4); } .nm-decision__path { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem; font-size: 0.74rem; } .nm-decision__path i { font-style: normal; font-family: var(--font-display); font-weight: 500; border: 1px solid var(--border); border-radius: 8px; padding: 0.32rem 0.6rem; color: var(--text-muted); } .nm-decision__path i.on { color: var(--on-violet); background: var(--violet); border-color: var(--violet); } .nm-decision__path s { text-decoration: none; color: var(--text-faint); } /* ------------------------------------------------------------------ */ /* 11. PERFIL DEL CLIENTE */ /* ------------------------------------------------------------------ */ .nm-profile__head { max-width: 62ch; margin-bottom: clamp(2.5rem, 5vw, 4rem); } .nm-profile__stage { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(1.75rem, 4vw, 4rem); align-items: center; } .nm-profile__mock { border: 1px solid var(--border-strong); border-radius: var(--r-lg); background: linear-gradient(160deg, rgba(24, 21, 40, 0.97), rgba(11, 11, 18, 0.98)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 50px 100px -44px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(132, 18, 241, 0.05); padding: clamp(1.25rem, 2.5vw, 2rem); } .nm-profile__top { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; padding-bottom: 1.1rem; border-bottom: 1px solid var(--border); } .nm-profile__id { flex: 1; min-width: 8rem; } .nm-profile__id b { display: block; font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; } .nm-profile__id small { color: var(--text-faint); font-size: 0.76rem; } .nm-profile__cols { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 1.2rem; margin-top: 1.2rem; } .nm-profile__facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.7rem; } .nm-profile__facts span { border: 1px solid var(--border); border-radius: 10px; padding: 0.6rem 0.7rem; min-width: 0; } .nm-profile__facts small { display: block; font-family: var(--font-display); font-size: 0.58rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 0.25rem; } .nm-profile__facts b { font-family: var(--font-display); font-size: 0.82rem; font-weight: 600; } .nm-profile__history { margin-top: 1rem; border: 1px solid var(--border); border-radius: 10px; padding: 0.8rem 0.9rem; } .nm-profile__history > small, .nm-profile__notes > small { display: block; font-family: var(--font-display); font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 0.7rem; } .nm-profile__event { display: flex; align-items: center; gap: 0.6rem; padding: 0.4rem 0; font-size: 0.78rem; color: var(--text-muted); } .nm-profile__event i { width: 7px; height: 7px; border-radius: 2px; transform: rotate(45deg); background: var(--violet); flex: none; opacity: 0.85; } .nm-profile__event span { flex: 1; min-width: 0; } .nm-profile__event b { font-family: var(--font-display); font-size: 0.68rem; color: var(--text-faint); font-weight: 500; } .nm-profile__notes { margin-top: 1rem; border: 1px dashed var(--border-strong); border-radius: 10px; padding: 0.8rem 0.9rem; } .nm-profile__notes span { font-size: 0.8rem; color: var(--text-muted); font-style: italic; } .nm-profile__actions { border-left: 1px solid var(--border); padding-left: 1.2rem; display: flex; flex-direction: column; gap: 0.55rem; } .nm-profile__actions small { font-family: var(--font-display); font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 0.3rem; } .nm-profile__actions b { font-family: var(--font-display); font-size: 0.8rem; font-weight: 500; border: 1px solid var(--border-strong); border-radius: var(--r-pill); padding: 0.55rem 1rem; text-align: center; } .nm-profile__actions b.is-primary { background: var(--violet); border-color: var(--violet); color: var(--on-violet); } /* Llamadas editoriales numeradas */ .nm-profile__callouts { display: flex; flex-direction: column; gap: 1.4rem; } .nm-callout { position: relative; display: flex; gap: 0.9rem; align-items: flex-start; } .nm-callout::before { content: ""; position: absolute; left: calc(-1 * clamp(1.4rem, 3vw, 2.8rem)); top: 14px; width: clamp(0.8rem, 2vw, 2rem); height: 1px; background: linear-gradient(90deg, transparent, rgba(168, 85, 255, 0.55)); } .nm-callout span { display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; border: 1px solid rgba(132, 18, 241, 0.55); color: var(--violet-bright); font-family: var(--font-display); font-size: 0.78rem; font-weight: 600; } .nm-callout p { color: var(--text-muted); font-size: 0.93rem; } .nm-callout p b { color: var(--text); } /* ------------------------------------------------------------------ */ /* 12. VALIDACIÓN DE ACCESO */ /* ------------------------------------------------------------------ */ .nm-access__head { max-width: 62ch; margin-bottom: clamp(2.2rem, 4vw, 3.2rem); } .nm-access__switch { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--border); border-radius: var(--r-pill); background: rgba(18, 16, 28, 0.85); margin-bottom: 1.6rem; } .nm-access__tab { appearance: none; border: 0; background: transparent; font-family: var(--font-display); font-size: 0.82rem; font-weight: 500; color: var(--text-muted); padding: 0.55rem 1.2rem; border-radius: var(--r-pill); transition: color var(--dur-1) var(--ease), background-color var(--dur-2) var(--ease); } .nm-access__tab:hover { color: var(--text); } .nm-access__tab.is-active { background: var(--violet); color: var(--on-violet); box-shadow: 0 6px 20px -8px var(--violet-glow); } .nm-access__split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 2vw, 1.6rem); } .nm-access__panel { border-radius: var(--r-lg); padding: clamp(1.6rem, 3.5vw, 3rem); border: 1px solid var(--border); background: rgba(12, 12, 19, 0.8); transition: opacity var(--dur-3) var(--ease), transform var(--dur-3) var(--ease), border-color var(--dur-3) var(--ease), box-shadow var(--dur-3) var(--ease); } .nm-access__panel--ok { border-color: rgba(126, 226, 161, 0.35); background: radial-gradient(28rem 16rem at 20% 0%, rgba(74, 222, 128, 0.09), transparent 70%), rgba(12, 15, 13, 0.85); } .nm-access__panel--off { border-color: rgba(247, 154, 154, 0.3); background: radial-gradient(28rem 16rem at 80% 0%, rgba(248, 113, 113, 0.08), transparent 70%), rgba(16, 12, 12, 0.85); } /* Énfasis según el estado elegido (ambos siguen legibles) */ .nm-access__split[data-access-state="ok"] .nm-access__panel--off, .nm-access__split[data-access-state="off"] .nm-access__panel--ok { opacity: 0.45; transform: scale(0.985); } .nm-access__split[data-access-state="ok"] .nm-access__panel--ok { box-shadow: 0 34px 80px -44px rgba(74, 222, 128, 0.35); } .nm-access__split[data-access-state="off"] .nm-access__panel--off { box-shadow: 0 34px 80px -44px rgba(248, 113, 113, 0.3); } .nm-access__icon { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; margin-bottom: 1.2rem; } .nm-access__panel--ok .nm-access__icon { color: #7ee2a1; background: rgba(74, 222, 128, 0.12); border: 1px solid rgba(126, 226, 161, 0.35); } .nm-access__panel--off .nm-access__icon { color: #f79a9a; background: rgba(248, 113, 113, 0.1); border: 1px solid rgba(247, 154, 154, 0.32); } .nm-access__panel b { display: block; font-family: var(--font-display); font-size: clamp(1.3rem, 2.4vw, 1.8rem); font-weight: 600; letter-spacing: -0.01em; margin-bottom: 1.1rem; } .nm-access__panel--ok b { color: #b8f4cd; } .nm-access__panel--off b { color: #ffc9c9; } .nm-access__panel ul { display: flex; flex-direction: column; gap: 0.55rem; } .nm-access__panel li { position: relative; padding-left: 1.3rem; color: var(--text-muted); font-size: 0.94rem; } .nm-access__panel li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 7px; height: 7px; border-radius: 2px; transform: rotate(45deg); } .nm-access__panel--ok li::before { background: rgba(126, 226, 161, 0.75); } .nm-access__panel--off li::before { background: rgba(247, 154, 154, 0.7); } /* ------------------------------------------------------------------ */ /* 13. ROLES Y PERMISOS */ /* ------------------------------------------------------------------ */ .nm-roles__grid { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(2.5rem, 5vw, 5rem); align-items: center; } .nm-roles__copy > p:last-child { margin-top: 1.2rem; color: var(--text-muted); font-size: 1rem; max-width: 56ch; } .nm-perms { border: 1px solid var(--border-strong); border-radius: var(--r-lg); background: linear-gradient(160deg, rgba(24, 21, 40, 0.97), rgba(11, 11, 18, 0.98)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 44px 90px -40px rgba(0, 0, 0, 0.9); overflow: hidden; } .nm-perms__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.4rem; border-bottom: 1px solid var(--border); background: rgba(255, 255, 255, 0.02); } .nm-perms__head small { display: block; font-family: var(--font-display); font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 0.2rem; } .nm-perms__head b { font-family: var(--font-display); font-size: 0.95rem; font-weight: 600; } .nm-perms__body { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); } .nm-perms__cats { padding: 1.2rem 1.4rem; display: flex; flex-direction: column; gap: 1.1rem; border-right: 1px solid var(--border); } .nm-perms__cat small { display: block; font-family: var(--font-display); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--violet-bright); margin-bottom: 0.55rem; } .nm-perms__cat span { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; color: var(--text-faint); margin: 0 0.9rem 0.4rem 0; } .nm-perms__cat span i { width: 15px; height: 15px; flex: none; border-radius: 4px; border: 1px solid var(--border-strong); position: relative; } .nm-perms__cat span.is-on { color: var(--text); } .nm-perms__cat span.is-on i { background: var(--violet); border-color: var(--violet); } .nm-perms__cat span.is-on i::after { content: ""; position: absolute; inset: 3px 3px 5px 3px; border-left: 1.6px solid #fff; border-bottom: 1.6px solid #fff; transform: rotate(-45deg) translate(0.5px, -1px); } .nm-perms__result { padding: 1.2rem 1.4rem; background: rgba(132, 18, 241, 0.04); } .nm-perms__result small { display: block; font-family: var(--font-display); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 0.8rem; } .nm-perms__result ul { display: flex; flex-direction: column; gap: 0.4rem; } .nm-perms__result li { font-family: var(--font-display); font-size: 0.8rem; font-weight: 500; border-radius: 8px; padding: 0.5rem 0.7rem; display: flex; align-items: center; gap: 0.5rem; } .nm-perms__result li::before { content: ""; width: 7px; height: 7px; border-radius: 2px; transform: rotate(45deg); flex: none; } .nm-perms__result li.is-on { color: var(--text); background: rgba(132, 18, 241, 0.12); } .nm-perms__result li.is-on::before { background: var(--violet-bright); } .nm-perms__result li.is-off { color: var(--text-faint); text-decoration: line-through; text-decoration-color: rgba(255, 255, 255, 0.25); } .nm-perms__result li.is-off::before { background: rgba(255, 255, 255, 0.14); } /* ------------------------------------------------------------------ */ /* 14. MULTIEMPRESA */ /* ------------------------------------------------------------------ */ .nm-tenant__head { max-width: 64ch; margin-bottom: clamp(2.2rem, 4vw, 3.2rem); } .nm-tenant__platform { border: 1px solid var(--border-strong); border-radius: var(--r-lg); background: rgba(11, 11, 18, 0.72); overflow: hidden; } .nm-tenant__platform > header { display: flex; align-items: center; gap: 0.75rem; padding: 1.1rem 1.5rem; border-bottom: 1px solid var(--border); background: rgba(255, 255, 255, 0.02); font-family: var(--font-display); } .nm-tenant__platform > header b { font-weight: 600; font-size: 0.95rem; } .nm-tenant__platform > header small { color: var(--text-faint); font-size: 0.74rem; margin-left: auto; } .nm-tenant__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2.5vw, 2rem); padding: clamp(1.4rem, 3vw, 2.4rem); } .nm-tenant__col { border: 1px solid rgba(132, 18, 241, 0.35); border-radius: 14px; padding: 1.1rem; background: linear-gradient(165deg, rgba(26, 20, 44, 0.85), rgba(12, 11, 20, 0.9)); display: flex; flex-direction: column; gap: 0.45rem; } .nm-tenant__col.is-dim { opacity: 0.65; border-style: dashed; } .nm-tenant__col b { font-family: var(--font-display); font-size: 0.92rem; font-weight: 600; padding-bottom: 0.7rem; margin-bottom: 0.3rem; border-bottom: 1px solid var(--border); } .nm-tenant__col span { font-family: var(--font-display); font-size: 0.76rem; font-weight: 500; color: var(--text-muted); background: rgba(255, 255, 255, 0.03); border-radius: 8px; padding: 0.42rem 0.6rem; display: flex; align-items: center; gap: 0.5rem; } .nm-tenant__col span::before { content: ""; width: 6px; height: 6px; border-radius: 2px; transform: rotate(45deg); background: var(--violet); opacity: 0.7; } .nm-tenant__col small { margin-top: 0.6rem; font-family: var(--font-display); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--violet-bright); } /* ------------------------------------------------------------------ */ /* 15. SISTEMA VISUAL */ /* ------------------------------------------------------------------ */ .nm-ds__head { max-width: 62ch; margin-bottom: clamp(2.2rem, 4vw, 3.2rem); } .nm-ds__table { display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(0.9rem, 1.6vw, 1.4rem); } .nm-ds__cell { border: 1px solid var(--border); border-radius: var(--r-md); background: rgba(12, 12, 19, 0.72); padding: 1.3rem 1.4rem; min-width: 0; display: flex; flex-direction: column; gap: 0.8rem; align-items: flex-start; } .nm-ds__cell > small { font-family: var(--font-display); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 0.2rem; } .nm-ds__cell--states { grid-column: span 4; } .nm-ds__cell--type { grid-column: span 2; grid-row: span 2; } .nm-ds__cell--buttons { grid-column: span 2; } .nm-ds__cell--input { grid-column: span 2; } .nm-ds__cell--tablefrag { grid-column: span 4; } .nm-ds__cell--nav { grid-column: span 2; } .nm-ds__row { display: flex; flex-wrap: wrap; gap: 0.55rem; } .nm-ds__cell--type .t1 { font-family: var(--font-display); font-size: 1.35rem; font-weight: 600; } .nm-ds__cell--type .t2 { font-family: var(--font-display); font-size: 1rem; font-weight: 500; color: var(--text-muted); } .nm-ds__cell--type .t3 { font-size: 0.85rem; font-weight: 400; color: var(--text-faint); } .nm-ds__cell--input { gap: 0.7rem; } .nm-ds__cell--input .nm-ui-search, .nm-ds__cell--input .nm-ui-field { width: 100%; } .nm-ds__tr { width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr) auto; align-items: center; gap: 0.8rem; border: 1px solid var(--border); border-radius: 10px; padding: 0.55rem 0.8rem; } .nm-ds__tr b { font-family: var(--font-display); font-size: 0.84rem; font-weight: 500; } .nm-ds__tr i { font-style: normal; font-size: 0.78rem; color: var(--text-faint); } .nm-ds__side { width: 100%; display: flex; flex-direction: column; gap: 0.35rem; } .nm-ds__side span { display: flex; align-items: center; gap: 0.55rem; font-family: var(--font-display); font-size: 0.8rem; font-weight: 500; color: var(--text-faint); border-radius: 8px; padding: 0.45rem 0.6rem; } .nm-ds__side span i { width: 9px; height: 9px; border-radius: 3px; background: rgba(255, 255, 255, 0.12); } .nm-ds__side span.is-on { color: var(--text); background: rgba(132, 18, 241, 0.14); } .nm-ds__side span.is-on i { background: var(--violet-bright); } /* ------------------------------------------------------------------ */ /* 16. DISEÑO Y DESARROLLO */ /* ------------------------------------------------------------------ */ .nm-build__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2.5rem, 5vw, 5rem); align-items: center; } .nm-build__copy > p:last-child { margin-top: 1.2rem; color: var(--text-muted); font-size: 1rem; max-width: 56ch; } .nm-build__panels { display: flex; flex-direction: column; gap: 1rem; } .nm-build__panel { border: 1px solid var(--border-strong); border-radius: 14px; background: linear-gradient(160deg, rgba(22, 20, 36, 0.95), rgba(12, 12, 20, 0.96)); padding: 1.1rem 1.3rem; box-shadow: 0 22px 48px -28px rgba(0, 0, 0, 0.85); } .nm-build__panel:nth-child(2) { margin-left: clamp(1rem, 3vw, 2.6rem); } .nm-build__panel:nth-child(3) { margin-left: clamp(0.4rem, 1.4vw, 1.2rem); } .nm-build__panel > small { display: block; font-family: var(--font-display); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--violet-bright); margin-bottom: 0.75rem; } .nm-build__ui { display: flex; flex-direction: column; align-items: flex-start; gap: 0.55rem; } .nm-build__ui span { font-size: 0.82rem; color: var(--text-muted); } .nm-build__empty { font-style: normal; font-size: 0.76rem; color: var(--text-faint); border: 1px dashed var(--border-strong); border-radius: 9px; padding: 0.5rem 0.8rem; width: 100%; } .nm-build__rules { display: flex; flex-direction: column; gap: 0.45rem; } .nm-build__rules li { position: relative; padding-left: 1.2rem; font-size: 0.85rem; color: var(--text-muted); font-family: var(--font-display); } .nm-build__rules li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 7px; height: 7px; border-radius: 2px; transform: rotate(45deg); background: var(--violet); } .nm-build__stack { display: flex; flex-direction: column; gap: 0.4rem; } .nm-build__stack span { font-family: var(--font-display); font-size: 0.78rem; font-weight: 500; color: var(--text-muted); border: 1px solid var(--border); border-radius: 8px; padding: 0.5rem 0.7rem; } /* ------------------------------------------------------------------ */ /* 17. DESAFÍOS */ /* ------------------------------------------------------------------ */ .nm-challenges__head { margin-bottom: clamp(2rem, 4vw, 3rem); } .nm-challenges__list { display: flex; flex-direction: column; } .nm-challenge { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4rem); padding: clamp(1.5rem, 2.6vw, 2.2rem) 0; border-top: 1px solid var(--border); } .nm-challenge:last-child { border-bottom: 1px solid var(--border); } .nm-challenge small { display: block; font-family: var(--font-display); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 0.5rem; } .nm-challenge__problem small { color: var(--text-faint); } .nm-challenge__decision small { color: var(--violet-bright); } .nm-challenge p { font-size: 0.98rem; max-width: 52ch; } .nm-challenge__problem p { color: var(--text-muted); } .nm-challenge__decision { position: relative; padding-left: clamp(1.2rem, 2.5vw, 2rem); } .nm-challenge__decision::before { content: ""; position: absolute; left: 0; top: 0.3rem; bottom: 0.3rem; width: 1px; background: linear-gradient(180deg, var(--violet), transparent); } /* ------------------------------------------------------------------ */ /* 18. ESTADO ACTUAL */ /* ------------------------------------------------------------------ */ .nm-status__head { max-width: 62ch; margin-bottom: clamp(2.2rem, 4vw, 3.2rem); } .nm-status__board { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.6rem); } .nm-status__col { border: 1px solid var(--border); border-radius: var(--r-lg); padding: clamp(1.4rem, 2.5vw, 2rem); background: rgba(12, 12, 19, 0.7); } .nm-status__col h3 { display: flex; align-items: center; gap: 0.6rem; font-size: 1.1rem; margin-bottom: 1.2rem; } .nm-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; } .nm-dot--built { background: #7ee2a1; box-shadow: 0 0 12px rgba(126, 226, 161, 0.5); } .nm-dot--wip { background: var(--violet-bright); box-shadow: 0 0 12px var(--violet-glow); } .nm-dot--next { background: rgba(255, 255, 255, 0.35); } .nm-status__col ul { display: flex; flex-direction: column; gap: 0.5rem; } .nm-status__col li { position: relative; padding-left: 1.15rem; color: var(--text-muted); font-size: 0.93rem; } .nm-status__col li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 5px; height: 5px; border-radius: 50%; background: rgba(255, 255, 255, 0.28); } .nm-status__col p { color: var(--text-muted); font-size: 0.95rem; } .nm-status__col:nth-child(2) { border-style: dashed; } /* ------------------------------------------------------------------ */ /* 19. APRENDIZAJES */ /* ------------------------------------------------------------------ */ .nm-learnings__head { margin-bottom: clamp(2.2rem, 4vw, 3.2rem); } .nm-learnings__list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(2rem, 5vw, 5rem); } .nm-learnings__list li { display: flex; gap: 1.2rem; align-items: flex-start; padding: clamp(1.4rem, 2.4vw, 2rem) 0; border-top: 1px solid var(--border); } .nm-learnings__list span { font-family: var(--font-display); font-size: 0.85rem; font-weight: 600; color: var(--violet-bright); letter-spacing: 0.08em; padding-top: 0.2rem; flex: none; } .nm-learnings__list p { color: var(--text-muted); font-size: 1rem; max-width: 46ch; } .nm-learnings__list p::first-line { color: var(--text); } /* ------------------------------------------------------------------ */ /* 20. CTA FINAL */ /* ------------------------------------------------------------------ */ .nm-closing { overflow: hidden; padding: clamp(6rem, 12vw, 10rem) 0; } .nm-closing__aura { position: absolute; top: 50%; left: 50%; width: 62vw; max-width: 720px; aspect-ratio: 1; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(132, 18, 241, 0.16), transparent 70%); pointer-events: none; } .nm-closing__inner { max-width: 760px; text-align: center; position: relative; } .nm-closing__inner h2 { font-size: clamp(2rem, 5vw, 3.4rem); max-width: none; margin-bottom: 1.3rem; } .nm-closing__inner p { color: var(--text-muted); font-size: var(--fs-lead); max-width: 46ch; margin: 0 auto 2.4rem; } .nm-closing__actions { display: flex; justify-content: center; gap: 0.9rem; flex-wrap: wrap; } /* ------------------------------------------------------------------ */ /* 21. RESPONSIVE */ /* ------------------------------------------------------------------ */ /* Tablet grande */ @media (max-width: 1024px) { .nm-hero.hero-viewport { min-height: auto; padding-block: clamp(2.5rem, 8vw, 4rem) var(--section-y); } .nm-hero__grid { grid-template-columns: 1fr; gap: clamp(2.5rem, 6vw, 4rem); } .nm-hero-scene { margin-inline: auto; max-width: 560px; } .nm-hero .nm-frame-note { text-align: center; } .nm-hero__scrollhint { display: none; } .nm-summary__grid { grid-template-columns: 1fr; } .nm-summary__quote { border-left-width: 2px; max-width: 40ch; } .nm-problem__list { grid-template-columns: repeat(2, 1fr); } .nm-users__grid, .nm-roles__grid, .nm-build__grid { grid-template-columns: 1fr; } .nm-users__visual { max-width: 640px; } .nm-goal { grid-template-columns: auto 1fr; } .nm-goal__demo { grid-column: 2; justify-content: flex-start; } .nm-arch__map { grid-template-columns: 1fr; } .nm-decisions__grid { grid-template-columns: 1fr; } .nm-decisions__sticky { position: static; } .nm-profile__stage { grid-template-columns: 1fr; } .nm-profile__callouts { flex-direction: row; flex-wrap: wrap; gap: 1.2rem 2rem; } .nm-profile__callouts .nm-callout { flex-basis: calc(50% - 1rem); } .nm-callout::before { display: none; } .nm-status__board { grid-template-columns: 1fr; } .nm-learnings__list { grid-template-columns: 1fr; } .nm-ds__cell--states { grid-column: span 6; } .nm-ds__cell--type { grid-column: span 3; grid-row: auto; } .nm-ds__cell--buttons { grid-column: span 3; } .nm-ds__cell--input { grid-column: span 3; } .nm-ds__cell--tablefrag { grid-column: span 6; } .nm-ds__cell--nav { grid-column: span 3; } } /* Móvil grande / tablet pequeña */ @media (max-width: 760px) { .nm-hero__meta { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.5rem; } .nm-beforeafter { grid-template-columns: 1fr; } .nm-beforeafter__arrow i { transform: rotate(90deg); margin-block: 0.4rem; } .nm-scatter { min-height: 0; display: flex; flex-direction: column; gap: 0.8rem; } .nm-scatter > div { position: static; width: 100% !important; transform: none; } .nm-journey__strip { grid-template-columns: 1fr; gap: 0.7rem; } .nm-journey__frag { transform: none; } .nm-journey__merge { grid-template-columns: 1fr; height: 2rem; } .nm-journey__merge i { display: none; } .nm-journey__merge i:nth-child(3) { display: block; justify-self: center; transform: none; } .nm-journey__system small { margin-left: 0; } .nm-problem__list { grid-template-columns: 1fr; } .nm-views { min-height: 0; display: flex; flex-direction: column; gap: 1rem; } .nm-views__panel { position: static; width: 100% !important; } .nm-goal { grid-template-columns: 1fr; gap: 1rem; } .nm-goal__num { text-align: left; } .nm-goal__demo { grid-column: auto; } .nm-flow__screens { grid-template-columns: 1fr; gap: 1.1rem; } .nm-flow__screen:not(:last-child)::after { top: auto; bottom: -1.05rem; right: auto; left: 50%; width: 1px; height: 0.95rem; background: linear-gradient(180deg, rgba(168, 85, 255, 0.6), rgba(168, 85, 255, 0.15)); } .nm-flow__pipeline { flex-direction: column; align-items: stretch; } .nm-flow__link { width: 1px; height: 1.1rem; margin-inline: auto; background: linear-gradient(180deg, rgba(168, 85, 255, 0.55), rgba(168, 85, 255, 0.14)); } .nm-flow__node--result { flex-direction: row; } .nm-flow__renew { grid-template-columns: 1fr; } .nm-flow__renew-action { flex-direction: row; justify-content: center; } .nm-flow__renew-action i { width: 1.6rem; } .nm-flow__seg small { font-size: 0.56rem; } .nm-decision__compare { grid-template-columns: 1fr; } .nm-profile__cols { grid-template-columns: 1fr; } .nm-profile__actions { border-left: 0; padding-left: 0; border-top: 1px solid var(--border); padding-top: 1rem; } .nm-profile__facts { grid-template-columns: 1fr 1fr; } .nm-profile__callouts .nm-callout { flex-basis: 100%; } .nm-access__split { grid-template-columns: 1fr; } /* En móvil ambos estados se muestran en secuencia; el conmutador sobra */ .nm-access__switch { display: none; } .nm-access__split[data-access-state] .nm-access__panel { opacity: 1; transform: none; } .nm-perms__body { grid-template-columns: 1fr; } .nm-perms__cats { border-right: 0; border-bottom: 1px solid var(--border); } .nm-tenant__cols { grid-template-columns: 1fr; } .nm-tenant__platform > header small { margin-left: 0; width: 100%; } .nm-tenant__platform > header { flex-wrap: wrap; } .nm-ds__cell--type, .nm-ds__cell--buttons, .nm-ds__cell--input, .nm-ds__cell--nav { grid-column: span 6; } .nm-ds__tr { grid-template-columns: auto minmax(0, 1fr) auto; } .nm-ds__tr i { display: none; } .nm-challenge { grid-template-columns: 1fr; gap: 1.1rem; } .nm-challenge__decision { padding-left: 1.2rem; } .nm-build__panel:nth-child(n) { margin-left: 0; } } @media (max-width: 560px) { .nm-hero__title, .nm-hero__lead { overflow-wrap: anywhere; } .nm-hero-layer--profile { left: 0; } .nm-hero-layer--access { right: 0; } .nm-hero-card__rows { flex-wrap: wrap; gap: 0.6rem; } .nm-console__side { width: 34%; } .nm-console__side li { font-size: 0.6rem; } .nm-console__kpis { grid-template-columns: repeat(2, 1fr); } .nm-console__kpis > div:nth-child(3) { display: none; } .nm-console__kpis b { font-size: 0.95rem; } .nm-hero__actions .btn { flex: 1 1 auto; } .nm-closing__actions .btn { width: 100%; } } /* ------------------------------------------------------------------ */ /* 22. PREFERENCIAS DE MOVIMIENTO */ /* ------------------------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { .nm-hero-layer { transform: none !important; } .nm-hero-access__pulse, .nm-hero__scrollhint span { animation: none !important; } .nm-access__panel { transition: none; } }