:root {
  color-scheme: light;
  --nc-ink-950: #061a32;
  --nc-ink-900: #082441;
  --nc-ink-800: #0b315d;
  --nc-brand-700: #0756ba;
  --nc-brand-600: #0767df;
  --nc-brand-100: #e8f2ff;
  --nc-sky-500: #16a5e5;
  --nc-breaking-600: #c81e35;
  --nc-success-700: #087a52;
  --nc-warning-700: #a15c00;
  --nc-danger-700: #b42335;
  --nc-canvas: #f5f7fa;
  --nc-surface: #ffffff;
  --nc-surface-muted: #eef3f7;
  --nc-border: #d8e1ea;
  --nc-border-strong: #b7c5d3;
  --nc-text: #0b1f3a;
  --nc-text-muted: #526477;
  --nc-focus: #21a6df;
  --nc-shadow-sm: 0 1px 2px rgb(6 26 50 / 8%), 0 5px 16px rgb(6 26 50 / 5%);
  --nc-shadow-md: 0 16px 40px rgb(6 26 50 / 11%);
  --nc-shadow-lg: 0 26px 70px rgb(6 26 50 / 16%);
  --nc-radius-xs: 4px;
  --nc-radius-sm: 8px;
  --nc-radius-md: 12px;
  --nc-radius-lg: 16px;
  --nc-radius-pill: 999px;
  --nc-space-1: 0.25rem;
  --nc-space-2: 0.5rem;
  --nc-space-3: 0.75rem;
  --nc-space-4: 1rem;
  --nc-space-6: 1.5rem;
  --nc-space-8: 2rem;
  --nc-space-12: 3rem;
  --nc-space-16: 4rem;
  --nc-space-24: 6rem;
  --nc-content: 76rem;
  --nc-reading: 68ch;
  --nc-font-ui: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --nc-font-editorial: Georgia, "Times New Roman", serif;
  --nc-ease: cubic-bezier(.2,.7,.2,1);
  --nc-motion-fast: 160ms;
  --nc-motion: 220ms;
  /* Alias semánticos listos para un futuro tema oscuro; hoy apuntan al tema claro. */
  --nc-theme-canvas: var(--nc-canvas);
  --nc-theme-surface: var(--nc-surface);
  --nc-theme-surface-muted: var(--nc-surface-muted);
  --nc-theme-text: var(--nc-text);
  --nc-theme-text-muted: var(--nc-text-muted);
  --nc-theme-border: var(--nc-border);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 6.5rem;
  background: var(--nc-canvas);
}

body.public-page {
  margin: 0;
  overflow-x: clip;
  background: var(--nc-canvas);
  color: var(--nc-text);
  font-family: var(--nc-font-ui);
  font-size: 1rem;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body.public-page img,
body.public-page svg,
body.public-page video { max-width: 100%; }

body.public-page a {
  color: inherit;
  text-decoration-thickness: .08em;
  text-underline-offset: .16em;
}

body.public-page button,
body.public-page input,
body.public-page select,
body.public-page textarea { font: inherit; }

body.public-page :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--nc-focus);
  outline-offset: 3px;
}

body.public-page :where(button, input, select, textarea):disabled {
  cursor: not-allowed;
  opacity: .6;
}

.shell {
  width: min(calc(100% - 2rem), var(--nc-content));
  margin-inline: auto;
}

.section-space { padding-block: clamp(2.5rem, 5vw, 5rem); }

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.skip-link {
  position: fixed;
  z-index: 10000;
  inset: .75rem auto auto .75rem;
  padding: .7rem 1rem;
  border-radius: var(--nc-radius-sm);
  background: var(--nc-ink-950);
  color: #fff;
  font-weight: 800;
  transform: translateY(-180%);
  transition: transform var(--nc-motion-fast) var(--nc-ease);
}

.skip-link:focus { transform: translateY(0); }

.button,
.nc-button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .7rem 1.1rem;
  border: 1px solid var(--nc-brand-600);
  border-radius: var(--nc-radius-sm);
  background: var(--nc-brand-600);
  color: #fff;
  font-weight: 750;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--nc-motion-fast), border-color var(--nc-motion-fast), transform var(--nc-motion-fast);
}

.button:hover,
.nc-button:hover { background: var(--nc-brand-700); border-color: var(--nc-brand-700); }
.button:active,
.nc-button:active { transform: translateY(1px); }
.button-muted { background: var(--nc-surface); border-color: var(--nc-border-strong); color: var(--nc-text); }
.button-muted:hover { background: var(--nc-surface-muted); border-color: var(--nc-brand-600); }

.kicker,
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: var(--nc-brand-700);
  font-size: .73rem;
  font-weight: 850;
  letter-spacing: .105em;
  line-height: 1.35;
  text-transform: uppercase;
}

.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: clamp(1.4rem, 3vw, 2.4rem);
}

.section-heading h2,
.page-hero h1 {
  margin: .3rem 0 0;
  color: var(--nc-ink-950);
  font-family: var(--nc-font-editorial);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.06;
}

.section-heading h2 { font-size: clamp(1.75rem, 4vw, 3rem); }
.section-heading p { max-width: 62ch; margin: .6rem 0 0; color: var(--nc-text-muted); }

.page-hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3rem, 7vw, 6rem);
  background: linear-gradient(130deg, var(--nc-ink-950), var(--nc-ink-800));
  color: #fff;
}

.page-hero::after {
  content: "";
  position: absolute;
  width: 26rem;
  height: 26rem;
  right: -8rem;
  bottom: -18rem;
  border: 1px solid rgb(255 255 255 / 18%);
  border-radius: 50%;
  box-shadow: 0 0 0 4rem rgb(255 255 255 / 3%), 0 0 0 8rem rgb(255 255 255 / 2%);
}

.page-hero .shell { position: relative; z-index: 1; }
.page-hero .kicker, .page-hero .eyebrow { color: #7dd5ff; }
.page-hero h1 { max-width: 18ch; color: #fff; font-size: clamp(2.25rem, 6vw, 4.75rem); }
.page-hero p { max-width: 64ch; margin: 1rem 0 0; color: #dceafb; font-size: clamp(1rem, 2vw, 1.2rem); }

body.public-page :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  width: 100%;
  min-height: 46px;
  padding: .72rem .85rem;
  border: 1px solid var(--nc-border-strong);
  border-radius: var(--nc-radius-sm);
  background: var(--nc-surface);
  color: var(--nc-text);
  transition: border-color var(--nc-motion-fast), box-shadow var(--nc-motion-fast);
}

body.public-page textarea { min-height: 8rem; resize: vertical; }
body.public-page :where(input, select, textarea):focus { border-color: var(--nc-brand-600); box-shadow: 0 0 0 3px rgb(33 166 223 / 17%); }
body.public-page label { color: var(--nc-ink-900); font-weight: 700; }
body.public-page label > :where(input, select, textarea) { margin-top: .35rem; }

.public-empty {
  max-width: 48rem;
  padding: clamp(2rem, 5vw, 4rem);
  border: 1px solid var(--nc-border);
  border-radius: var(--nc-radius-lg);
  background: var(--nc-surface);
  box-shadow: var(--nc-shadow-sm);
  text-align: center;
}

.public-empty h1,
.public-empty h2,
.public-empty h3 { margin: .5rem 0; color: var(--nc-ink-950); font-family: var(--nc-font-editorial); }
.public-empty p { margin: .5rem auto 0; max-width: 56ch; color: var(--nc-text-muted); }

.nc-card {
  border: 1px solid var(--nc-border);
  border-radius: var(--nc-radius-md);
  background: var(--nc-surface);
  box-shadow: var(--nc-shadow-sm);
}

.nc-badge {
  display: inline-flex;
  align-items: center;
  min-height: 1.65rem;
  padding: .2rem .55rem;
  border-radius: var(--nc-radius-pill);
  background: var(--nc-brand-100);
  color: var(--nc-brand-700);
  font-size: .72rem;
  font-weight: 800;
}

.nc-alert {
  padding: .85rem 1rem;
  border: 1px solid var(--nc-border-strong);
  border-radius: var(--nc-radius-sm);
  background: var(--nc-surface);
  color: var(--nc-text);
}
.nc-alert--success { border-color: #a8d9c4; background: #edfaf4; color: var(--nc-success-700); }
.nc-alert--warning { border-color: #e8c98d; background: #fff8e8; color: var(--nc-warning-700); }
.nc-alert--danger { border-color: #efbdc4; background: #fff1f3; color: var(--nc-danger-700); }

.nc-modal {
  width: min(42rem, calc(100vw - 2rem));
  max-height: calc(100dvh - 2rem);
  overflow: auto;
  border: 0;
  border-radius: var(--nc-radius-lg);
  background: var(--nc-surface);
  color: var(--nc-text);
  box-shadow: var(--nc-shadow-lg);
}
.nc-modal::backdrop { background: rgb(6 26 50 / 72%); backdrop-filter: blur(2px); }

[data-tooltip] { position: relative; }
[data-tooltip]::after {
  position: absolute;
  z-index: 10;
  left: 50%;
  bottom: calc(100% + .5rem);
  max-width: 16rem;
  padding: .35rem .5rem;
  border-radius: var(--nc-radius-xs);
  background: var(--nc-ink-950);
  color: #fff;
  content: attr(data-tooltip);
  font-size: .72rem;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, .25rem);
  transition: opacity var(--nc-motion-fast), transform var(--nc-motion-fast);
}
[data-tooltip]:is(:hover, :focus-visible)::after { opacity: 1; transform: translate(-50%, 0); }

.nc-tooltip { position: relative; }
.nc-tooltip__content,
.nc-tooltip[aria-describedby]::after {
  position: absolute;
  z-index: 20;
  left: 50%;
  bottom: calc(100% + .5rem);
  width: max-content;
  max-width: min(18rem, calc(100vw - 2rem));
  padding: .4rem .55rem;
  border-radius: var(--nc-radius-xs);
  background: var(--nc-ink-950);
  color: #fff;
  font-size: .75rem;
  line-height: 1.35;
  box-shadow: var(--nc-shadow-md);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, .25rem);
  transition: opacity var(--nc-motion-fast), transform var(--nc-motion-fast);
}
.nc-tooltip:is(:hover, :focus-within) .nc-tooltip__content { opacity: 1; transform: translate(-50%, 0); }

.nc-empty-state {
  max-width: 48rem;
  margin-inline: auto;
  padding: clamp(1.5rem, 4vw, 3rem);
  border: 1px solid var(--nc-border);
  border-radius: var(--nc-radius-lg);
  background: var(--nc-surface);
  color: var(--nc-text-muted);
  text-align: center;
  box-shadow: var(--nc-shadow-sm);
}
.nc-empty-state :is(h1,h2,h3) { margin-top: 0; color: var(--nc-text); }
.nc-empty-state .button { margin-top: .75rem; }

.nc-loader { display: inline-flex; align-items: center; gap: .6rem; color: var(--nc-text-muted); }
.nc-spinner,
.is-loading::before {
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  content: "";
  animation: nc-spinner .7s linear infinite;
}
@keyframes nc-spinner { to { transform: rotate(360deg); } }

.nc-dropdown { position: relative; }
.nc-dropdown__menu {
  position: absolute;
  z-index: 30;
  inset-block-start: calc(100% + .35rem);
  inset-inline-end: 0;
  min-width: 14rem;
  padding: .4rem;
  border: 1px solid var(--nc-border);
  border-radius: var(--nc-radius-sm);
  background: var(--nc-surface);
  color: var(--nc-text);
  box-shadow: var(--nc-shadow-lg);
}
.nc-dropdown__menu :is(a,button) { display: flex; width: 100%; min-height: 44px; align-items: center; padding: .55rem .7rem; border: 0; border-radius: var(--nc-radius-xs); background: transparent; color: inherit; text-align: start; }
.nc-dropdown__menu :is(a,button):is(:hover,:focus-visible) { background: var(--nc-surface-muted); }

.nc-skeleton {
  position: relative;
  overflow: hidden;
  min-height: 1rem;
  border-radius: var(--nc-radius-xs);
  background: var(--nc-surface-muted);
  color: transparent !important;
}
.nc-skeleton::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgb(255 255 255 / 70%) 50%, transparent 80%);
  content: "";
  transform: translateX(-100%);
  animation: nc-skeleton-loading 1.35s infinite;
}
@keyframes nc-skeleton-loading { to { transform: translateX(100%); } }

/* Los tokens semánticos separan color de componente y permiten incorporar
   un tema oscuro completo en una fase futura sin alterar el HTML. */

.toast {
  position: fixed;
  z-index: 2000;
  right: 1rem;
  bottom: 1rem;
  max-width: min(24rem, calc(100vw - 2rem));
  padding: .8rem 1rem;
  border-radius: var(--nc-radius-sm);
  background: var(--nc-ink-950);
  color: #fff;
  box-shadow: var(--nc-shadow-lg);
  opacity: 0;
  pointer-events: none;
  transform: translateY(.75rem);
  transition: opacity var(--nc-motion), transform var(--nc-motion);
}

.toast.show { opacity: 1; transform: translateY(0); }

[hidden] { display: none !important; }

@media (max-width: 48rem) {
  .shell { width: min(calc(100% - 1.25rem), var(--nc-content)); }
  .section-heading { align-items: flex-start; flex-direction: column; }
  .section-space { padding-block: 2.6rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .nc-spinner,
  .is-loading::before { animation-duration: 1.5s !important; }
}