/* Marca DSN: barra superior, acceso y página de aterrizaje.
   Colores tomados del logo: azul marino de "dsn", los dos azules del trazo y el celeste de "empresas". */
:root {
  --brand-navy: #2F3B66;
  --brand-deep: #1B2440;
  --brand-blue: #3A6CB4;
  --brand-mid: #4D9BD6;
  --brand-sky: #1AA7E0;
}

/* ---------- Barra superior con logo ---------- */
.topbar { background: var(--brand-deep); }
.brand { align-items: center; gap: 12px; }
.brand-logo { height: 30px; width: auto; display: block; }
.brand-divider { width: 1px; height: 22px; background: rgba(255,255,255,0.28); }
.brand-sub { color: #C9D5EA; font-size: 0.95rem; letter-spacing: 0.01em; }
.nav .nav-cta { background: var(--brand-sky); color: #06213A; font-weight: 600; }
.nav .nav-cta:hover { background: #4CC0EE; color: #06213A; }

/* ---------- Acceso (login / registro) ---------- */
.auth-side { background: var(--brand-deep); position: relative; overflow: hidden; }
.auth-logo { width: 150px; height: auto; display: block; }
.auth-side::after {
  content: ''; position: absolute; right: -60px; top: -40px; width: 260px; height: 120%;
  border-left: 14px solid var(--brand-blue); border-radius: 60% 0 0 0; opacity: 0.35; pointer-events: none;
}
.auth-side > * { position: relative; z-index: 1; }

/* ---------- Botones de la marca ---------- */
.btn-sky { background: var(--brand-sky); color: #06213A; }
.btn-sky:hover { background: #4CC0EE; }
.btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,0.45); }
.btn-ghost:hover { background: rgba(255,255,255,0.08); border-color: #fff; }

/* ---------- Hero ---------- */
.landing .topbar { position: relative; z-index: 2; }
.l-hero { background: var(--brand-deep); color: #fff; position: relative; overflow: hidden; }
.l-swoosh { position: absolute; right: 0; top: 0; height: 100%; width: min(42vw, 520px); opacity: 0.55; pointer-events: none; }
.l-hero-grid {
  position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(28px, 5vw, 72px); align-items: center; padding-block: clamp(40px, 7vw, 96px);
}
.l-hero-logo { width: clamp(110px, 12vw, 150px); height: auto; display: block; margin-bottom: 28px; }
.l-hero h1 { font-size: clamp(2.3rem, 5vw, 3.9rem); font-stretch: 80%; line-height: 1.02; max-width: 15ch; }
.l-lead { margin-top: 20px; font-size: clamp(1.02rem, 1.4vw, 1.15rem); color: #C9D5EA; max-width: 54ch; line-height: 1.6; }
.l-cta { display: flex; gap: 12px; margin-top: 30px; flex-wrap: wrap; }
.l-cta .btn { padding: 14px 22px; font-size: 1rem; }

/* Vista previa de una lección */
.l-preview {
  margin: 0; background: #fff; color: var(--ink); border-radius: 12px; padding: 22px;
  box-shadow: 0 24px 60px rgba(4, 10, 30, 0.45); max-width: 440px; justify-self: end; width: 100%;
}
.lp-head { display: grid; gap: 4px; padding-bottom: 14px; border-bottom: 1px solid var(--rule-soft); }
.lp-crumb { font-size: 0.8rem; color: var(--ink-3); }
.lp-head strong { font-family: var(--font-head); font-stretch: 87.5%; font-size: 1.25rem; line-height: 1.2; }
.lp-steps { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.lp-steps li { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 8px; background: var(--paper); }
.lp-steps b { display: block; font-size: 0.95rem; }
.lp-steps small { display: block; color: var(--ink-3); font-size: 0.8rem; line-height: 1.35; }
.lp-dot { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 1.5px solid var(--rule); color: var(--ink-3); font-size: 0.8rem; }
.lp-steps li.done .lp-dot { background: var(--done); border-color: var(--done); color: #fff; }
.lp-steps li.active { background: #E6F5FC; box-shadow: inset 3px 0 0 var(--brand-sky); }
.lp-steps li.active .lp-dot { border-color: var(--brand-sky); color: #0A7FB0; }
.lp-score { font-weight: 700; color: var(--done); font-size: 0.95rem; }
.l-preview figcaption { margin-top: 12px; font-size: 0.8rem; color: var(--ink-3); text-align: center; }

/* ---------- Números y mapa del plan ---------- */
.l-figures { background: #fff; border-bottom: 1px solid var(--rule); }
.l-stats { margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--rule-soft); }
.l-stats > div { padding: 28px 20px 24px 0; display: flex; flex-direction: column-reverse; gap: 2px; }
.l-stats > div + div { padding-left: 24px; border-left: 1px solid var(--rule-soft); }
.l-stats dt { color: var(--ink-2); font-size: 0.92rem; }
.l-stats dd { margin: 0; font-family: var(--font-head); font-stretch: 80%; font-weight: 800; font-size: clamp(2.2rem, 4vw, 3.2rem); line-height: 1; color: var(--brand-navy); }
.l-map { padding-block: 24px 30px; }
.l-strip { gap: 0; }
.l-strip > .strip-group { gap: 1px; min-width: 0; }
.l-strip > .strip-group + .strip-group { margin-left: 5px; }
.l-strip .seg { background: #C9D6EA; min-width: 0; }
.l-strip .strip-group:nth-child(odd) .seg { background: #B5C7E3; }
.l-strip .seg.exam { background: var(--brand-blue); }
.l-map-legend { margin-top: 10px; font-size: 0.88rem; color: var(--ink-3); }

/* ---------- Secciones ---------- */
.l-section { padding-block: clamp(48px, 7vw, 88px); }
.l-section h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); font-stretch: 80%; }
.l-section-head { display: grid; gap: 10px; max-width: 70ch; margin-bottom: 28px; }

.l-steps { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 2px solid var(--brand-navy); }
.l-steps li { padding: 22px 24px 8px 0; display: grid; gap: 8px; align-content: start; }
.l-steps li + li { padding-left: 24px; border-left: 1px solid var(--rule); }
.l-step-num { font-family: var(--font-head); font-weight: 800; font-size: 1.05rem; color: #fff; background: var(--brand-navy); width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; }
.l-steps h3 { font-size: 1.2rem; }
.l-steps p { color: var(--ink-2); font-size: 0.96rem; }

.l-catalog { background: #fff; border-block: 1px solid var(--rule); }
.l-courses { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.l-courses li { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 20px; align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--rule-soft); }
.l-course-num { font-family: var(--font-head); font-stretch: 80%; font-weight: 700; font-size: 1.5rem; color: var(--brand-blue); }
.l-course-body h3 { font-size: 1.15rem; display: flex; align-items: baseline; gap: 10px; }
.l-course-body h3 i { color: var(--brand-blue); font-size: 0.95rem; width: 18px; text-align: center; }
.l-course-body p { color: var(--ink-2); font-size: 0.94rem; margin-top: 4px; max-width: 72ch; }
.l-course-meta { display: flex; gap: 18px; font-size: 0.88rem; color: var(--ink-2); white-space: nowrap; }

.l-kb { background: var(--paper); }
.l-kb-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 40px; align-items: center; }
.l-kb-grid p { margin-top: 12px; color: var(--ink-2); max-width: 60ch; font-size: 1.02rem; }
.l-kb-examples { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.l-kb-examples li { background: #fff; border: 1px solid var(--rule); border-radius: 6px; padding: 12px 16px; color: var(--ink-2); display: flex; gap: 12px; align-items: center; }
.l-kb-examples i { color: var(--brand-blue); }

.l-final { background: var(--brand-navy); color: #fff; }
.l-final-inner { padding-block: clamp(44px, 6vw, 72px); display: grid; gap: 12px; justify-items: start; }
.l-final h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); font-stretch: 80%; }
.l-final p { color: #C9D5EA; margin-bottom: 8px; }

.l-footer { background: #fff; border-top: 1px solid var(--rule); }
.l-footer-inner { display: flex; gap: 24px; align-items: center; padding-block: 28px; flex-wrap: wrap; }
.l-footer img { width: 84px; height: auto; }
.l-footer p { color: var(--ink-3); font-size: 0.88rem; max-width: 70ch; }

/* ---------- Certificado ---------- */
.cert-logo { width: 92px; height: auto; display: block; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .l-hero-grid { grid-template-columns: 1fr; }
  .l-preview { justify-self: start; }
  .l-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .l-steps li:nth-child(3) { padding-left: 0; border-left: 0; }
  .l-steps li:nth-child(n+3) { border-top: 1px solid var(--rule); }
  .l-kb-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .brand-divider, .brand-sub { display: none; }
  .l-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .l-stats > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .l-stats > div:nth-child(n+3) { border-top: 1px solid var(--rule-soft); }
  .l-steps { grid-template-columns: 1fr; }
  .l-steps li, .l-steps li + li { padding-left: 0; border-left: 0; }
  .l-steps li + li { border-top: 1px solid var(--rule); }
  .l-courses li { grid-template-columns: 40px minmax(0, 1fr); }
  .l-course-meta { grid-column: 2; flex-wrap: wrap; gap: 4px 14px; }
  .l-swoosh { opacity: 0.25; }
}