/* Port casi literal de ~/talentus/docs/prototipo-marketplace.html (mismas
   variables, mismos nombres de clase, mismos valores originalmente). Todo
   vive anidado bajo .kstore-scope (en vez de aplicar a html/body directo)
   para no pisar el tema de staff (app.css / TalentusTheme) que comparte el
   mismo documento — es la única desviación deliberada frente al prototipo.

   Ronda "refresco visual": SOLO se tocan los valores de las variables acá
   abajo (paleta de marca Talentus, claro por defecto / oscuro con
   interruptor) — ninguna clase ni estructura del port literal se modificó.
   Elegido texto navy (--on-accent/--primary-ink en oscuro) en vez de
   blanco sobre el gradiente primario azul→cian: blanco da 2.07:1 contra el
   extremo cian (falla WCAG), navy da 8.67:1 ahí y ~5.6:1 en el punto medio
   del degradado — ver tabla de contraste entregada aparte. */

/* El drawer del carrito es position:fixed + translateX(100%) cuando está
   cerrado — queda justo a la derecha del viewport, y eso SÍ cuenta para el
   scrollWidth del documento aunque esté "fixed" (medido en vivo: 1558px de
   scrollWidth contra 1280px de viewport en la ficha de programa). overflow-x
   en html recorta ese excedente sin tocar el layout normal de la página. */
html { scroll-behavior: smooth; overflow-x: hidden; }
@media (prefers-reduced-motion: reduce) {
  .kstore-scope, .kstore-scope * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

.kstore-scope {
  /* Claro — por defecto */
  --bg:#F7FAFF; --header:#FFFFFF; --surface:#FFFFFF; --surface-2:#EEF3FC; --surface-3:#F1F6FD;
  --line:#E3EAF6; --line-soft:rgba(10,22,49,.08);
  --fg:#0A1631; --fg-2:#51607E; --fg-3:#7C8AA8;
  /* Paleta institucional UPES — alineada con TalentusTheme.cs (panel):
     navy como "primary" (texto/elementos serios), azul medio como acento
     general, dorado reservado como único color de los CTA primarios (ver
     .btn-primary más abajo). El cian queda angosto a propósito: sigue vivo
     en dark mode como detalle secundario (ver bloque [data-theme=dark]),
     nunca como color dominante. */
  --primary:#1B2D55; --primary-ink:#FFFFFF; --accent:#2A4A8A; --accent-2:#1B2D55; --on-accent:#FFFFFF;
  --gold:#F5A800; --on-gold:#2b1d00; --ok:#14D9A5; --err:#DC2626; --warn:#F59E0B;
  --grad2-a:#7C5CFF; --grad2-b:#2563FF;
  --shadow:0 8px 24px rgba(37,99,255,.12); --shadow-sm:0 4px 14px rgba(37,99,255,.08);
  --hero-a:#EAF1FF; --hero-b:#F7FAFF; --hero-glow:rgba(37,99,255,.16);
  --font-body:"DM Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-head:"Poppins","DM Sans",system-ui,sans-serif;
  color-scheme: light;

  background: var(--bg); color: var(--fg); font-family: var(--font-body);
  font-size: 16px; line-height: 1.55; min-height: 100vh;

  * { box-sizing: border-box; }
  h1, h2, h3, h4 { font-family: var(--font-head); margin: 0; line-height: 1.2; text-wrap: balance; color: var(--fg); }
  p { margin: 0; }
  a { color: inherit; text-decoration: none; }
  button { font: inherit; color: inherit; cursor: pointer; }
  :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
  .wrap { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: 20px; }
  .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  svg.i { width: 1.1em; height: 1.1em; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

  /* barra */
  header.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; background: var(--header); border-bottom: 1px solid var(--line-soft); box-shadow: 0 2px 10px rgba(0,0,0,.25); }
  .top-in { display: flex; align-items: center; gap: 20px; height: 72px; }
  .brand { display: flex; align-items: center; white-space: nowrap; }
  /* Logo oficial — dos PNG reales (navy/blanco) ya traen "by UPES" y el
     eslogan incrustados en el propio arte, así que no hay texto aparte que
     mantener en sync. Cuál se ve lo decide [data-theme] (mismo patrón sin
     parpadeo que el resto de la app, nunca JS/estado del servidor) — nunca
     se recolorea el PNG en sí. El toggle real vive FUERA de este bloque
     anidado (ver [data-theme="dark"] .kstore-scope .brand-logo-* más abajo)
     — nidearlo acá adentro con CSS nesting nativo desugara a
     ".kstore-scope [data-theme=dark] ..." (exige que [data-theme] sea
     DESCENDIENTE de .kstore-scope), pero data-theme vive en <html>, que es
     ANCESTRO de .kstore-scope — la regla nunca matcheaba y el logo oscuro
     se quedaba invisible sobre fondo oscuro (bug real, encontrado en vivo
     con captura + getComputedStyle, no solo caché). */
  .brand-logo { height: 40px; width: auto; display: block; }
  .brand-logo-dark { display: none; }
  .foot-logo { height: 35px; }
  nav.main { display: flex; gap: 6px; margin-left: 12px; }
  nav.main a, nav.main button { background: none; border: 0; padding: 8px 14px; font-weight: 600; font-size: 1.02rem; color: var(--fg); border-radius: 8px; position: relative; }
  nav.main a:hover, nav.main button:hover { color: var(--accent); }
  nav.main a[aria-current="page"], nav.main button[aria-current="page"] { color: var(--accent); }
  nav.main a[aria-current="page"]::after, nav.main button[aria-current="page"]::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 2px; height: 3px; border-radius: 3px; background: var(--accent); }
  .spacer { flex: 1; }
  .icon-btn { position: relative; width: 42px; height: 42px; display: grid; place-items: center; background: transparent; border: 1px solid var(--line); border-radius: 10px; color: var(--fg); }
  .icon-btn:hover { border-color: var(--accent); color: var(--accent); }
  /* Botón de acceso staff — mismas medidas que .icon-btn (42px alto,
     radio 10px, borde var(--line)) pero con ancho flexible para el texto;
     no existe en el prototipo (ahí no hay login). */
  .btn-staff { height: 42px; display: inline-flex; align-items: center; gap: 8px; padding: 0 14px; background: transparent; border: 1px solid var(--line); border-radius: 10px; color: var(--accent); font-weight: 600; font-size: .92rem; }
  .btn-staff:hover { border-color: var(--accent); }
  .badge { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: #ef5350; color: #fff; font-size: .72rem; font-weight: 700; display: grid; place-items: center; }

  /* Selector de idioma — a la izquierda del interruptor de tema en el
     topbar. Mismos tokens que .icon-btn (var(--line)/var(--fg)/var(--accent))
     para que luzca igual en claro y oscuro sin un solo color fijo. Sin
     banderas a propósito (una bandera no es un idioma) — código + nombre
     nativo, ej. "PT · Português". */
  .lang-selector { position: relative; }
  .lang-btn { height: 42px; display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; background: transparent; border: 1px solid var(--line); border-radius: 12px; color: var(--fg); cursor: pointer; transition: border-color .2s, color .2s; }
  .lang-btn:hover, .lang-btn:focus-visible { border-color: var(--accent); color: var(--accent); }
  .lang-code { font-size: .82rem; font-weight: 700; letter-spacing: .03em; }
  .lang-chev { font-size: .7rem; line-height: 1; }
  .lang-menu {
    position: absolute; top: calc(100% + 8px); left: 0; min-width: 190px; max-height: min(60vh, 320px);
    overflow-y: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
    box-shadow: var(--shadow); padding: 6px; display: flex; flex-direction: column; gap: 2px; z-index: 40;
    animation: lang-menu-in .15s ease-out;
  }
  @media (prefers-reduced-motion: reduce) { .lang-menu { animation: none; } }
  @keyframes lang-menu-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
  .lang-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 10px; border: none; border-radius: 8px; background: transparent; color: var(--fg); font-size: .9rem; font-weight: 600; text-align: left; cursor: pointer; flex: none; }
  .lang-item:hover, .lang-item:focus-visible { background: var(--surface-3); }
  .lang-item.active { color: var(--accent); }
  .lang-item-code { font-weight: 700; min-width: 1.6em; }
  .lang-item-sep { color: var(--fg-3); }
  @media (max-width: 560px) {
    .lang-menu { right: 0; left: auto; }
  }
  .badge[hidden] { display: none; }
  .mobile-nav { display: none; }

  /* botones */
  .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 10px; font-weight: 700; padding: 11px 20px; transition: transform .15s, box-shadow .15s, filter .15s; min-height: 44px; }
  .btn:active { transform: translateY(1px); }
  /* CTA primario en dorado institucional (#F5A800) — el único color de
     marca reservado exclusivamente para la acción principal. */
  .btn-primary { background: var(--gold); color: var(--on-gold); box-shadow: 0 4px 12px rgba(245,168,0,.35); }
  .btn-primary:hover { filter: brightness(1.06); box-shadow: 0 6px 18px rgba(245,168,0,.45); }
  .btn-primary:active { transform: scale(.98); }
  /* "Ver programa" / "Ver todo el catálogo" / "Cargar más" / explorar desde
     el carrito vacío — todas llevan a explorar/ver programas, así que
     cuentan como CTA (dorado), no como detalle secundario (cian/azul). */
  .btn-soft { background: linear-gradient(135deg, var(--gold), #FFC94D); color: var(--on-gold); }
  .btn-soft:hover { filter: brightness(1.04); }
  .btn-primary:focus-visible, .btn-soft:focus-visible { outline-color: var(--gold); }
  .btn-ghost { background: transparent; border: 1px solid var(--line); color: var(--fg); }
  .btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
  .btn-block { width: 100%; }
  .btn[disabled] { opacity: .5; cursor: not-allowed; }

  /* hero */
  .hero { position: relative; overflow: hidden; background: radial-gradient(900px 420px at 80% 10%, var(--hero-glow), transparent 70%), linear-gradient(160deg, var(--hero-a), var(--hero-b)); border-bottom: 1px solid var(--line-soft); }
  .hero::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(var(--line-soft) 1px, transparent 1px), linear-gradient(90deg, var(--line-soft) 1px, transparent 1px); background-size: 48px 48px; mask-image: linear-gradient(180deg, #000, transparent 85%); -webkit-mask-image: linear-gradient(180deg, #000, transparent 85%); opacity: .6; }
  .hero-in { position: relative; display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; padding-block: 64px 72px; }
  .eyebrow { font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
  .hero h1 { font-size: clamp(2rem, 4.6vw, 3.2rem); font-weight: 700; margin-top: 12px; }
  .hero h1 em { font-style: normal; color: var(--accent); }
  .hero p.lead { margin-top: 16px; color: var(--fg-2); font-size: 1.12rem; max-width: 56ch; }
  .hero .cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
  .slogan { margin-top: 20px; font-size: .9rem; color: var(--fg-3); }
  .stack { position: relative; height: 410px; }
  .stack .mini { position: absolute; width: min(300px, 78%); background: var(--surface); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; box-shadow: var(--shadow); }
  /* --mini-tx/--mini-ty: tocadas por el parallax del mouse en motion.js —
     la rotación queda SIEMPRE en la hoja de estilos (nunca en el inline
     style que escribe JS) para que mover el mouse no la borre. */
  .stack .mini { transform: rotate(var(--mini-rot, 0deg)) translate(var(--mini-tx, 0), var(--mini-ty, 0)); transition: transform .15s var(--ease-out, ease-out); }
  .stack .mini:nth-child(1) { top: 0; left: 0; --mini-rot: -4deg; }
  .stack .mini:nth-child(2) { top: 96px; right: 0; --mini-rot: 3deg; }
  .stack .mini:nth-child(3) { bottom: 0; left: 12%; --mini-rot: -1.5deg; }
  .mini .cover { height: 96px; aspect-ratio: auto; }
  .mini .mb { padding: 10px 14px 12px; font-size: .88rem; font-weight: 600; }
  .mini .mb span { display: block; color: var(--fg-3); font-weight: 500; font-size: .76rem; }

  /* secciones */
  section.sec { padding-block: 56px; }
  .sec-head { text-align: center; max-width: 640px; margin: 0 auto 32px; }
  .sec-head h2 { font-size: clamp(1.55rem, 3vw, 2.2rem); font-weight: 700; margin-top: 8px; }
  .sec-head p { color: var(--fg-2); margin-top: 10px; }
  .intent { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .intent button, .intent > a { text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 24px; box-shadow: var(--shadow-sm); transition: transform .2s, border-color .2s; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
  .intent button:hover, .intent > a:hover { transform: translateY(-4px); border-color: var(--accent); }
  .intent-icon svg { width: 26px; height: 26px; color: var(--gold); }
  .intent .k { font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
  .intent h3 { font-size: 1.2rem; }
  .intent p { color: var(--fg-2); font-size: .95rem; }
  .intent .go { margin-top: auto; font-weight: 700; color: var(--accent); display: inline-flex; gap: 6px; align-items: center; }

  .areas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
  .area { position: relative; overflow: hidden; background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: 16px; padding: 20px; min-height: 150px; display: flex; flex-direction: column; gap: 6px; text-align: left; box-shadow: var(--shadow-sm); transition: transform .2s; }
  .area:hover, .area:focus-visible { transform: translateY(-3px); }
  /* Círculo dorado decorativo — queda como estaba para las áreas sin arte
     propio todavía (ver AreaArtSlugs en Tienda.razor). */
  .area:not(.has-art)::after { content: ""; position: absolute; right: -30px; bottom: -40px; width: 130px; height: 130px; border-radius: 50%; background: linear-gradient(135deg, rgba(245,168,0,.35), rgba(42,74,138,.22)); }
  .area h3, .area p, .area .go { position: relative; z-index: 1; }
  .area h3 { font-size: .92rem; letter-spacing: .04em; text-transform: uppercase; }
  .area p { font-size: .84rem; color: var(--fg-2); max-width: 20ch; }
  .area .go { margin-top: auto; font-weight: 700; font-size: .88rem; display: inline-flex; gap: 6px; align-items: center; }

  /* Arte fotográfico de área: fondo de la tarjeta, ancla a la derecha donde
     vive el sujeto de cada imagen (ver Areas_Formacion), degradado desde el
     color de la tarjeta (var(--surface-2), igual en claro/oscuro) para que
     el texto a la izquierda mantenga el mismo contraste que ya tenía sin
     imagen. Zoom suave solo en hover/foco, nunca position/layout. */
  .area.has-art { color: var(--fg); }
  .area-art { position: absolute; inset: 0; z-index: 0; }
  .area-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: right bottom; transition: transform .3s ease; }
  .area-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, var(--surface-2) 0%, var(--surface-2) 40%, transparent 82%); }
  .area.has-art:hover .area-art img, .area.has-art:focus-visible .area-art img { transform: scale(1.04); }
  @media (prefers-reduced-motion: reduce) {
    .area-art img { transition: none; }
  }

  /* fila de confianza bajo los CTA del hero */
  .trust-row { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 22px; }
  .trust-row span { display: inline-flex; align-items: center; gap: 8px; font-size: .86rem; font-weight: 600; color: var(--fg-2); }
  .trust-row span svg { color: var(--accent); }

  .steps-wrap { position: relative; }
  .steps-line { position: absolute; top: 17px; left: 0; width: 100%; height: 2px; z-index: 0; }
  .steps-line line { stroke: var(--gold); stroke-width: 2; stroke-dasharray: 700; stroke-dashoffset: 700; transition: stroke-dashoffset 900ms var(--ease-out); }
  .reveal.in .steps-line line { stroke-dashoffset: 0; }
  @media (max-width: 980px) { .steps-line { display: none; } }
  .steps { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; counter-reset: s; }
  .step { background: var(--surface); border: 1px solid var(--line-soft); border-radius: 16px; padding: 20px; }
  .step .n { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--gold); color: var(--on-gold); font-weight: 700; font-family: var(--font-head); margin-bottom: 12px; }
  .step h3 { font-size: 1.02rem; margin-bottom: 6px; }
  .step p { font-size: .9rem; color: var(--fg-2); }
  .steps-subtext { text-align: center; color: var(--fg-2); margin-top: 24px; font-size: .95rem; }

  /* "Por qué Talentus by UPES" */
  .why { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
  .why-item { background: var(--surface); border: 1px solid var(--line-soft); border-radius: 16px; padding: 22px 20px; text-align: center; box-shadow: var(--shadow-sm); }
  .why-item svg { width: 28px; height: 28px; color: var(--gold); margin-bottom: 10px; }
  .why-item h3 { font-size: 1rem; margin-bottom: 6px; }
  .why-item p { font-size: .88rem; color: var(--fg-2); }

  /* FAQ (MudExpansionPanels) — redondeado y con separación, acorde al
     resto de tarjetas de la tienda (MudBlazor trae su propio estilo base,
     esto solo lo alinea con --surface/--line/--shadow-sm). */
  .faq-panels .mud-expand-panel { background: var(--surface); border: 1px solid var(--line); border-radius: 14px !important; margin-bottom: 12px; box-shadow: var(--shadow-sm) !important; overflow: hidden; }
  .faq-panels .mud-expand-panel-header { font-weight: 600; color: var(--fg); }
  .faq-panels .mud-expand-panel-text { color: var(--fg-2); }

  /* banda final */
  .closing { padding-block: 64px; background: linear-gradient(135deg, var(--accent-2), var(--accent)); text-align: center; }
  .closing-in { display: flex; flex-direction: column; align-items: center; gap: 18px; }
  .closing h2 { color: #fff; font-size: clamp(1.6rem, 3.4vw, 2.4rem); }
  .closing-slogan { color: rgba(255,255,255,.8); font-size: .92rem; }

  /* áreas sin programas todavía — atenuada, sin link */
  .area.soon { opacity: .55; cursor: default; }
  .area .soon-tag { color: var(--fg-3); }

  /* catálogo */
  .page-head { padding-block: 36px 8px; }
  .crumbs { display: flex; gap: 8px; align-items: center; font-size: .82rem; color: var(--fg-3); flex-wrap: wrap; }
  .crumbs a, .crumbs button { background: none; border: 0; padding: 0; color: var(--fg-2); }
  .crumbs a:hover, .crumbs button:hover { color: var(--accent); }
  /* En escritorio el título completo entra envolviendo hasta 2 líneas; en
     móvil se trunca visualmente (el texto completo queda en el atributo
     title= para lectores de pantalla y tooltip nativo). */
  .crumb-current { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 60ch; }
  .page-head h1 { font-size: clamp(1.8rem, 3.6vw, 2.75rem); font-weight: 700; margin-top: 14px; }
  .page-head p { color: var(--fg-2); margin-top: 10px; max-width: 56ch; }
  .search { position: relative; max-width: 520px; margin-top: 22px; }
  .search svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--fg-3); }
  .search input { width: 100%; height: 48px; border-radius: 12px; border: 1px solid var(--accent); background: var(--surface); color: var(--fg); padding: 0 16px 0 44px; font: inherit; }
  .search input::placeholder { color: var(--fg-3); }
  .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
  .chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface-3); font-size: .82rem; font-weight: 600; color: var(--fg); }
  .chip:hover { border-color: var(--accent); }
  .chip[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
  .shop { display: grid; grid-template-columns: 270px 1fr; gap: 28px; padding-block: 28px 64px; align-items: start; }
  .filters { position: sticky; top: calc(88px + env(safe-area-inset-top, 0px)); background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 18px; box-shadow: var(--shadow-sm); max-height: calc(100vh - 110px); overflow: auto; }
  .filters h3 { font-size: .95rem; display: flex; align-items: center; gap: 8px; margin: 16px 0 8px; }
  .filters h3:first-child { margin-top: 0; }
  .opt { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; text-align: left; font-size: .9rem; }
  .opt:hover { background: var(--surface-2); }
  .opt .dot { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--fg-3); flex: none; display: grid; place-items: center; }
  .opt[aria-checked="true"] { background: var(--surface-2); font-weight: 600; }
  .opt[aria-checked="true"] .dot { border-color: var(--accent); }
  .opt[aria-checked="true"] .dot::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
  .seg { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .seg button { padding: 9px 6px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-3); font-size: .84rem; font-weight: 600; }
  .seg button[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); background: var(--surface-2); }
  .result-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; color: var(--fg-2); font-size: .9rem; }
  .result-bar select { background: var(--surface); color: var(--fg); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font: inherit; }
  .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 22px; }
  .card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); overflow: hidden; display: flex; flex-direction: column; min-width: 0; transition: transform .2s, border-color .2s; }
  /* Ancla el badge de precio de demostración al área de la portada (no a
     toda la tarjeta) — si no, con --card-tint y el resto del contenido de
     abajo, terminaba flotando sobre los botones en vez de sobre la imagen. */
  .cover-wrap { position: relative; }
  /* Visible y fácil de quitar más adelante (ver Course.PrecioDemostracion).
     Abajo-derecha a propósito: arriba-derecha ya tiene el tag de tipo y
     abajo-izquierda el de proveedor — compartir cualquiera de esas esquinas
     hacía que el texto se cortara/superpusiera en pantallas angostas. */
  .demo-badge { position: absolute; bottom: 10px; right: 10px; z-index: 2; max-width: calc(100% - 20px); background: var(--warn); color: #2b1d00; font-size: .72rem; font-weight: 700; padding: 3px 10px; border-radius: 8px; box-shadow: 0 2px 6px rgba(0,0,0,.3); white-space: normal; text-align: right; }
  .card:hover { transform: translateY(-4px); border-color: rgba(142,182,214,.5); }
  .cover { position: relative; aspect-ratio: 16/8.8; overflow: hidden; background: #10202f; }
  .cover > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
  .cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
  .cover .prov { position: absolute; left: 12px; bottom: 10px; font-size: .78rem; font-weight: 700; color: #fff; background: rgba(0,0,0,.45); padding: 3px 10px; border-radius: 999px; backdrop-filter: blur(4px); }
  .tag { position: absolute; top: 10px; right: 10px; background: var(--gold); color: var(--on-gold); font-size: .74rem; font-weight: 700; padding: 3px 10px; border-radius: 8px; box-shadow: 0 2px 6px rgba(0,0,0,.3); }
  .tag.new { left: 10px; right: auto; background: #2f9e6e; color: #fff; }
  /* Badge de categoría (ver CourseCategoryStyle) — mismo ícono/color sin
     importar si la tarjeta tiene foto real o portada SVG generada. */
  .cat-badge { position: absolute; top: 10px; left: 10px; z-index: 2; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(0,0,0,.35); overflow: hidden; }
  .cat-badge svg.i { width: 18px; height: 18px; stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  /* Insignia propia del curso (ver CourseCover.BadgeImageUrl) — mismo
     círculo de 32px que la insignia de categoría, recortada al cuadrado
     central para que el encuadre sea idéntico sin importar la imagen. */
  .cat-badge-img { background: #10202f; }
  .cat-badge-img img { width: 100%; height: 100%; object-fit: cover; }
  .cbody { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
  /* Títulos largos (reales en el catálogo sincronizado) se cortan a 3
     líneas con elipsis en vez de estirar la tarjeta o desbordar. */
  .cbody h3 { font-size: 1.04rem; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .cbody .tg { font-size: .88rem; color: var(--fg-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .meta { display: flex; justify-content: space-between; gap: 10px; font-size: .8rem; color: var(--fg-2); flex-wrap: wrap; }
  .meta span { display: inline-flex; align-items: center; gap: 6px; }
  .sep { border: 0; border-top: 1px solid var(--line); margin: 2px 0; }
  .prow { display: flex; justify-content: space-between; align-items: center; font-size: .85rem; color: var(--fg-2); }
  .price { font-family: var(--font-head); font-weight: 700; font-size: 1.3rem; color: var(--fg); }
  .crow { display: flex; gap: 8px; margin-top: auto; }
  .crow .btn { flex: 1; padding: 10px 12px; }
  .crow .btn-add { flex: none; width: 46px; padding: 0; }
  .empty { grid-column: 1/-1; text-align: center; padding: 48px 16px; color: var(--fg-2); background: var(--surface); border: 1px dashed var(--line); border-radius: 16px; }
  .filters-toggle { display: none; }

  /* detalle */
  .d-hero { position: relative; background: radial-gradient(800px 360px at 85% 0, var(--hero-glow), transparent 70%), linear-gradient(170deg, var(--hero-a), var(--hero-b)); border-bottom: 1px solid var(--line-soft); }
  .d-hero-in { display: grid; grid-template-columns: 1.2fr .8fr; gap: 36px; align-items: center; padding-block: 32px 44px; }
  .pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); font-size: .76rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
  /* Título completo siempre visible — antes se cortaba con line-clamp:2 y
     se perdían programas reales como "Especialización en AWS Cloud
     Especialización en AWS Cloud Arquitectura & Seguridad Especialista...".
     overflow-wrap:anywhere evita que una palabra larga empuje el layout. */
  .d-hero h1 { font-size: clamp(1.75rem, 3.6vw, 2.75rem); font-weight: 700; line-height: 1.15; margin-top: 16px; text-wrap: balance; overflow-wrap: anywhere; }
  .d-hero .tg { margin-top: 14px; color: var(--fg-2); font-size: 1.05rem; max-width: 60ch; }
  .d-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
  .d-chips .chip { font-size: .82rem; }
  .d-cover { border-radius: 20px; overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow); position: relative; }
  .d-cover .cover { aspect-ratio: 16/10; }
  .d-body { display: grid; grid-template-columns: 1fr 340px; gap: 28px; padding-block: 32px 64px; align-items: start; }
  .panel { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 24px; box-shadow: var(--shadow-sm); min-width: 0; }
  .panel + .panel { margin-top: 20px; }
  .panel h2 { font-size: 1.5rem; margin-bottom: 14px; font-weight: 600; }
  .panel > p { color: var(--fg-2); }
  .stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 20px; }
  .stat { background: var(--surface-3); border: 1px solid var(--line-soft); border-radius: 14px; padding: 12px 14px; min-width: 0; }
  .stat small { display: block; font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-3); }
  .stat b { font-size: 1rem; }
  .acc details { border-bottom: 1px solid var(--line-soft); }
  .acc details:last-child { border-bottom: 0; }
  .acc summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; padding: 16px 4px; font-weight: 600; }
  .acc summary::-webkit-details-marker { display: none; }
  .acc summary svg { transition: transform .2s; }
  .acc details[open] summary svg { transform: rotate(180deg); }
  .acc .ab { padding: 0 4px 16px; color: var(--fg-2); }
  .acc ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
  .mods { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
  .mods li { display: flex; gap: 14px; align-items: flex-start; padding: 12px 14px; background: var(--surface-3); border: 1px solid var(--line-soft); border-radius: 12px; }
  .mods .mn { flex: none; width: 28px; height: 28px; border-radius: 8px; background: var(--surface-2); display: grid; place-items: center; font-size: .8rem; font-weight: 700; color: var(--accent); }
  .buy { position: sticky; top: calc(88px + env(safe-area-inset-top, 0px)); display: grid; gap: 14px; }
  .buy .lab { font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-3); }
  .buy .big { font-family: var(--font-head); font-weight: 700; font-size: 2.2rem; line-height: 1; }
  .buy .note { font-size: .84rem; color: var(--fg-2); text-align: center; }
  .incl { display: grid; gap: 10px; font-size: .92rem; margin: 0; padding: 0; list-style: none; }
  .incl li { display: flex; gap: 10px; align-items: flex-start; color: var(--fg-2); }
  .incl li svg { color: var(--accent); margin-top: 3px; }
  .cred { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .cred > div { background: var(--surface-3); border: 1px solid var(--line-soft); border-radius: 14px; padding: 14px; }
  .cred small { display: block; font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; }
  .cred p { font-size: .9rem; color: var(--fg-2); }

  /* rutas */
  .routes { display: grid; gap: 22px; }
  .route { display: grid; grid-template-columns: 260px 1fr; gap: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; box-shadow: var(--shadow-sm); }
  .route .rh { padding: 24px; background: linear-gradient(160deg, var(--hero-a), var(--surface)); border-right: 1px solid var(--line-soft); display: flex; flex-direction: column; gap: 10px; }
  .route .rh h3 { font-size: 1.2rem; }
  .route .rh p { font-size: .88rem; color: var(--fg-2); }
  .route .rh .btn { margin-top: auto; }
  .route ol { list-style: none; margin: 0; padding: 22px 24px; display: grid; gap: 0; position: relative; }
  .route li { display: flex; gap: 14px; align-items: center; padding: 12px 0; position: relative; }
  .route li:not(:last-child)::after { content: ""; position: absolute; left: 15px; top: 46px; bottom: -12px; width: 2px; background: var(--line); }
  .route .rn { flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--surface-2); border: 2px solid var(--accent); display: grid; place-items: center; font-weight: 700; font-size: .82rem; color: var(--accent); z-index: 1; }
  .route .rt { flex: none; width: 48px; height: 48px; border-radius: 8px; overflow: hidden; background: linear-gradient(135deg, var(--accent-2), var(--accent)); }
  .route .rt img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .route li a, .route li button { background: none; border: 0; text-align: left; padding: 0; min-width: 0; }
  .route li a:hover b, .route li button:hover b { color: var(--accent); }
  .route li b { display: block; font-weight: 600; }
  .route li small { color: var(--fg-3); }

  /* carrito */
  .scrim { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 50; opacity: 0; pointer-events: none; transition: opacity .2s; }
  .scrim.on { opacity: 1; pointer-events: auto; }
  aside.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 100%); background: var(--surface); border-left: 1px solid var(--line); z-index: 60; transform: translateX(100%); transition: transform .25s; display: flex; flex-direction: column; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); box-shadow: -12px 0 40px rgba(0,0,0,.4); }
  aside.drawer.on { transform: none; }
  .dr-head { display: flex; justify-content: space-between; align-items: center; padding: 18px 20px; border-bottom: 1px solid var(--line-soft); }
  .dr-head h2 { font-size: 1.15rem; }
  .dr-list { flex: 1; overflow: auto; padding: 14px 20px; display: grid; gap: 12px; align-content: start; }
  .ci { display: grid; grid-template-columns: 84px 1fr auto; gap: 12px; align-items: center; background: var(--surface-3); border: 1px solid var(--line-soft); border-radius: 12px; padding: 10px; }
  .ci .cover { aspect-ratio: 1/1; border-radius: 8px; }
  .ci .cover .prov { display: none; }
  .ci b { font-size: .9rem; font-weight: 600; display: block; line-height: 1.3; }
  .ci small { color: var(--fg-3); }
  .ci .rm { background: none; border: 0; color: var(--err); padding: 6px; border-radius: 8px; }
  .ci .rm:hover { background: rgba(255,107,107,.12); }
  .dr-foot { padding: 18px 20px; border-top: 1px solid var(--line-soft); display: grid; gap: 12px; }
  .tot { display: flex; justify-content: space-between; align-items: baseline; font-weight: 600; }
  .tot b { font-family: var(--font-head); font-size: 1.5rem; }
  .dr-empty { text-align: center; color: var(--fg-2); padding: 40px 12px; }

  /* checkout */
  .co { display: grid; grid-template-columns: 1fr 380px; gap: 28px; padding-block: 28px 64px; align-items: start; }
  .field { display: grid; gap: 6px; margin-bottom: 16px; }
  .field label { font-size: .84rem; font-weight: 600; }
  .field input[type=text], .field input[type=email] { height: 48px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); color: var(--fg); padding: 0 14px; font: inherit; }
  .field input:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px rgba(142,182,214,.25); }
  .field .err, .field.err { color: var(--err); font-size: .92rem; font-weight: 600; min-height: 1em; }
  .hint { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; font-size: .88rem; border: 1px solid var(--line-soft); background: var(--surface-3); color: var(--fg-2); margin-bottom: 16px; }
  .hint.ok { border-color: rgba(81,207,102,.4); background: rgba(81,207,102,.08); }
  .hint.warn { border-color: rgba(255,212,59,.4); background: rgba(255,212,59,.08); }
  .hint svg { margin-top: 2px; flex: none; }
  .check { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 18px; font-size: .9rem; color: var(--fg-2); }
  .check input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--primary); }
  .sum-row { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line-soft); font-size: .92rem; }
  .sum-row span:first-child { color: var(--fg-2); min-width: 0; }
  .sum-row.t { border-bottom: 0; font-weight: 700; font-size: 1.1rem; color: var(--fg); }
  .modal { position: fixed; inset: 0; z-index: 80; background: rgba(0,0,0,.65); display: grid; place-items: center; padding: 16px; }
  .modal .box { width: min(460px, 100%); background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 24px; box-shadow: var(--shadow); display: grid; gap: 14px; }
  .modal h2 { font-size: 1.25rem; }
  .modal .sim { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 4px 10px; border-radius: 6px; background: var(--gold); color: var(--on-gold); width: fit-content; }

  /* seguimiento de orden */
  .ord { max-width: 860px; margin-inline: auto; padding-block: 32px 72px; display: grid; gap: 20px; }
  .ord h1 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
  .tl { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
  .tl li { display: grid; grid-template-columns: 36px 1fr auto; gap: 14px; align-items: start; padding: 14px 0; position: relative; }
  .tl li:not(:last-child)::after { content: ""; position: absolute; left: 17px; top: 48px; bottom: -14px; width: 2px; background: var(--line); }
  .tl .ic { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); border: 2px solid var(--line); color: var(--fg-3); z-index: 1; }
  .tl li.done .ic { background: var(--ok); border-color: var(--ok); color: #06240f; }
  .tl li.now .ic { border-color: var(--accent); color: var(--accent); animation: kstore-pulse 1.4s infinite; }
  .tl li.wait .ic { border-color: var(--warn); color: var(--warn); }
  .tl b { display: block; font-weight: 600; }
  .tl small { color: var(--fg-2); }
  .tl .when { font-size: .78rem; color: var(--fg-3); font-variant-numeric: tabular-nums; }
  .mail { background: #f6f8fb; color: #1b2d3d; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); font-family: Arial, Helvetica, sans-serif; }
  .mail .mh { background: #fff; padding: 10px 16px; border-bottom: 1px solid #dde4ec; font-size: .8rem; color: #55677a; display: grid; gap: 2px; }
  .mail .mh b { color: #1b2d3d; }
  .mail .mb { padding: 28px 24px; text-align: center; background: #fff; }
  .mail .mb h3 { font-family: Arial, Helvetica, sans-serif; color: #10243a; font-size: 1.4rem; }
  .mail .mb p { color: #46586b; margin-top: 8px; font-size: .95rem; }
  .mail .prog { margin: 16px auto; padding: 12px 14px; background: #eef4fa; border-radius: 10px; font-weight: 700; max-width: 420px; color: #10243a; }
  .mail .fake { display: inline-block; margin-top: 8px; background: #2b6f9c; color: #fff; font-weight: 700; padding: 12px 22px; border-radius: 8px; letter-spacing: .04em; font-size: .9rem; }
  .mail .mf { padding: 12px 16px; font-size: .74rem; color: #6b7c8d; background: #f6f8fb; text-align: center; }
  .sub { color: var(--fg-3); font-size: .82rem; }
  footer.foot { background: var(--header); border-top: 1px solid var(--line-soft); padding-block: 36px 16px; color: var(--fg-2); font-size: .88rem; }
  .foot-in { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; }
  .foot b { color: var(--fg); }
  .foot-slogan { margin-top: 10px; font-weight: 700; color: var(--fg); }
  .foot-rights { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--line-soft); font-size: .78rem; color: var(--fg-3); }
  .toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 20px); background: var(--surface-2); border: 1px solid var(--accent); color: var(--fg); padding: 12px 18px; border-radius: 12px; box-shadow: var(--shadow); z-index: 90; opacity: 0; pointer-events: none; transition: all .25s; display: flex; gap: 10px; align-items: center; max-width: calc(100% - 32px); }
  .toast.on { opacity: 1; transform: translate(-50%, 0); }

  /* No existe en el prototipo (ahí el botón de login no existía) — misma
     convención del resto del archivo, solo oculta el texto en pantallas
     angostas y deja el ícono. */
  @media (max-width: 560px) {
    .hide-on-mobile { display: none; }
  }
}

@keyframes kstore-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(142,182,214,.5); } 50% { box-shadow: 0 0 0 8px rgba(142,182,214,0); } }

[data-theme="dark"] .kstore-scope {
  --bg:#0A1631; --header:#101F42; --surface:#101F42; --surface-2:#16294F; --surface-3:#132449;
  --line:rgba(255,255,255,.12); --line-soft:rgba(255,255,255,.07);
  --fg:#EAF1FF; --fg-2:#9DB0D6; --fg-3:#7489B3;
  --primary:#3DA5FF; --primary-ink:#0A1631; --accent:#00E0FF; --accent-2:#3DA5FF; --on-accent:#0A1631;
  --gold:#F5A800; --on-gold:#2b1d00; --ok:#14D9A5; --err:#F87171; --warn:#FBBF24;
  --grad2-a:#7C5CFF; --grad2-b:#3DA5FF;
  --shadow:0 8px 24px rgba(0,0,0,.45); --shadow-sm:0 4px 14px rgba(0,0,0,.35);
  --hero-a:#0A1631; --hero-b:#0A1631; --hero-glow:rgba(61,165,255,.35);
  color-scheme: dark;
}

/* Logo oficial, variante correcta por tema — escrito a nivel de archivo
   (no anidado) a propósito, exactamente como el bloque de arriba: el
   selector debe incluir .kstore-scope EXPLÍCITO después de [data-theme],
   porque data-theme vive en <html> (ancestro), no dentro de .kstore-scope. */
[data-theme="dark"] .kstore-scope .brand-logo-light { display: none; }
[data-theme="dark"] .kstore-scope .brand-logo-dark { display: block; }

@media (max-width: 980px) {
  .kstore-scope .hero-in, .kstore-scope .d-hero-in, .kstore-scope .d-body, .kstore-scope .co { grid-template-columns: 1fr; }
  .kstore-scope .stack { display: none; }
  .kstore-scope .areas, .kstore-scope .steps, .kstore-scope .why { grid-template-columns: repeat(2, 1fr); }
  .kstore-scope .intent { grid-template-columns: 1fr; }
  .kstore-scope .buy { position: static; }
  .kstore-scope .route { grid-template-columns: 1fr; }
  .kstore-scope .route .rh { border-right: 0; border-bottom: 1px solid var(--line-soft); }
}
@media (max-width: 860px) {
  .kstore-scope .shop { grid-template-columns: 1fr; }
  .kstore-scope .filters { position: static; max-height: none; display: none; }
  .kstore-scope .filters.open { display: block; }
  .kstore-scope .filters-toggle { display: inline-flex; }
  .kstore-scope nav.main { display: none; }
  .kstore-scope .mobile-nav { display: flex; gap: 6px; overflow-x: auto; padding: 8px 20px; background: var(--header); border-bottom: 1px solid var(--line-soft); position: sticky; top: calc(72px + env(safe-area-inset-top, 0px)); z-index: 29; }
  .kstore-scope .mobile-nav a, .kstore-scope .mobile-nav button { flex: none; background: none; border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; font-weight: 600; font-size: .88rem; }
  .kstore-scope .mobile-nav a[aria-current="page"], .kstore-scope .mobile-nav button[aria-current="page"] { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
  .kstore-scope .foot-in { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .kstore-scope .areas, .kstore-scope .steps, .kstore-scope .cred, .kstore-scope .why { grid-template-columns: 1fr; }
  .kstore-scope .stats { grid-template-columns: 1fr; }
  .kstore-scope .top-in { gap: 10px; }
  .kstore-scope .brand-logo { height: 32px; }
  .kstore-scope .tl li { grid-template-columns: 36px 1fr; }
  .kstore-scope .tl .when { grid-column: 2; }
  .kstore-scope .crumb-current { -webkit-line-clamp: 1; white-space: nowrap; text-overflow: ellipsis; max-width: 70vw; }
}