/* Demos públicas: extensión ligera del tema claro existente de NexLuro. */
.nl-demos { min-height:100vh; display:flex; flex-direction:column; background:#fff; }
.nl-demos .wrap { width:100%; max-width:1320px; margin-inline:auto; padding-inline:32px; }
.demo-menu { display:flex; align-items:center; gap:clamp(14px,2vw,28px); }
.demo-menu a:not(.btn) { min-height:44px; display:inline-flex; align-items:center; font-size:15px; font-weight:650; }
.demo-menu a[aria-current="page"] { color:#6230cf; }
.demo-menu .btn { min-height:46px; padding:10px 18px; white-space:nowrap; }
.demo-menu-toggle { display:none; min-width:48px; min-height:48px; border:1px solid var(--line); border-radius:12px; background:#fff; color:var(--ink); font-size:23px; }
.demo-main { width:min(100% - 48px,1180px); margin:0 auto; flex:1; padding:34px 0 64px; }
.demo-intro { max-width:760px; margin:0 0 30px; }
.demo-intro h1 { max-width:20ch; margin-bottom:14px; font-size:clamp(34px,4vw,52px); }
.demo-intro>p:not(.kicker) { max-width:68ch; color:var(--muted); }
.demo-intro .kicker,.demo-result-card .kicker,.demo-next .kicker { margin-bottom:8px; color:#6230cf; font-size:13px; font-weight:750; letter-spacing:.04em; text-transform:uppercase; }
.demo-note { padding:12px 16px; border-left:4px solid var(--cyan); border-radius:0 10px 10px 0; background:var(--soft); color:var(--ink)!important; font-size:15px; }
.demo-catalog { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.demo-card,.demo-input-card,.demo-result-card { min-width:0; border:1px solid var(--line); border-radius:18px; background:var(--soft2); box-shadow:var(--shadow); }
.demo-card { display:flex; flex-direction:column; padding:22px; }
.demo-card-top { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:18px; }
.demo-icon { display:grid; min-width:44px; height:44px; place-items:center; padding:0 8px; border-radius:12px; background:#eee9fb; color:#4e27a9; font-size:13px; font-weight:800; }
.demo-mode { display:inline-flex; min-height:32px; align-items:center; padding:5px 10px; border:1px solid var(--line); border-radius:999px; background:#fff; color:#454d61; font-size:12px; font-weight:650; }
.demo-card h2 { margin-bottom:9px; font-size:22px; letter-spacing:-.025em; }
.demo-card p { margin-bottom:20px; color:var(--muted); font-size:15px; }
.demo-card .btn { width:100%; min-height:48px; margin-top:auto; padding-inline:14px; }
.demo-footnote,.demo-disclaimer { margin:22px 0 0; color:var(--muted); font-size:14px; }
.demo-crumb { display:flex; align-items:center; gap:9px; min-height:44px; margin-bottom:16px; color:var(--muted); font-size:14px; }
.demo-crumb a,.demo-crumb span { display:inline-flex; min-height:44px; align-items:center; }
.demo-crumb a { color:#4e27a9; text-decoration:underline; text-underline-offset:3px; }
.demo-intro-service { margin-bottom:24px; }
.demo-intro-service h1 { font-size:clamp(32px,3.8vw,46px); }
.demo-workspace { display:grid; grid-template-columns:minmax(300px,.84fr) minmax(0,1.16fr); align-items:start; gap:20px; }
.demo-input-card,.demo-result-card { padding:24px; }
.demo-card-heading { display:flex; align-items:flex-start; gap:13px; margin-bottom:18px; }
.demo-card-heading h2 { margin:0 0 5px; font-size:22px; }
.demo-card-heading p:not(.kicker) { margin:0; color:var(--muted); font-size:14px; }
.demo-step { display:grid; flex:0 0 36px; height:36px; place-items:center; border-radius:50%; background:#eee9fb; color:#4e27a9; font-size:14px; font-weight:800; }
.demo-step-result { background:#e5f8fc; color:#086d83; }
.demo-form { margin:0; }
.demo-fields { display:grid; gap:14px; }
.demo-field { display:grid; gap:6px; font-size:15px; font-weight:650; }
.demo-field small { color:var(--muted); font-size:13px; font-weight:400; }
.demo-field select,.demo-field input,.demo-field textarea,.demo-copy { width:100%; min-height:46px; padding:10px 12px; border:1px solid #bfc5d2; border-radius:10px; background:#fff; color:var(--ink); font-size:16px; line-height:1.4; }
.demo-field textarea,.demo-copy { min-height:100px; resize:vertical; }
.demo-field select:focus-visible,.demo-field input:focus-visible,.demo-field textarea:focus-visible,.demo-copy:focus-visible { outline:3px solid #6230cf; outline-offset:2px; }
.demo-field details { padding:12px; border:1px solid var(--line); border-radius:12px; background:#fff; }
.demo-field summary { min-height:24px; cursor:pointer; color:#4e27a9; font-size:14px; font-weight:700; }
.demo-field details .demo-field-control { margin-top:13px; }
.demo-actions { display:grid; gap:10px; margin-top:20px; }
.demo-actions .btn { width:100%; min-height:50px; }
.demo-status { min-height:1.5em; margin:10px 0 0; color:#344054; font-size:14px; }
.demo-status[data-kind="error"] { color:#9f1d20; font-weight:650; }
.demo-status[data-kind="info"] { color:#354052; }
.demo-result-card { background:#fff; }
.demo-result-card .demo-card-heading { align-items:center; }
.demo-result-card .kicker { margin-bottom:5px; }
.demo-result-label { display:inline-flex; min-height:32px; align-items:center; margin:0 0 16px 49px; padding:5px 10px; border-radius:999px; background:#eff7f4; color:#175b41; font-size:13px; font-weight:700; }
.demo-result { display:grid; min-width:0; width:100%; gap:14px; }
.demo-result-section { min-width:0; max-width:100%; padding:14px; border:1px solid var(--line); border-radius:12px; background:var(--soft2); overflow-wrap:anywhere; }
.demo-result-section h3 { margin:0 0 8px; font-size:16px; letter-spacing:-.01em; }
.demo-result-section p { margin:0; color:#30384b; font-size:15px; white-space:pre-wrap; }
.demo-result-section ul { margin:0; padding-left:21px; color:#30384b; font-size:15px; }
.demo-result-section li+li { margin-top:6px; }
.demo-table-wrap { width:100%; min-width:0; max-width:100%; overflow-x:auto; overscroll-behavior-inline:contain; }
.demo-result-section table { width:100%; border-collapse:collapse; font-size:14px; }
.demo-result-section th,.demo-result-section td { min-width:110px; padding:8px 10px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
.demo-result-section th { background:#f2effa; font-weight:700; }
.demo-placeholder { margin:0; padding:18px; border:1px dashed #b8bfcd; border-radius:12px; color:var(--muted); text-align:center; }
.demo-live-link { display:flex; min-height:44px; align-items:center; margin-top:16px; color:#4e27a9; font-weight:700; text-decoration:underline; text-underline-offset:3px; }
.demo-live-link[hidden] { display:none; }
.demo-copy-label { display:block; margin:18px 0 7px; font-size:14px; font-weight:650; }
.demo-copy-label[hidden],.demo-copy[hidden],.demo-copy-button[hidden] { display:none; }
.demo-copy-button { min-height:46px; margin-top:9px; }
.demo-next { display:flex; align-items:center; justify-content:space-between; gap:26px; margin-top:28px; padding:23px 26px; border:1px solid #d8d1ef; border-radius:18px; background:var(--soft); }
.demo-next h2 { margin:0 0 7px; font-size:24px; }
.demo-next p:not(.kicker) { max-width:68ch; margin:0; color:var(--muted); font-size:15px; }
.demo-next .btn { flex:0 0 auto; min-height:50px; }
.demo-footer { padding:20px 0; border-top:1px solid var(--line); background:var(--soft2); }
.demo-footer .wrap { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.demo-footer .marca { font-size:21px; }
.demo-footer .marca img { width:32px; height:32px; }
.demo-footer nav { display:flex; flex-wrap:wrap; gap:20px; font-size:14px; }
.demo-footer nav a { min-height:44px; display:inline-flex; align-items:center; text-decoration:underline; text-underline-offset:3px; }
.demo-noscript { margin:12px; padding:14px; border:1px solid #bd4d4d; border-radius:10px; background:#fff8f8; }
.demo-noscript a { color:#4e27a9; text-decoration:underline; }

@media (max-width:980px) {
  .nl-demos .barra-in { min-height:72px; flex-wrap:wrap; gap:0; }
  .demo-menu-toggle { display:inline-flex; align-items:center; justify-content:center; margin-left:auto; }
  .demo-menu { display:none; width:100%; padding:8px 0 18px; }
  .demo-menu.is-open { display:grid; grid-template-columns:1fr; gap:3px; }
  .demo-menu a:not(.btn) { min-height:46px; padding:0 12px; border-radius:9px; }
  .demo-menu a:not(.btn):hover,.demo-menu a[aria-current="page"] { background:var(--soft); }
  .demo-menu .btn { margin-top:7px; }
  .demo-catalog { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .demo-workspace { grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); }
}
@media (max-width:700px) {
  .nl-demos .wrap { padding-inline:20px; }
  .demo-main { width:min(100% - 36px,560px); padding-top:25px; }
  .demo-intro { margin-bottom:23px; }
  .demo-intro h1 { font-size:clamp(32px,9vw,43px); }
  .demo-catalog,.demo-workspace { grid-template-columns:1fr; }
  .demo-card { padding:19px; }
  .demo-workspace { gap:14px; }
  .demo-input-card,.demo-result-card { padding:19px; }
  .demo-result-label { margin-left:0; }
  .demo-next { align-items:stretch; flex-direction:column; gap:17px; padding:20px; }
  .demo-next .btn { width:100%; }
  .demo-footer .wrap { align-items:flex-start; }
  .demo-footer nav { justify-content:flex-end; gap:10px; }
}
@media (max-width:420px) {
  .nl-demos .wrap { padding-inline:16px; }
  .demo-main { width:calc(100% - 28px); }
  .demo-card-top { align-items:flex-start; flex-direction:column; }
  .demo-mode { white-space:normal; }
  .demo-footer .wrap { flex-direction:column; }
  .demo-footer nav { justify-content:flex-start; }
}
@media (prefers-reduced-motion:reduce) {
  .nl-demos *, .nl-demos *::before, .nl-demos *::after { scroll-behavior:auto!important; transition:none!important; animation:none!important; }
}