@layer components {
  /* ===== Landing SmartLink (Ciudades Inteligentes) =====
     Identidad provisional: azul corporativo KunanSoft + acento dorado.
     El color oficial de SmartLink está pendiente (Víctor): cuando se defina,
     basta con cambiar estas variables. */
  .theme-smartlink {
    --sl-dark: #07223F;            /* navy profundo para el hero */
    --primary:       light-dark(#004D8B, #2D8CFF);
    --primary-hover: light-dark(#013C6E, #5AA6FF);
  }

  /* Marca del header: isotipo + nombre en texto */
  .sl-brand .brand__mark { width: 2.4rem; height: 2.4rem; }

  /* Switch de vuelta a KunanSoft: el wordmark es oscuro (para fondo claro); en modo oscuro
     se vuelve blanco para que se lea sobre el header oscuro. */
  :root[data-theme="dark"] .theme-smartlink .nav__switch img { filter: brightness(0) invert(1); }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .theme-smartlink .nav__switch img { filter: brightness(0) invert(1); }
  }

  /* ----- Hero oscuro ----- */
  .sl-hero {
    background:
      radial-gradient(620px 340px at 100% -8%, rgba(255, 213, 28, .12), transparent 60%),
      radial-gradient(960px 640px at -8% -12%, rgba(0, 121, 255, .40), transparent 62%),
      var(--sl-dark);
    color: #E7EFF7;
    padding-block: clamp(3rem, 8vw, 6rem);
  }
  .sl-hero__grid { display: grid; gap: var(--space-7); align-items: center; grid-template-columns: minmax(0, 1fr); }
  @media (min-width: 56rem) { .sl-hero__grid { grid-template-columns: 1.05fr .95fr; } }
  .sl-hero .eyebrow { color: var(--brand-gold); }
  .sl-hero h1 { color: #fff; }
  .sl-hero__lead { color: #CBD8E6; max-width: 48ch; }
  .sl-hero .btn--ghost { color: #fff; border-color: rgba(255, 255, 255, .35); }
  .sl-hero .btn--ghost:hover { background: rgba(255, 255, 255, .1); }
  .sl-hero__art { background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
    padding: clamp(1.4rem, 3vw, 2.4rem); display: grid; place-items: center; }
  .sl-hero__art img { display: block; width: 100%; max-width: 460px; height: auto; }

  /* ----- Encabezado de producto/sección con estado ----- */
  .sl-status { display: inline-flex; align-items: center; gap: .45rem; font-family: var(--font-display);
    font-weight: 600; font-size: var(--step--1); padding: .25rem .8rem; border-radius: var(--radius-pill); }
  .sl-status::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: currentColor; }
  .sl-status--live { background: color-mix(in srgb, #18a558 18%, transparent);
    border: 1px solid color-mix(in srgb, #18a558 45%, var(--border)); color: light-dark(#0c7a3e, #4cd58a); }
  .sl-status--soon { background: color-mix(in srgb, var(--accent) 20%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border)); color: var(--text); }

  /* ----- Mini-features con icono (OmniPark, capacidades) ----- */
  .sl-feats { display: grid; gap: var(--space-4); }
  @media (min-width: 40rem) { .sl-feats { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 60rem) { .sl-feats { grid-template-columns: repeat(3, 1fr); } }
  .sl-feat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-5); }
  .sl-feat__icon { width: 2.5rem; height: 2.5rem; color: var(--primary); margin-bottom: var(--space-3); }
  .sl-feat h3 { font-size: var(--step-0); margin-bottom: var(--space-2); }
  .sl-feat p { color: var(--text-muted); margin: 0; font-size: var(--step--1); }

  /* ----- Bloque de sección en hoja de ruta (atenuado) ----- */
  .sl-roadmap { background: var(--surface); border: 1px dashed var(--border); border-radius: var(--radius-lg);
    padding: clamp(1.6rem, 4vw, 2.6rem); }

  /* ----- Banda de cumplimiento / datos ----- */
  .sl-data { background: linear-gradient(135deg, var(--brand-blue), #002a4d 70%); color: #eaf3fc;
    border-radius: var(--radius-lg); padding: clamp(2rem, 5vw, 4rem); box-shadow: var(--shadow-md); }
  .sl-data .eyebrow { color: var(--brand-gold); }
  .sl-data h2 { color: #fff; }
  .sl-data p { color: #c4d8ec; }
  .sl-data__icon { width: 2.8rem; height: 2.8rem; color: var(--brand-gold); margin-bottom: var(--space-3); }
}