/* ============================================================
   Growlab LMS · estilos del aula (sistema + pantallas)
   Portado del prototipo aprobado. Marca Growlab Academy.
   ============================================================ */

/* ============================================================
   GROWLAB AULA · Sistema visual compartido (colores planos)
   VERDE BRILLANTE #95b132 como color PRINCIPAL.
   Texto BLANCO sobre verde. Botones en AZUL #008fff.
   Marino #003366 como apoyo. Sin gradientes · sin verde oscuro.
   Tipografía: Plus Jakarta Sans (display) + DM Sans (texto)
   ============================================================ */

:root {
  --green:     #95b132;
  --green-h:   #88a42c;
  --green-l:   #edf5d5;
  --navy:      #003366;
  --navy-d:    #00264d;
  --green-d:   #003366;   /* acentos de texto sobre claro: marino */
  --blue:      #008fff;
  --blue-d:    #006bbf;
  --blue-l:    #e1f2ff;
  --paper:     #f5f8ee;
  --card:      #ffffff;
  --ink:       #1c2a12;
  --muted:     #5e6b52;
  --faint:     #97a487;
  --line:      #e8ecdf;
  --line-soft: #eff3e6;

  --font-d: 'Plus Jakarta Sans', sans-serif;
  --font-b: 'DM Sans', sans-serif;

  --shadow-sm: 0 1px 2px rgba(45,61,12,0.05);
  --shadow-md: 0 8px 24px rgba(45,61,12,0.10);
  --shadow-lg: 0 18px 50px rgba(45,61,12,0.16);
  --r-sm: 12px; --r-md: 16px; --r-lg: 22px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-b);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-size: 16.5px;
  line-height: 1.62;
}

h1, h2, h3, h4, .d { font-family: var(--font-d); letter-spacing: -0.02em; color: var(--ink); }
a { color: inherit; text-decoration: none; }

/* ====================== APP SHELL ====================== */
.app { display: flex; min-height: 100vh; }

/* Barra lateral — verde brillante + texto blanco */
.sb {
  width: 256px; flex-shrink: 0; position: sticky; top: 0; height: 100vh;
  background: var(--green);
  color: #fff; display: flex; flex-direction: column;
  padding: 22px 16px;
}
.sb__logo { display: flex; align-items: center; gap: 11px; padding: 6px 8px 22px; }
.sb__logo-img { height: 40px; width: auto; max-width: 100%; display: block; }

.sb__label { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.7); padding: 14px 10px 8px; font-weight: 700; }

.sb__nav { display: flex; flex-direction: column; gap: 3px; }
.sb__nav a {
  display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 11px;
  font-size: 16px; color: rgba(255,255,255,0.92); font-weight: 600; transition: background .16s, color .16s;
}
.sb__nav a svg { width: 19px; height: 19px; opacity: 0.85; }
.sb__nav a:hover { background: rgba(255,255,255,0.18); color: #fff; }
.sb__nav a.is-active { background: #fff; color: var(--navy); box-shadow: inset 3px 0 0 var(--blue); }
.sb__nav a.is-active svg { color: var(--blue); opacity: 1; }

/* Selector de ruta en sidebar */
.sb__switch { margin-top: 18px; background: #fff; border: none; border-radius: 16px; padding: 16px; box-shadow: 0 6px 18px rgba(0,40,80,0.14); }
.sb__switch-top { display: flex; align-items: center; justify-content: space-between; }
.sb__switch-top span { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.sb__switch-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--blue); }
.sb__switch-name { display: flex; align-items: center; justify-content: space-between; margin-top: 9px; color: var(--navy); font-family: var(--font-d); font-weight: 800; font-size: 17px; cursor: pointer; }
.sb__switch-name svg { width: 18px; height: 18px; color: var(--navy); }
.sb__switch-list { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; }
.sb__switch-list a { font-size: 15px; color: var(--navy); font-weight: 500; padding: 8px; border-radius: 9px; display: flex; align-items: center; gap: 9px; }
.sb__switch-list a:hover { background: var(--paper); }
.sb__switch-list a .ic { width: 8px; height: 8px; border-radius: 50%; }
/* Botón "Ver otras rutas" — fuera de la card */
.sb__cta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: var(--blue); color: #fff; font-family: var(--font-d); font-weight: 700; font-size: 14.5px; transition: background .15s; }
.sb__cta:hover { background: var(--blue-d); }
.sb__cta svg { width: 18px; height: 18px; flex-shrink: 0; }

.sb__user { margin-top: auto; display: flex; align-items: center; gap: 11px; padding: 12px 8px 4px; border-top: 1px solid rgba(255,255,255,0.22); }
.sb__user-av { width: 38px; height: 38px; border-radius: 50%; background: #d4dae0; color: #7a879a; display: grid; place-items: center; overflow: hidden; flex-shrink: 0; }
.sb__user-av svg { width: 23px; height: 23px; }
.sb__user-av img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.sb__user-meta b { display: block; font-family: var(--font-d); font-size: 13.5px; color: #fff; font-weight: 700; }
.sb__user-meta span { font-size: 11.5px; color: rgba(255,255,255,0.78); }

/* ====================== MAIN ====================== */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 32px;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.topbar__crumb { font-size: 14.5px; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.topbar__crumb b { color: var(--ink); font-family: var(--font-d); font-weight: 700; }
.topbar__crumb a { color: inherit; }
.topbar__crumb a:hover { color: var(--blue-d); }
.topbar__crumb a:hover b { color: var(--blue-d); }
.topbar__crumb svg { width: 14px; height: 14px; color: var(--faint); }
.topbar__right { display: flex; align-items: center; gap: 10px; }
.search {
  display: flex; align-items: center; gap: 9px; background: var(--card); border: 1px solid var(--line);
  border-radius: 11px; padding: 10px 14px; min-width: 240px; color: var(--faint); font-size: 15px;
}
.search svg { width: 16px; height: 16px; }
.icon-btn { width: 40px; height: 40px; border-radius: 11px; background: var(--card); border: 1px solid var(--line); display: grid; place-items: center; color: var(--muted); cursor: pointer; position: relative; transition: border-color .15s, color .15s; }
.icon-btn:hover { border-color: var(--blue); color: var(--blue-d); }
.icon-btn svg { width: 19px; height: 19px; }
.icon-btn .dot { position: absolute; top: 8px; right: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--blue); border: 1.5px solid var(--paper); }

.content { padding: 30px 32px 70px; max-width: 1180px; width: 100%; }

.sec-head { display: flex; align-items: end; justify-content: space-between; margin: 0 0 16px; }
.sec-title { font-size: 22px; font-weight: 700; }
.sec-link { font-size: 14.5px; color: var(--blue-d); font-weight: 700; display: inline-flex; align-items: center; gap: 5px; }
.sec-link:hover { gap: 9px; }

/* Botones — azul */
.btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-d); font-weight: 700; font-size: 15.5px; padding: 12px 22px; border-radius: 12px; border: none; cursor: pointer; transition: background .15s, transform .15s; }
.btn svg { width: 16px; height: 16px; }
.btn--green { background: var(--blue); color: #fff; }
.btn--green:hover { background: var(--blue-d); transform: translateY(-1px); }
.btn--navy { background: var(--blue); color: #fff; }
.btn--navy:hover { background: var(--blue-d); }
.btn--ghost { background: var(--card); color: var(--blue-d); border: 1.5px solid var(--blue); }
.btn--ghost:hover { background: var(--blue-l); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; filter: none; }

/* Card base */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }

/* Pills / badges */
.pill { font-size: 12.5px; font-weight: 700; padding: 5px 12px; border-radius: 99px; font-family: var(--font-b); }
.pill--green { background: var(--green); color: #fff; }
.pill--blue { background: var(--blue-l); color: var(--blue-d); }
.pill--navy { background: #e2e9f1; color: var(--navy); }

/* Barras de progreso — verde plano */
.bar { height: 8px; background: #e3ead2; border-radius: 99px; overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: 99px; }
.bar--green > i { background: var(--green); }
.bar--blue > i { background: var(--blue); }
.bar--navy > i { background: var(--navy); }

/* Stack de avatares */
.stack { display: flex; align-items: center; }
.stack > span { width: 26px; height: 26px; border-radius: 50%; margin-left: -8px; border: 2px solid var(--card); display: grid; place-items: center; font-size: 10px; font-weight: 600; color: #fff; }
.stack > span:first-child { margin-left: 0; }
.av-green { background: var(--green); color: #fff; }
.av-blue { background: var(--blue); }
.av-navy { background: var(--navy); }
.av-more { background: #e2e9f1; color: var(--muted); }

/* Animación de entrada escalonada */
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
.rise { opacity: 0; animation: rise .5s cubic-bezier(.2,.7,.2,1) forwards; }
.d1 { animation-delay: .04s; } .d2 { animation-delay: .10s; } .d3 { animation-delay: .16s; }
.d4 { animation-delay: .22s; } .d5 { animation-delay: .28s; } .d6 { animation-delay: .34s; }

@media (prefers-reduced-motion: reduce) {
  .rise { animation: none; opacity: 1; }
  html { scroll-behavior: auto; }
}

/* Toast / aviso flotante */
.glab-toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(14px); background: var(--navy); color: #fff; font-family: var(--font-b); font-size: 14.5px; font-weight: 500; padding: 13px 20px; border-radius: 12px; box-shadow: 0 12px 34px rgba(0,40,80,0.28); opacity: 0; transition: opacity .25s, transform .25s; z-index: 3000; max-width: 90vw; display: flex; align-items: center; gap: 9px; }
.glab-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.glab-toast svg { width: 18px; height: 18px; color: #cfe87a; flex-shrink: 0; }

/* Menú de compartir */
.share-pop { position: absolute; z-index: 3000; background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-lg); padding: 8px; min-width: 256px; }
.share-pop__title { font-size: 12px; color: var(--muted); font-weight: 700; padding: 6px 12px 6px; }
.share-pop a, .share-pop button { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 9px; font-family: var(--font-b); font-size: 14.5px; color: var(--ink); text-decoration: none; background: none; border: none; cursor: pointer; width: 100%; text-align: left; }
.share-pop a:hover, .share-pop button:hover { background: var(--paper); }
.share-pop svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--blue-d); }
.share-pop__note { font-size: 11.5px; line-height: 1.45; color: var(--muted); padding: 8px 12px 4px; margin-top: 4px; border-top: 1px solid var(--line); max-width: 250px; }

/* Búsqueda como input real */
input.search { font-family: var(--font-b); outline: none; color: var(--ink); }
input.search:focus { border-color: var(--blue); }
input.search::placeholder { color: var(--faint); }

/* ====================== RESPONSIVE ====================== */
@media (max-width: 1080px) {
  .sb { width: 76px; padding: 22px 12px; }
  .sb__logo-name, .sb__nav a span, .sb__switch, .sb__cta, .sb__label, .sb__user-meta { display: none; }
  .sb__logo { justify-content: center; padding: 6px 0 18px; }
  .sb__logo-img { height: auto; max-width: 50px; }
  .sb__nav a { justify-content: center; }
  .sb__user { justify-content: center; }
}
@media (max-width: 720px) {
  .sb { display: none; }
  .topbar { padding: 14px 18px; }
  .search { display: none; }
  .content { padding: 22px 18px 60px; }
}



/* ===== mi-aula.html ===== */
.hero { position: relative; overflow: hidden; border-radius: var(--r-lg); padding: 32px 36px;
    background: var(--green);
    color: #fff; display: flex; align-items: center; justify-content: space-between; gap: 28px; box-shadow: var(--shadow-md); margin-bottom: 28px; min-height: 214px; }
  .hero__art { position: absolute; inset: 0; z-index: 0; }
  .hero__l { position: relative; z-index: 1; }
  .hero__eyebrow { font-family: var(--font-d); font-size: 12.5px; letter-spacing: 0.18em; text-transform: uppercase; color: #fff; opacity: .9; font-weight: 700; }
  .hero__title { font-size: 37px; font-weight: 800; margin: 11px 0 6px; line-height: 1.06; color: #fff; }
  .hero__sub { color: #fff; opacity: .92; font-size: 17px; margin-bottom: 22px; max-width: 400px; }
  .hero__row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
  .streak { display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid rgba(0,40,80,0.12); color: var(--navy); font-size: 13px; padding: 10px 14px; border-radius: 12px; }
  .streak b { font-family: var(--font-d); }
  .ring { position: relative; flex-shrink: 0; width: 138px; height: 138px; }
  .ring svg { transform: rotate(-90deg); }
  .ring__c { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; }
  .ring__pct { font-family: var(--font-d); font-size: 34px; font-weight: 800; line-height: 1; }
  .ring__lab { font-size: 11px; color: #fff; opacity: .88; margin-top: 3px; }

  .stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-bottom: 34px; }
  .stat { display: flex; align-items: center; gap: 14px; padding: 18px 20px; transition: transform .15s, box-shadow .15s; }
  .stat:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
  .stat__ic { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; flex-shrink: 0; }
  .stat__ic svg { width: 22px; height: 22px; }
  .ic-g { background: var(--green-l); color: var(--green-d); } .ic-b { background: var(--blue-l); color: var(--blue-d); } .ic-n { background: #e2e9f1; color: var(--navy); }
  .stat__lab { font-size: 14px; color: var(--muted); margin-bottom: 3px; }
  .stat__val { font-family: var(--font-d); font-size: 29px; font-weight: 800; display: flex; align-items: baseline; gap: 8px; }
  .delta { font-family: var(--font-b); font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 99px; }
  .delta.up { background: var(--green-l); color: var(--green-d); } .delta.in { background: var(--blue-l); color: var(--blue-d); }

  .rutas { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap: 18px; margin-bottom: 36px; }
  .ruta { position: relative; overflow: hidden; padding: 20px 22px; cursor: pointer; transition: transform .16s, box-shadow .16s; }
  .ruta::before { content: none; }
  .ruta__cover { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; height: 168px; margin: -20px -22px 16px; background: #eef1ea; color: var(--faint); border-bottom: 1px solid var(--line); }
  .ruta__cover svg { width: 28px; height: 28px; }
  .ruta__cover span { font-size: 11.5px; font-weight: 600; }
  .ruta.g::before { background: var(--green); }
  .ruta.b::before { background: var(--blue); }
  .ruta.n::before { background: var(--blue); }
  .ruta.bd::before { background: var(--blue-d); }
  .ruta:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
  .ruta__h { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; }
  .ruta__ic { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; color: #fff; font-family: var(--font-d); font-weight: 800; font-size: 16px; flex-shrink: 0; }
  .ruta.g .ruta__ic { background: var(--green); }
  .ruta.b .ruta__ic { background: var(--blue); }
  .ruta.n .ruta__ic { background: var(--blue); }
  .ruta.bd .ruta__ic { background: var(--blue-d); }
  .ruta__ic svg { width: 23px; height: 23px; }
  .bar--navy > i { background: var(--navy); }
  .bar--bd > i { background: var(--blue-d); }
  .ruta__join { font-size: 14px; color: var(--blue-d); font-weight: 700; }
  .ruta__t { font-family: var(--font-d); font-weight: 700; font-size: 17px; flex: 1; }
  .ruta__meta { font-size: 14px; color: var(--muted); margin-top: 9px; }
  .ruta__f { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; padding-top: 15px; border-top: 1px solid var(--line-soft); }
  .ruta__next { font-size: 12px; color: var(--muted); } .ruta__next b { color: var(--ink); font-weight: 600; }
  .ruta.lock { background: #f2f6fa; border-style: dashed; display: flex; flex-direction: column; justify-content: center; }
  .ruta.lock::before { display: none; }
  .lock__row { display: flex; align-items: center; gap: 11px; }
  .lock__b { width: 42px; height: 42px; border-radius: 13px; background: #e2e9f1; color: var(--muted); display: grid; place-items: center; }
  .lock__name { font-family: var(--font-d); font-weight: 700; color: var(--muted); }
  .lock__price { margin-top: 14px; font-size: 13px; color: var(--ink); font-weight: 600; } .lock__price b { font-family: var(--font-d); }

  .resume { display: flex; gap: 22px; align-items: center; padding: 18px; margin-bottom: 36px; }
  .resume__thumb { position: relative; width: 190px; height: 112px; border-radius: 15px; flex-shrink: 0; overflow: hidden; background: var(--blue); display: grid; place-items: center; }
  .resume__thumb::after { content: ""; position: absolute; width: 70px; height: 70px; border-radius: 14px; background: rgba(255,255,255,0.22); top: -26px; right: -22px; transform: rotate(18deg); }
  .resume__play { position: relative; z-index: 1; width: 48px; height: 48px; border-radius: 50%; background: #fff; color: var(--green-d); display: grid; place-items: center; }
  .resume__play svg { width: 20px; height: 20px; margin-left: 2px; }
  .resume__b { flex: 1; min-width: 0; }
  .resume__e { font-size: 12.5px; color: var(--blue-d); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
  .resume__t { font-family: var(--font-d); font-weight: 700; font-size: 21px; margin: 6px 0 11px; }
  .resume__bar { max-width: 360px; }
  .resume__m { font-size: 13.5px; color: var(--muted); margin-top: 8px; }

  .logros { display: flex; gap: 11px; flex-wrap: wrap; margin-bottom: 36px; }
  .logro { display: flex; align-items: center; gap: 9px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 11px 16px; font-size: 14.5px; font-weight: 500; box-shadow: var(--shadow-sm); }
  .logro svg { width: 18px; height: 18px; } .logro.g svg { color: var(--green-d); } .logro.b svg { color: var(--blue-d); } .logro.n svg { color: var(--navy); }
  .logro.dim { color: var(--faint); border-style: dashed; box-shadow: none; }

  .comm { padding: 6px 6px 10px; }
  .comm__h { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px 10px; }
  .comm__note { font-size: 13.5px; color: var(--muted); display: flex; align-items: center; gap: 7px; }
  .comm__note svg { width: 15px; height: 15px; color: var(--blue-d); }
  .post { display: flex; gap: 13px; padding: 13px 18px; border-top: 1px solid var(--line-soft); transition: background .12s; }
  .post:hover { background: #f7fafd; }
  .post__av { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 600; font-size: 13px; flex-shrink: 0; }
  .post__name { font-weight: 600; font-size: 15px; } .post__room { font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 99px; background: var(--blue-l); color: var(--blue-d); margin-left: 5px; }
  .post__txt { font-size: 14.5px; color: var(--muted); margin-top: 3px; }
  .post__time { font-size: 11px; color: var(--faint); white-space: nowrap; }
  .comm__f { padding: 14px 18px 6px; border-top: 1px solid var(--line-soft); }

/* ===== rutas.html ===== */
.page-head { margin-bottom: 26px; }
  .eyebrow { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-d); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--green-d); font-weight: 700; }
  .eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--green); border-radius: 2px; }
  .page-title { font-size: 32px; font-weight: 800; margin-top: 8px; }
  .page-title span { color: var(--green); }
  .page-sub { color: var(--muted); margin-top: 4px; font-size: 16px; max-width: 560px; }

  .rcat { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; margin-top: 26px; }
  .rcard { position: relative; overflow: hidden; border-radius: 20px; padding: 26px 24px; color: #fff; min-height: 290px; display: flex; flex-direction: column; text-decoration: none; transition: transform .18s, box-shadow .18s; }
  .rcard:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
  .rcard.c-green { background: var(--green); }
  .rcard.c-navy { background: var(--blue); }
  .rcard.c-blue { background: var(--blue); }
  .rcard.c-bd { background: var(--blue-d); }
  .rcard::after { content: ""; position: absolute; right: -34px; bottom: -34px; width: 110px; height: 110px; border-radius: 50%; background: rgba(255,255,255,0.10); }
  .rcard__badge { position: absolute; top: 18px; right: 18px; font-size: 11px; font-weight: 700; background: rgba(255,255,255,0.22); padding: 5px 11px; border-radius: 99px; }
  .rcard__ic { width: 52px; height: 52px; border-radius: 14px; background: rgba(255,255,255,0.2); display: grid; place-items: center; margin-bottom: 16px; }
  .rcard__ic svg { width: 26px; height: 26px; }
  .rcard__num { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; color: rgba(255,255,255,0.65); }
  .rcard__title { font-family: var(--font-d); font-size: 22px; font-weight: 800; margin: 4px 0 12px; line-height: 1.15; }
  .rcard__sep { width: 30px; height: 2px; background: rgba(255,255,255,0.4); margin-bottom: 12px; }
  .rcard__desc { font-size: 15px; color: rgba(255,255,255,0.88); line-height: 1.6; flex: 1; }
  .rcard__foot { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; }
  .rcard__price { font-family: var(--font-d); font-weight: 700; font-size: 15px; }
  .rcard__price small { font-weight: 400; opacity: .8; }
  .rcard__cta { position: relative; font-family: var(--font-d); font-weight: 700; font-size: 14.5px; display: inline-flex; align-items: center; gap: 7px; border-bottom: 1.5px solid rgba(255,255,255,0.45); padding-bottom: 2px; }
  .rcard:hover .rcard__cta { gap: 11px; }
  .rcard__cta svg { width: 16px; height: 16px; }

  /* Panel de ruta activa con sus cursos */
  .rpanel { padding: 0; overflow: hidden; margin-bottom: 18px; }
  .rpanel__cover { width: 100%; height: 150px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; background: #eef1ea; color: var(--faint); border-bottom: 1px solid var(--line); }
  .rpanel__cover svg { width: 34px; height: 34px; }
  .rpanel__cover span { font-size: 12.5px; font-weight: 600; }
  .rpanel__cover img { width: 100%; height: 100%; object-fit: cover; }
  .rpanel__head { display: flex; align-items: center; gap: 14px; padding: 18px 22px; cursor: pointer; }
  .rpanel.is-open .rpanel__head { border-bottom: 1px solid var(--line); }
  .rpanel__chev { width: 20px; height: 20px; color: var(--muted); transition: transform .2s; flex-shrink: 0; }
  .rpanel.is-open .rpanel__chev { transform: rotate(180deg); }
  .journey { display: none; }
  .rpanel.is-open .journey { display: block; }
  .step__block { transition: box-shadow .15s, border-color .15s; }
  .step__block:hover { box-shadow: var(--shadow-md); }
  .rpanel__ic { width: 48px; height: 48px; border-radius: 13px; display: grid; place-items: center; color: #fff; flex-shrink: 0; }
  .rpanel__ic svg { width: 24px; height: 24px; }
  .rp-green { background: var(--green); } .rp-blue { background: var(--blue); }
  .rpanel__info { flex: 1; min-width: 0; }
  .rpanel__name { font-family: var(--font-d); font-weight: 800; font-size: 19px; }
  .rpanel__meta { font-size: 13.5px; color: var(--muted); margin-top: 2px; }
  .rpanel__bar { width: 150px; flex-shrink: 0; }
  .rcourses { padding: 8px 12px 12px; }
  .rcourse { display: flex; align-items: center; gap: 13px; padding: 11px 12px; border-radius: 11px; text-decoration: none; transition: background .12s; }
  .rcourse:hover { background: var(--paper); }
  .rcourse__ic { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--line); display: grid; place-items: center; font-size: 12px; color: var(--faint); flex-shrink: 0; }
  .rcourse__ic svg { width: 15px; height: 15px; }
  .rcourse.done .rcourse__ic { background: var(--green); color: #fff; border-color: var(--green); }
  .rcourse.current .rcourse__ic { background: var(--blue); color: #fff; border-color: var(--blue); }
  .rcourse__t { flex: 1; font-size: 15.5px; color: var(--ink); font-weight: 500; }
  .rcourse.current .rcourse__t { font-weight: 700; }
  .rcourse__meta { font-size: 13px; color: var(--muted); }
  .rcourse__go { color: var(--faint); display: flex; }
  .rcourse__go svg { width: 18px; height: 18px; }
  .rcourse__tag { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 99px; background: var(--blue-l); color: var(--blue-d); }

  /* Ruta de viaje (journey) — cada curso es un paso conectado */
  .journey { padding: 18px 22px 22px; }
  .step { display: grid; grid-template-columns: 36px 1fr; gap: 16px; }
  .step__rail { position: relative; display: flex; justify-content: center; }
  .step__rail::before { content: ""; position: absolute; left: 50%; transform: translateX(-50%); top: 0; bottom: -2px; width: 3px; background: #e3ead2; border-radius: 3px; }
  .step:first-child .step__rail::before { top: 14px; }
  .step:last-child .step__rail::before { bottom: auto; height: 14px; }
  .step.done .step__rail::before, .step.current .step__rail::before { background: var(--green); }
  .step__node { position: relative; z-index: 1; width: 34px; height: 34px; border-radius: 50%; background: #fff; border: 2px solid #dbe3cb; display: grid; place-items: center; color: var(--faint); font-family: var(--font-d); font-weight: 700; font-size: 14px; margin-top: 4px; }
  .step__node svg { width: 17px; height: 17px; }
  .step.done .step__node { background: var(--green); border-color: var(--green); color: #fff; }
  .step.current .step__node { background: var(--blue); border-color: var(--blue); color: #fff; }
  .step__block { border: 1px solid var(--line); border-radius: 14px; margin-bottom: 16px; overflow: hidden; background: var(--card); }
  .step.is-open .step__block { border-color: var(--green); }
  .step.is-open .step__head { background: var(--green); }
  .step.is-open .step__kicker, .step.is-open .step__title { color: #fff; }
  .step.is-open .step__sub { color: #eef4e1; }
  .step.is-open .step__sub b { color: #fff; }
  .step.is-open .step__enter, .step.is-open .step__chev { color: #fff; }
  .step.is-open .step__lessons { background: #fff; }
  .step__head { display: flex; align-items: center; gap: 14px; padding: 14px 16px; cursor: pointer; }
  .step__info { flex: 1; min-width: 0; }
  .step__kicker { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--navy); }
  .step.is-open .step__kicker { color: #fff; }
  .step__title { font-family: var(--font-d); font-weight: 800; font-size: 17px; color: var(--ink); margin-top: 2px; }
  .step__sub { font-size: 13px; color: var(--muted); margin-top: 4px; display: flex; align-items: center; gap: 7px; }
  .step__sub b { color: var(--ink); font-weight: 600; }
  .step__r { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
  .step__enter { font-family: var(--font-d); font-weight: 700; font-size: 13.5px; color: var(--blue-d); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
  .step__enter svg { width: 15px; height: 15px; }
  .step__enter:hover { gap: 9px; }
  .step__chev { width: 18px; height: 18px; color: var(--faint); transition: transform .2s; }
  .step.is-open .step__chev { transform: rotate(180deg); }
  .step__lessons { display: none; padding: 4px 16px 12px; border-top: 1px solid var(--line-soft); }
  .step.is-open .step__lessons { display: block; }
  .jlesson { display: flex; align-items: center; gap: 12px; padding: 9px 2px; text-decoration: none; }
  .jlesson__ic { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--line); display: grid; place-items: center; font-size: 10px; color: var(--faint); flex-shrink: 0; }
  .jlesson__ic svg { width: 12px; height: 12px; }
  .jlesson.done .jlesson__ic { background: var(--green); color: #fff; border-color: var(--green); }
  .jlesson.current .jlesson__ic { background: var(--blue); color: #fff; border-color: var(--blue); }
  .jlesson__n { font-size: 12px; font-weight: 700; color: var(--faint); white-space: nowrap; }
  .jlesson__t { flex: 1; font-size: 14.5px; color: var(--ink); }
  .jlesson.current .jlesson__t { font-weight: 700; }

/* ===== curso.html ===== */
.course { display: grid; grid-template-columns: 1fr 320px; gap: 24px; align-items: start; }
  @media (max-width: 1080px) { .course { grid-template-columns: 1fr; } }

  /* Reproductor */
  .player { position: relative; aspect-ratio: 16/9; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-md);
    background: var(--blue); display: grid; place-items: center; }
  .player::before { content: ""; position: absolute; width: 150px; height: 150px; border-radius: 26px; background: rgba(255,255,255,0.16); top: -50px; right: 60px; transform: rotate(18deg); }
  .player__play { position: relative; z-index: 1; width: 76px; height: 76px; border-radius: 50%; background: rgba(255,255,255,0.16); border: 1.5px solid rgba(255,255,255,0.4); display: grid; place-items: center; cursor: pointer; transition: transform .18s, background .18s; }
  .player__play:hover { transform: scale(1.06); background: var(--green); border-color: var(--green); }
  .player__play svg { width: 30px; height: 30px; color: #fff; margin-left: 4px; }
  .player__bar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 16px 20px; display: flex; align-items: center; gap: 12px; background: rgba(0,20,40,0.5); color: #fff; }
  .player__track { flex: 1; height: 5px; background: rgba(255,255,255,0.25); border-radius: 99px; overflow: hidden; }
  .player__track > i { display: block; width: 42%; height: 100%; background: var(--green); border-radius: 99px; }
  .player__time { font-size: 12px; font-variant-numeric: tabular-nums; }

  .lh { display: flex; align-items: start; justify-content: space-between; gap: 16px; margin: 22px 0 6px; }
  .lh__e { font-size: 11px; color: var(--blue-d); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
  .lh__t { font-family: var(--font-d); font-size: 30px; font-weight: 800; margin-top: 6px; line-height: 1.1; }
  .lh__teacher { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
  .lh__teacher .av { width: 34px; height: 34px; border-radius: 50%; background: var(--navy); color: #fff; display: grid; place-items: center; font-size: 12px; font-weight: 600; }
  .lh__teacher b { font-family: var(--font-d); font-size: 14px; } .lh__teacher span { font-size: 12px; color: var(--muted); }

  .lesson-desc { font-size: 16.5px; color: #3a4a60; line-height: 1.75; margin: 16px 0 22px; }

  /* Pestañas */
  .tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--line); margin-bottom: 22px; }
  .tab { font-family: var(--font-d); font-weight: 600; font-size: 15.5px; color: var(--muted); padding: 12px 16px; cursor: pointer; position: relative; display: flex; align-items: center; gap: 8px; background: none; border: none; }
  .tab .cnt { font-size: 11px; background: var(--green-l); color: var(--green-d); padding: 1px 8px; border-radius: 99px; font-family: var(--font-b); font-weight: 600; }
  .tab.is-active { color: var(--ink); }
  .tab.is-active::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2.5px; background: var(--blue); border-radius: 2px; }

  /* Paneles de pestañas */
  .tab-panel { display: none; }
  .tab-panel.is-active { display: block; }

  /* Navegación entre lecciones */
  .lesson-nav { display: flex; gap: 10px; justify-content: space-between; margin: 0 0 22px; }
  .lnav { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-d); font-weight: 700; font-size: 14.5px; padding: 11px 18px; border-radius: 11px; border: 1.5px solid var(--blue); background: var(--card); color: var(--blue-d); cursor: pointer; transition: background .15s; }
  .lnav:hover:not(:disabled) { background: var(--blue-l); }
  .lnav svg { width: 17px; height: 17px; }
  .lnav:disabled { opacity: .45; cursor: not-allowed; border-color: var(--line); color: var(--faint); }

  /* ====== RECURSOS ====== */
  .res-head, .notes-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
  .res-head h3, .notes-head h3 { font-size: 19px; }
  .res-list { display: flex; flex-direction: column; gap: 12px; }
  .res { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-sm); cursor: pointer; transition: transform .15s, box-shadow .15s; }
  .res:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
  .res__ic { width: 46px; height: 46px; border-radius: 12px; background: var(--blue-l); color: var(--blue-d); display: grid; place-items: center; flex-shrink: 0; }
  .res__ic svg { width: 23px; height: 23px; }
  .res__b { flex: 1; min-width: 0; }
  .res__name { font-family: var(--font-d); font-weight: 600; font-size: 16px; color: var(--ink); display: block; }
  .res__meta { font-size: 13px; color: var(--muted); }
  .res__dl { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; color: var(--blue-d); flex-shrink: 0; }
  .res__dl svg { width: 20px; height: 20px; }
  .res:hover .res__dl { background: var(--blue-l); }

  /* ====== MIS NOTAS ====== */
  .note-composer { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 14px; box-shadow: var(--shadow-sm); margin-bottom: 22px; }
  .note-input { width: 100%; min-height: 66px; border: 1px solid var(--line); border-radius: 11px; padding: 13px 15px; font-family: var(--font-b); font-size: 16px; color: var(--ink); resize: vertical; outline: none; background: #fbfcfe; }
  .note-input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-l); }
  .note-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 11px; gap: 12px; flex-wrap: wrap; }
  .note-hint { font-size: 13.5px; color: var(--faint); display: flex; align-items: center; gap: 7px; }
  .note-hint svg { width: 15px; height: 15px; }
  .note-list { display: flex; flex-direction: column; gap: 12px; }
  .note { background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--blue); border-radius: 0 12px 12px 0; padding: 13px 16px; box-shadow: var(--shadow-sm); }
  .note__time { font-size: 13px; color: var(--blue-d); font-weight: 600; }
  .note__txt { font-size: 16px; color: #36465c; line-height: 1.6; margin-top: 5px; }

  /* ====== DEBATE ====== */
  .debate__intro { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
  .debate__intro h3 { font-size: 17px; }
  .debate__intro .pill { margin-left: auto; }
  .composer { display: flex; gap: 12px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px; box-shadow: var(--shadow-sm); margin-bottom: 26px; }
  .composer__av { width: 42px; height: 42px; border-radius: 50%; background: #d4dae0; color: #7a879a; display: grid; place-items: center; overflow: hidden; flex-shrink: 0; }
  .composer__av svg { width: 25px; height: 25px; }
  .composer__av img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
  .composer__box { flex: 1; }
  .composer__input { width: 100%; min-height: 48px; border: 1px solid var(--line); border-radius: 11px; padding: 13px 15px; font-family: var(--font-b); font-size: 15.5px; color: var(--ink); resize: none; outline: none; background: #fbfcfe; }
  .composer__input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-l); }
  .composer__foot { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }
  .composer__hint { font-size: 12px; color: var(--faint); }

  .thread { display: flex; flex-direction: column; gap: 22px; }
  .cmt { display: flex; gap: 13px; }
  .cmt__av { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 600; font-size: 13px; flex-shrink: 0; }
  .cmt__body { flex: 1; min-width: 0; }
  .cmt__top { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
  .cmt__name { font-family: var(--font-d); font-weight: 700; font-size: 15.5px; }
  .role { font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 2px 8px; border-radius: 99px; }
  .role--teacher { background: var(--navy); color: #fff; }
  .role--mentor { background: var(--blue-l); color: var(--blue-d); }
  .cmt__time { font-size: 12px; color: var(--faint); }
  .cmt__txt { font-size: 16px; color: #36465c; line-height: 1.72; margin: 6px 0 9px; }
  .cmt__actions { display: flex; align-items: center; gap: 18px; }
  .cmt__act { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); font-weight: 500; cursor: pointer; background: none; border: none; font-family: var(--font-b); }
  .cmt__act svg { width: 16px; height: 16px; }
  .cmt__act:hover { color: var(--green-d); }
  .cmt__act.liked { color: var(--green-d); }
  .replies { margin-top: 18px; padding-left: 20px; border-left: 2px solid var(--line); display: flex; flex-direction: column; gap: 18px; }

  /* Rail temario */
  .rail { position: sticky; top: 92px; }
  .rail__card { padding: 6px; }
  .rail__toggle { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; cursor: pointer; font-family: var(--font-d); font-weight: 700; font-size: 16.5px; color: var(--ink); background: none; border: none; text-align: left; }
  .rail__toggle-l { display: flex; align-items: center; gap: 9px; }
  .rail__toggle-l svg { width: 19px; height: 19px; color: var(--blue-d); }
  .rail__toggle-r { display: flex; align-items: center; gap: 9px; }
  .rail__chev { width: 18px; height: 18px; color: var(--muted); transition: transform .2s; }
  .rail__card.is-open .rail__chev { transform: rotate(180deg); }
  .rail__head { padding: 6px 16px 12px; }
  .rail__meta { font-size: 13px; color: var(--muted); margin-top: 3px; }
  .rail__inner { display: block; }
  /* Escritorio: temario siempre desplegado, sin toggle */
  @media (min-width: 1081px) {
    .rail__toggle { cursor: default; }
    .rail__chev, .rail__toggle-r .pill { display: none; }
  }
  /* Móvil: temario arriba y colapsable */
  @media (max-width: 1080px) {
    .rail { position: static; top: auto; order: -1; }
    .rail__inner { display: none; }
    .rail__card.is-open .rail__inner { display: block; }
  }
  .rail__prog { margin: 12px 0 4px; }
  .mod { padding: 6px 8px; }
  .mod__name { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); font-weight: 600; padding: 12px 8px 6px; }
  .lsn { display: flex; align-items: center; gap: 11px; padding: 10px 10px; border-radius: 11px; cursor: pointer; transition: background .12s; }
  .lsn:hover { background: var(--paper); }
  .lsn.done .lsn__ic { background: var(--green); color: #fff; border-color: var(--green); }
  .lsn.current { background: var(--green-l); }
  .lsn.current .lsn__ic { background: #fff; color: var(--green-d); border-color: var(--green); }
  .lsn__ic { width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--line); display: grid; place-items: center; font-size: 11px; color: var(--faint); flex-shrink: 0; }
  .lsn__ic svg { width: 14px; height: 14px; }
  .lsn__t { font-size: 15px; color: var(--ink); flex: 1; line-height: 1.3; }
  .lsn.current .lsn__t { font-weight: 600; }
  .lsn__dur { font-size: 11px; color: var(--faint); }
  .lsn.locked { opacity: 0.55; }

/* ===== comunidad.html ===== */
/* Cabecera de la comunidad de la ruta */
  .chero { position: relative; overflow: hidden; border-radius: var(--r-lg); padding: 26px 28px; color: #fff; box-shadow: var(--shadow-md); margin-bottom: 18px;
    background: var(--green); }
  .chero::before { content: ""; position: absolute; width: 160px; height: 160px; border-radius: 28px; background: var(--navy); opacity: .12; top: -54px; right: 90px; transform: rotate(18deg); }
  .chero__row { position: relative; z-index: 1; display: flex; align-items: center; gap: 16px; }
  .chero__ic { width: 56px; height: 56px; border-radius: 16px; background: var(--blue); color: #fff; display: grid; place-items: center; font-family: var(--font-d); font-weight: 800; font-size: 24px; flex-shrink: 0; position: relative; z-index: 1; }
  .chero__meta { flex: 1; min-width: 0; }
  .chero__eyebrow { font-family: var(--font-d); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: #fff; opacity: .9; font-weight: 700; }
  .chero__title { font-family: var(--font-d); font-size: 27px; font-weight: 800; margin-top: 4px; color: #fff; }
  .chero__sub { font-size: 13px; color: #fff; opacity: .9; margin-top: 4px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
  .chero__sub span { display: inline-flex; align-items: center; gap: 6px; }
  .chero__sub svg { width: 14px; height: 14px; }
  /* Selector de ruta (solo tus rutas) */
  .switch { position: relative; }
  .switch__btn { display: inline-flex; align-items: center; gap: 9px; background: #fff; border: 1px solid rgba(0,40,80,0.12); color: var(--navy); font-family: var(--font-d); font-weight: 600; font-size: 13.5px; padding: 10px 14px; border-radius: 12px; cursor: pointer; }
  .switch__btn svg { width: 16px; height: 16px; }
  .switch__menu { position: absolute; right: 0; top: calc(100% + 8px); width: 230px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-lg); padding: 8px; z-index: 5; }
  .switch__lab { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); font-weight: 600; padding: 8px 10px 6px; }
  .switch__item { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 10px; font-size: 13.5px; color: var(--ink); }
  .switch__item:hover { background: var(--paper); }
  .switch__item.on { background: var(--green-l); }
  .switch__item .d { width: 9px; height: 9px; border-radius: 50%; }
  .switch__item .chk { margin-left: auto; color: var(--green-d); display: none; }
  .switch__item.on .chk { display: block; }
  .switch__foot { border-top: 1px solid var(--line-soft); margin-top: 6px; padding: 9px 10px 4px; font-size: 12px; color: var(--faint); display: flex; align-items: center; gap: 7px; }
  .switch__foot svg { width: 13px; height: 13px; }

  /* Aviso de aislamiento */
  .iso { display: flex; align-items: center; gap: 11px; background: var(--green-l); border: 1px solid #d9e7b9; border-radius: 14px; padding: 12px 16px; margin-bottom: 22px; font-size: 13.5px; color: var(--navy); }
  .iso svg { width: 18px; height: 18px; color: var(--green-d); flex-shrink: 0; }
  .iso b { font-weight: 700; }

  .layout { display: grid; grid-template-columns: 1fr 296px; gap: 24px; align-items: start; }
  @media (max-width: 1080px) { .layout { grid-template-columns: 1fr; } }

  /* Canales */
  .channels { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
  .chan { font-family: var(--font-d); font-weight: 600; font-size: 14.5px; padding: 9px 16px; border-radius: 99px; border: 1px solid var(--line); background: var(--card); color: var(--muted); cursor: pointer; transition: all .14s; }
  .chan:hover { border-color: var(--blue); color: var(--blue-d); }
  .chan.on { background: var(--navy); color: #fff; border-color: var(--navy); }

  /* Composer */
  .composer { display: flex; gap: 12px; padding: 14px; margin-bottom: 22px; }
  .composer__av { width: 44px; height: 44px; border-radius: 50%; background: #d4dae0; color: #7a879a; display: grid; place-items: center; overflow: hidden; flex-shrink: 0; }
  .composer__av svg { width: 26px; height: 26px; }
  .composer__av img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
  .composer__box { flex: 1; }
  .composer__in { width: 100%; min-height: 50px; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; font-family: var(--font-b); font-size: 15.5px; color: var(--ink); background: #fbfcfe; outline: none; resize: none; }
  .composer__in:focus { border-color: var(--green); box-shadow: 0 0 0 3px var(--green-l); }
  .composer__foot { display: flex; align-items: center; justify-content: space-between; margin-top: 11px; }
  .composer__tools { display: flex; gap: 6px; }
  .composer__tool { width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); display: grid; place-items: center; color: var(--muted); cursor: pointer; }
  .composer__tool:hover { color: var(--blue-d); border-color: var(--blue); }
  .composer__tool svg { width: 17px; height: 17px; }

  /* Posts */
  .feed { display: flex; flex-direction: column; gap: 18px; }
  .post { padding: 18px 20px; }
  .post__top { display: flex; align-items: center; gap: 11px; }
  .post__av { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 600; font-size: 14px; flex-shrink: 0; }
  .post__name { font-family: var(--font-d); font-weight: 700; font-size: 16px; }
  .post__sub { font-size: 13px; color: var(--faint); display: flex; align-items: center; gap: 7px; }
  .post__chan { font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 99px; }
  .pc-general { background: #e2e9f1; color: var(--navy); }
  .pc-pregunta { background: var(--blue-l); color: var(--blue-d); }
  .pc-logro { background: var(--green-l); color: var(--green-d); }
  .post__txt { font-size: 16px; color: #35455b; line-height: 1.72; margin: 13px 0; }
  .post__img { height: 180px; border-radius: 14px; margin: 13px 0; background: var(--navy); position: relative; overflow: hidden; display: grid; place-items: center; color: rgba(255,255,255,0.85); font-size: 13px; }
  .post__img::after { content:""; position:absolute; width:90px; height:90px; border-radius:18px; background:var(--green); top:-30px; right:-24px; transform: rotate(18deg); }
  .post__acts { display: flex; align-items: center; gap: 22px; padding-top: 13px; border-top: 1px solid var(--line-soft); }
  .post__act { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--muted); font-weight: 500; cursor: pointer; background: none; border: none; font-family: var(--font-b); }
  .post__act svg { width: 17px; height: 17px; }
  .post__act:hover { color: var(--green-d); }
  .post__act.on { color: var(--green-d); }

  /* Rail */
  .rail { position: sticky; top: 92px; display: flex; flex-direction: column; gap: 18px; }
  .panel { padding: 18px; }
  .panel__t { font-family: var(--font-d); font-weight: 700; font-size: 14px; display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
  .panel__t a { font-size: 12px; color: var(--blue-d); font-weight: 600; }
  .member { display: flex; align-items: center; gap: 11px; padding: 8px 0; }
  .member__av { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 600; font-size: 12px; flex-shrink: 0; }
  .member__n { font-size: 15px; font-weight: 500; } .member__r { font-size: 12.5px; color: var(--faint); }
  .member__badge { margin-left: auto; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 2px 8px; border-radius: 99px; background: var(--navy); color: #fff; }

  .event { background: var(--blue-l); border-color: #cfe6fb; }
  .event__when { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--blue-d); background: var(--blue-l); padding: 4px 10px; border-radius: 99px; }
  .event__t { font-family: var(--font-d); font-weight: 700; font-size: 15px; margin: 11px 0 5px; }
  .event__d { font-size: 12.5px; color: var(--muted); margin-bottom: 13px; }

/* ===== recursos.html ===== */
.page-head { margin-bottom: 26px; }
  .page-title { font-size: 30px; font-weight: 800; }
  .page-sub { color: var(--muted); margin-top: 4px; font-size: 16px; max-width: 620px; }

  /* Herramientas */
  .tools { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; margin-bottom: 40px; }
  .tool { display: flex; flex-direction: column; padding: 20px; transition: transform .15s, box-shadow .15s; }
  .tool:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
  .tool__ic { width: 50px; height: 50px; border-radius: 14px; display: grid; place-items: center; color: #fff; margin-bottom: 14px; }
  .tool__ic svg { width: 25px; height: 25px; }
  .t-blue { background: var(--blue); } .t-navy { background: var(--navy); } .t-green { background: var(--green); }
  .tool__name { font-family: var(--font-d); font-weight: 700; font-size: 17px; }
  .tool__desc { font-size: 14px; color: var(--muted); margin: 5px 0 16px; line-height: 1.55; flex: 1; }
  .tool__link { font-family: var(--font-d); font-weight: 700; font-size: 14.5px; color: var(--blue-d); display: inline-flex; align-items: center; gap: 6px; }
  .tool:hover .tool__link { gap: 9px; }
  .tool__link svg { width: 16px; height: 16px; }

  /* Recursos descargables */
  .res-list { display: flex; flex-direction: column; gap: 12px; max-width: 760px; }
  .res { display: flex; align-items: center; gap: 14px; padding: 15px 18px; transition: transform .15s, box-shadow .15s; cursor: pointer; }
  .res:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
  .res__ic { width: 46px; height: 46px; border-radius: 12px; background: var(--blue-l); color: var(--blue-d); display: grid; place-items: center; flex-shrink: 0; }
  .res__ic svg { width: 23px; height: 23px; }
  .res__b { flex: 1; min-width: 0; }
  .res__name { font-family: var(--font-d); font-weight: 600; font-size: 16px; display: block; }
  .res__meta { font-size: 13.5px; color: var(--muted); }
  .res__tag { font-size: 12px; font-weight: 700; padding: 4px 11px; border-radius: 99px; background: var(--green); color: #fff; flex-shrink: 0; }
  .res__dl { width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; color: var(--blue-d); flex-shrink: 0; }
  .res__dl svg { width: 21px; height: 21px; }
  .res:hover .res__dl { background: var(--blue-l); }

/* ===== certificados.html ===== */
.page-head { margin-bottom: 24px; }
  .page-title { font-size: 30px; font-weight: 800; }
  .page-sub { color: var(--muted); margin-top: 4px; font-size: 16px; }

  .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 34px; }
  .stat { display: flex; align-items: center; gap: 14px; padding: 18px 20px; }
  .stat__ic { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; flex-shrink: 0; }
  .stat__ic svg { width: 22px; height: 22px; }
  .ic-g, .ic-b, .ic-n { background: var(--green); color: #fff; }
  .stat__lab { font-size: 14px; color: var(--muted); margin-bottom: 3px; }
  .stat__val { font-family: var(--font-d); font-size: 28px; font-weight: 800; }

  .cert-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 20px; margin-bottom: 38px; }

  /* Diploma */
  .cert { overflow: hidden; transition: transform .15s, box-shadow .15s; }
  .cert:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
  .diploma { position: relative; padding: 26px 18px 18px; border-bottom: 1px solid var(--line); background: #fbfcfe; text-align: center; }
  .diploma::before { content: ""; position: absolute; inset: 9px; border: 1.5px solid #c3d0e0; border-radius: 10px; pointer-events: none; }
  .diploma::after { content: ""; position: absolute; inset: 13px; border: 1px solid #e0e7f0; border-radius: 7px; pointer-events: none; }
  .diploma > * { position: relative; }
  .diploma__brand { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 12px; }
  .diploma__mark { width: 24px; height: 24px; border-radius: 7px; background: var(--navy); color: #fff; display: grid; place-items: center; font-family: var(--font-d); font-weight: 800; font-size: 13px; }
  .diploma__brandname { font-family: var(--font-d); font-weight: 800; font-size: 11px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--navy); }
  .diploma__kicker { font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
  .diploma__title { font-family: var(--font-d); font-size: 19px; font-weight: 800; color: var(--navy); line-height: 1.2; margin: 8px 6px; }
  .diploma__to { font-size: 12.5px; color: var(--muted); }
  .diploma__name { font-family: var(--font-d); font-weight: 800; font-size: 17px; color: var(--ink); margin-top: 1px; }
  .diploma__logo { display: block; width: 84px; height: 26px; margin: 2px auto 12px; }
  .diploma__medal { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 50%; background: var(--green); color: #fff; display: grid; place-items: center; box-shadow: 0 3px 9px rgba(149,177,50,0.45); }
  .diploma__medal svg { width: 18px; height: 18px; }
  .diploma__stamp { display: block; width: 104px; height: 58px; margin: 10px auto -4px; }
  .diploma__signline { border-top: 1px solid #c3d0e0; padding-top: 6px; margin: 6px 38px 0; font-family: var(--font-d); font-weight: 700; font-size: 12.5px; color: var(--ink); }
  .diploma__signrole { font-size: 11px; color: var(--muted); margin-top: 1px; }
  .cert__meta { font-size: 13.5px; }
  .cert__date { color: var(--muted); }

  .cert__foot { padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
  .cert__foot .ruta { font-size: 13.5px; color: var(--blue-d); font-weight: 600; }
  .cert__actions { display: flex; gap: 8px; }
  .btn-sm { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-d); font-weight: 700; font-size: 13.5px; padding: 9px 14px; border-radius: 10px; cursor: pointer; border: none; }
  .btn-sm svg { width: 16px; height: 16px; }
  .btn-sm--dl { background: var(--blue); color: #fff; }
  .btn-sm--dl:hover { background: var(--blue-d); }
  .btn-sm--share { background: var(--card); color: var(--navy); border: 1.5px solid var(--line); }
  .btn-sm--share:hover { border-color: var(--blue); color: var(--blue-d); }

  /* En progreso */
  .prog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
  .prog { padding: 18px 20px; }
  .prog__h { display: flex; align-items: center; gap: 11px; margin-bottom: 12px; }
  .prog__ic { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; color: #fff; flex-shrink: 0; }
  .prog__ic svg { width: 20px; height: 20px; }
  .prog__t { font-family: var(--font-d); font-weight: 700; font-size: 15.5px; flex: 1; }
  .prog__meta { font-size: 13.5px; color: var(--muted); margin-top: 8px; }
  .prog__lock { margin-left: auto; font-size: 11.5px; font-weight: 700; padding: 4px 11px; border-radius: 99px; background: #eef1ea; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
  .prog__lock svg { width: 13px; height: 13px; }
  .lockedseal { background: #e2e9f1; color: var(--muted); }

/* ===== Ajustes de integración en WordPress ===== */
/* El aula ocupa todo el ancho aunque el tema tenga un contenedor estrecho. */
.glab-app { position: relative; width: 100vw; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; }
.glab-app * { box-sizing: border-box; }
/* Avatares reales (get_avatar) dentro de los círculos. */
.post__av img, .cmt__av img, .sb__user-av img, .topbar__av img { width: 100%; height: 100%; border-radius: 50%; display: block; object-fit: cover; }
.post__av, .cmt__av { overflow: hidden; }
/* Fondo de logo y sello del diploma. */
.diploma__logo, .diploma__stamp { background-position: center; background-repeat: no-repeat; background-size: contain; }
/* Comentarios dentro de una publicación de la comunidad. */
.post__comments { border-top: 1px solid var(--line-soft); margin-top: 10px; padding-top: 10px; }
.cmt-list { display: flex; flex-direction: column; gap: 8px; }
.cmt { display: flex; gap: 10px; }
.cmt__av { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; }
.cmt__body { background: var(--paper); border-radius: 12px; padding: 8px 12px; flex: 1; }
.cmt__top { display: flex; gap: 8px; align-items: baseline; }
.cmt__name { font-weight: 600; font-size: 13.5px; }
.cmt__time { font-size: 11px; color: var(--faint); }
.cmt__txt { font-size: 14px; color: var(--ink); margin-top: 2px; }
.cmt-compose { display: flex; gap: 8px; margin-top: 10px; }
.cmt-compose .glab-cmt-input { flex: 1; border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; font-family: var(--font-b); font-size: 14px; }
.post__act.liked, .post__act.on { color: var(--blue-d); }
/* Teaser de comunidad en el dashboard (clases propias para no chocar con .post). */
.gt-list { display: flex; flex-direction: column; }
.gt-post { display: flex; gap: 13px; padding: 13px 18px; border-top: 1px solid var(--line-soft); }
.gt-av { width: 38px; height: 38px; border-radius: 50%; overflow: hidden; flex-shrink: 0; }
.gt-name { font-weight: 600; font-size: 15px; }
.gt-txt { font-size: 14.5px; color: var(--muted); margin-top: 3px; }
/* Aviso de bloqueo / login. */
.glab-locked { text-align: center; padding: 40px 24px; }
.glab-locked__icon { font-size: 36px; }
/* Estado vacío. */
.glab-empty { text-align: center; color: var(--muted); padding: 36px 18px; font-size: 15px; }

/* ===== Pantallas del plugin (definiciones de respaldo) ===== */
.content { padding: 28px 32px 60px; max-width: 1180px; }
.hero { background: var(--green); color: #fff; border-radius: 20px; padding: 30px 32px; margin-bottom: 22px; }
.hero__title { color: #fff; font-family: var(--font-d); font-weight: 800; font-size: 30px; line-height: 1.15; }
.hero__sub { color: rgba(255,255,255,0.92); font-size: 16px; margin-top: 6px; }

/* Rejilla de rutas activas (dashboard) */
.rutas-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; margin-bottom: 32px; }
.ruta { display: block; overflow: hidden; text-decoration: none; color: inherit; transition: transform .15s, box-shadow .15s; }
.ruta:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.ruta__cover { height: 168px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; background: var(--green-l); color: var(--green-d); overflow: hidden; }
.ruta__cover img { width: 100%; height: 100%; object-fit: cover; }
.ruta__cover svg { width: 34px; height: 34px; }
.ruta__cover span { font-size: 12.5px; font-weight: 600; }
.ruta__body { padding: 16px 18px 18px; }
.ruta__title { font-family: var(--font-d); font-weight: 800; font-size: 18.5px; color: var(--navy); margin-bottom: 12px; }
.ruta__meta { font-size: 13.5px; color: var(--muted); margin-top: 8px; }

/* Comunidad */
.comm-switch { display: flex; gap: 9px; flex-wrap: wrap; margin-bottom: 12px; }
.chans { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.glab-feed { display: flex; flex-direction: column; gap: 14px; }
.glab-feed .post { display: block; }

/* Herramientas */
.tools-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; }
.tool { display: flex; flex-direction: column; padding: 20px; text-decoration: none; color: inherit; transition: transform .15s, box-shadow .15s; }
.tool:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.tool__ic { width: 52px; height: 52px; border-radius: 14px; background: var(--green-l); color: var(--green-d); display: grid; place-items: center; margin-bottom: 14px; overflow: hidden; }
.tool__ic svg { width: 26px; height: 26px; } .tool__ic img { width: 100%; height: 100%; object-fit: cover; border-radius: 14px; }
.tool__name { font-family: var(--font-d); font-weight: 700; font-size: 17px; color: var(--navy); }
.tool__cat { font-size: 12.5px; color: var(--blue-d); font-weight: 600; margin: 3px 0 8px; }
.tool__desc { font-size: 14px; color: var(--muted); line-height: 1.55; flex: 1; }
.tool__cta { font-family: var(--font-d); font-weight: 700; font-size: 14px; color: var(--blue-d); margin-top: 14px; }

/* Vista de curso */
.course { display: grid; grid-template-columns: 1fr 320px; gap: 24px; align-items: start; }
.course__main { min-width: 0; }
.player { background: var(--navy); border-radius: 16px; overflow: hidden; aspect-ratio: 16/9; display: flex; align-items: center; justify-content: center; }
.player__video, .player__video iframe, .player__video video { width: 100%; height: 100%; border: 0; display: block; }
.player__placeholder { color: rgba(255,255,255,0.8); display: flex; flex-direction: column; align-items: center; gap: 10px; }
.player__placeholder svg { width: 54px; height: 54px; }
.lesson-nav { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 14px 0; }
.lesson-nav .glab-complete-btn { flex: 1; min-width: 200px; justify-content: center; }
@media (max-width: 1080px) { .course { grid-template-columns: 1fr; } }

/* Certificado bloqueado */
.diploma--locked { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 30px 18px; background: #f4f6fb; }
.diploma__lockic { width: 52px; height: 52px; border-radius: 50%; background: #e3e9f2; color: var(--muted); display: grid; place-items: center; margin-bottom: 12px; }
.diploma__lockic svg { width: 24px; height: 24px; }
.cert.is-locked { opacity: .92; }

/* ====================== ACCESO (login / registro / recuperar) ====================== */
.auth { display: grid; grid-template-columns: 1.05fr 1fr; min-height: 100vh; position: relative; width: 100vw; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; }
.auth * { box-sizing: border-box; }
.brandside { background: var(--green); color: #fff; padding: 54px 56px; display: flex; flex-direction: column; justify-content: center; position: relative; overflow: hidden; }
.brand-art { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.brand-art canvas { display: block; width: 100% !important; height: 100% !important; }
.brand-mid { position: relative; z-index: 1; max-width: 460px; }
.brand-mark { position: relative; width: 124px; height: 124px; margin-bottom: 26px; }
.brand-mark .iso-base, .brand-mark .iso-leaves { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
.brand-mark .iso-base { animation: glab-brain .8s ease both; }
.brand-mark .iso-leaves { transform-origin: 51% 82%; animation: glab-leaf 1.4s cubic-bezier(.2,.8,.2,1) .55s both; }
@keyframes glab-brain { from { opacity: 0; transform: scale(.95); } to { opacity: 1; transform: scale(1); } }
@keyframes glab-leaf { 0% { transform: scale(0); opacity: 0; } 28% { opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
.brand-mid h1 { font-family: var(--font-d); font-weight: 800; font-size: 40px; line-height: 1.12; margin-bottom: 16px; color: #fff; }
.brand-mid p { font-size: 18px; line-height: 1.6; color: rgba(255,255,255,0.92); margin-bottom: 30px; }
.feats { display: flex; flex-direction: column; gap: 15px; }
.feat { display: flex; align-items: center; gap: 13px; font-size: 16.5px; font-weight: 500; }
.feat span { width: 34px; height: 34px; border-radius: 11px; background: rgba(255,255,255,0.18); display: grid; place-items: center; flex-shrink: 0; }
.feat svg { width: 18px; height: 18px; }
.brand-foot { position: absolute; left: 56px; bottom: 40px; z-index: 1; font-size: 14px; color: rgba(255,255,255,0.82); }
.formside { display: flex; align-items: center; justify-content: center; padding: 48px 40px; background: #fff; }
.formwrap { width: 100%; max-width: 412px; }
.form-logo { display: none; height: 40px; margin: 0 auto 26px; }
.auth .view { display: none; }
.auth .view.is-active { display: block; animation: glabrise .35s ease both; }
@keyframes glabrise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.form-h { font-family: var(--font-d); font-weight: 800; font-size: 30px; color: var(--navy); }
.form-sub { color: var(--muted); font-size: 16px; margin: 8px 0 24px; }
.auth .field { margin-bottom: 18px; }
.auth .field label { display: block; font-size: 14.5px; font-weight: 600; color: var(--ink); margin-bottom: 8px; }
.auth .input { position: relative; }
.auth .input input { width: 100%; font-family: var(--font-b); font-size: 16px; color: var(--ink); padding: 14px 16px; border: 1.6px solid var(--line); border-radius: 13px; background: #fff; outline: none; transition: border-color .15s, box-shadow .15s; }
.auth .input input::placeholder { color: var(--faint); }
.auth .input input:focus { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(0,143,255,0.12); }
.auth .input .toggle { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: var(--faint); display: grid; place-items: center; padding: 6px; }
.auth .input .toggle svg { width: 20px; height: 20px; }
.row-between { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; gap: 10px; flex-wrap: wrap; }
.check { display: flex; align-items: center; gap: 8px; font-size: 14.5px; color: var(--muted); cursor: pointer; }
.check input { width: 17px; height: 17px; accent-color: var(--blue); }
.auth .link { color: var(--blue-d); font-weight: 600; font-size: 14.5px; text-decoration: none; cursor: pointer; background: none; border: none; font-family: var(--font-b); padding: 0; }
.auth .link:hover { text-decoration: underline; }
.auth .btn { width: 100%; border: none; border-radius: 13px; background: var(--blue); color: #fff; font-family: var(--font-d); font-weight: 700; font-size: 16.5px; padding: 15px; cursor: pointer; transition: background .15s, transform .08s; display: inline-flex; align-items: center; justify-content: center; gap: 9px; }
.auth .btn:hover { background: var(--blue-d); }
.auth .btn svg { width: 19px; height: 19px; }
.alt { text-align: center; font-size: 15px; color: var(--muted); margin-top: 22px; }
.auth-msg { border-radius: 12px; padding: 13px 15px; font-size: 14.5px; line-height: 1.5; margin-bottom: 20px; }
.auth-msg--ok { background: var(--green-l); color: var(--green-d); }
.auth-msg--err { background: #fdecec; color: #b3261e; }
/* Honeypot: invisible para humanos, visible para bots. */
.hp { position: absolute !important; left: -9999px !important; top: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 900px) {
  .auth { grid-template-columns: 1fr; }
  .brandside { display: none; }
  .form-logo { display: block; }
  .formside { padding: 40px 22px; min-height: 100vh; }
}

/* ============================================================
   PÁGINAS PÚBLICAS DE VENTA (tienda + landing por ruta)
   Namespace .glab-pub · clases sp-* (no chocan con el aula)
   ============================================================ */
.glab-pub{ font-family:var(--font-b); color:var(--ink); line-height:1.6; }
.glab-pub *{ box-sizing:border-box; }
.glab-pub img{ max-width:100%; display:block; }
.glab-pub .sp-wrap{ max-width:1080px; margin:0 auto; padding:0 28px; }
.glab-pub .sp-h1{ font-family:var(--font-d); font-weight:800; font-size:44px; line-height:1.08; letter-spacing:-0.02em; }
.glab-pub .sp-h2{ font-family:var(--font-d); font-weight:800; font-size:30px; color:var(--navy); }
.glab-pub .sp-lead{ font-size:18px; line-height:1.6; }

.glab-pub .sp-btn{ display:inline-flex; align-items:center; gap:9px; font-family:var(--font-d); font-weight:700; font-size:15px; padding:12px 22px; border-radius:99px; border:none; cursor:pointer; text-decoration:none; transition:transform .15s, box-shadow .15s; }
.glab-pub .sp-btn svg{ width:18px; height:18px; }
.glab-pub .sp-btn--blue{ background:var(--blue); color:#fff; box-shadow:0 8px 20px rgba(0,143,255,.28); }
.glab-pub .sp-btn--blue:hover{ transform:translateY(-1px); }
.glab-pub .glab-btn{ display:inline-flex; align-items:center; justify-content:center; width:100%; background:var(--blue); color:#fff; font-family:var(--font-d); font-weight:700; font-size:16px; padding:15px 22px; border-radius:14px; border:none; cursor:pointer; text-decoration:none; box-shadow:0 8px 20px rgba(0,143,255,.28); transition:transform .15s; }
.glab-pub .glab-btn:hover{ transform:translateY(-1px); }
.glab-pub form{ margin:0; }
.glab-pub .sp-empty{ background:#fff; border:1px dashed var(--line); border-radius:16px; padding:26px; text-align:center; color:var(--muted); }

/* ---------- HERO catálogo ---------- */
.glab-pub .sp-hero{ position:relative; overflow:hidden; }
.glab-pub .sp-hero--cat{ background:var(--green); text-align:center; padding:92px 0 60px; }
.glab-pub .sp-hero--cat .sp-wrap{ position:relative; z-index:1; }
.glab-pub .sp-hero-art{ position:absolute; inset:0; z-index:0; pointer-events:none; background:radial-gradient(120% 130% at 82% 12%, rgba(255,255,255,.22), transparent 58%), radial-gradient(120% 120% at 10% 90%, rgba(255,255,255,.14), transparent 55%); }
.glab-pub .sp-hero--cat .sp-h1{ color:#fff; max-width:760px; margin:0 auto 16px; }
.glab-pub .sp-hero--cat .sp-lead{ color:rgba(255,255,255,.92); max-width:600px; margin:0 auto 26px; }

/* ---------- Panel de confianza (3 chips) ---------- */
.glab-pub .sp-trust{ display:flex; justify-content:center; align-items:stretch; margin:30px auto 0; max-width:860px; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.30); border-radius:18px; backdrop-filter:blur(6px); overflow:hidden; box-shadow:0 12px 34px rgba(20,50,0,.14); }
.glab-pub .sp-trust span{ flex:1; display:flex; align-items:center; gap:14px; padding:20px 24px; color:#fff; font-family:var(--font-d); font-weight:600; font-size:16.5px; line-height:1.35; text-align:left; }
.glab-pub .sp-trust span + span{ border-left:1px solid rgba(255,255,255,.22); }
.glab-pub .sp-tic{ flex:0 0 auto; width:46px; height:46px; border-radius:50%; background:#fff; display:inline-flex; align-items:center; justify-content:center; box-shadow:0 2px 8px rgba(0,40,0,.14); }
.glab-pub .sp-tic svg{ width:24px; height:24px; display:block; }

/* ---------- Catálogo ---------- */
.glab-pub .sp-cat{ padding:54px 0 30px; }
.glab-pub .sp-cat-head{ text-align:center; margin-bottom:38px; }
.glab-pub .sp-cat-sub{ color:var(--muted); font-size:16.5px; margin-top:8px; }
.glab-pub .sp-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.glab-pub .sp-card{ background:#fff; border:1px solid var(--line); border-radius:20px; overflow:hidden; display:flex; flex-direction:column; box-shadow:0 2px 10px rgba(0,40,80,.05); transition:transform .16s, box-shadow .16s; text-decoration:none; color:inherit; }
.glab-pub .sp-card:hover{ transform:translateY(-3px); box-shadow:0 16px 34px rgba(0,40,80,.12); }
.glab-pub .sp-card-cover{ height:186px; position:relative; overflow:hidden; background:#e7edf2; }
.glab-pub .sp-cover-photo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.glab-pub .sp-cover-ph{ position:absolute; inset:0; }
.glab-pub .sp-tint-g{ background:#e8f0d6; } .glab-pub .sp-tint-b{ background:#dcefff; } .glab-pub .sp-tint-n{ background:#dde6f1; }
.glab-pub .sp-card-body{ padding:22px 22px 24px; display:flex; flex-direction:column; flex:1; }
.glab-pub .sp-card-title{ font-family:var(--font-d); font-weight:800; font-size:20px; color:var(--navy); }
.glab-pub .sp-card-desc{ color:var(--muted); font-size:14.5px; margin:8px 0 14px; flex:1; }
.glab-pub .sp-card-meta{ display:flex; gap:14px; font-size:13.5px; color:var(--muted); margin-bottom:16px; flex-wrap:wrap; }
.glab-pub .sp-card-meta b{ color:var(--ink); font-weight:600; }
.glab-pub .sp-card-foot{ display:flex; align-items:center; justify-content:space-between; gap:12px; border-top:1px solid var(--line); padding-top:16px; }
.glab-pub .sp-price{ font-family:var(--font-d); font-weight:800; font-size:22px; color:var(--navy); }
.glab-pub .sp-price small{ display:block; font-weight:500; font-size:12px; color:var(--muted); }

/* ---------- Landing: volver + franja ---------- */
.glab-pub .sp-back{ display:inline-flex; align-items:center; gap:8px; margin:4px 0 18px; font-family:var(--font-d); font-weight:700; font-size:14px; color:var(--navy); text-decoration:none; }
.glab-pub .sp-back svg{ width:18px; height:18px; }
.glab-pub .sp-strip{ background:var(--green); border-radius:16px; margin-bottom:22px; }
.glab-pub .sp-strip-in{ display:flex; justify-content:center; flex-wrap:wrap; gap:26px; padding:16px 24px; }
.glab-pub .sp-strip-in span{ display:inline-flex; align-items:center; gap:9px; color:#fff; font-family:var(--font-d); font-weight:600; font-size:14.5px; }
.glab-pub .sp-strip-in svg{ width:19px; height:19px; color:#fff; }

/* ---------- Landing hero ---------- */
.glab-pub .sp-hero-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:44px; align-items:start; padding:16px 0 40px; }
.glab-pub .sp-eyebrow{ display:inline-block; font-family:var(--font-d); font-weight:700; font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--green); margin-bottom:12px; }
.glab-pub .sp-h1--dark{ color:var(--navy); font-size:40px; }
.glab-pub .sp-lead--dark{ color:var(--muted); margin-top:14px; }
.glab-pub .sp-hero-tags{ display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.glab-pub .sp-tag{ background:var(--green-l); color:var(--navy); font-family:var(--font-d); font-weight:600; font-size:13.5px; padding:7px 14px; border-radius:99px; }
.glab-pub .sp-live{ display:inline-flex; align-items:center; gap:8px; background:var(--blue); color:#fff; font-family:var(--font-d); font-weight:600; font-size:13.5px; padding:7px 15px; border-radius:99px; }
.glab-pub .sp-live-ic{ width:17px; height:17px; animation:sp-blink 1.6s ease-in-out infinite; }
@keyframes sp-blink{ 0%,100%{ opacity:1 } 50%{ opacity:.35 } }

/* ---------- Buycard ---------- */
.glab-pub .sp-buycard{ background:#fff; border:1px solid var(--line); border-radius:22px; overflow:hidden; box-shadow:0 20px 46px rgba(0,40,80,.12); position:sticky; top:20px; }
.glab-pub .sp-buycard-cover{ height:170px; position:relative; overflow:hidden; background:#e8f0d6; }
.glab-pub .sp-buycard-body{ padding:22px; }
.glab-pub .sp-buycard-price{ font-family:var(--font-d); font-weight:800; font-size:36px; color:var(--navy); margin-bottom:16px; }
.glab-pub .sp-buycard-price span{ display:block; font-size:14px; font-weight:500; color:var(--muted); }
.glab-pub .sp-buycard-list{ list-style:none; margin:18px 0 0; padding:0; }
.glab-pub .sp-buycard-list li{ position:relative; padding:7px 0 7px 28px; font-size:14.5px; color:var(--ink); }
.glab-pub .sp-buycard-list li::before{ content:""; position:absolute; left:2px; top:11px; width:14px; height:8px; border-left:2.4px solid var(--green); border-bottom:2.4px solid var(--green); transform:rotate(-45deg); }
.glab-pub .sp-buycard-note{ margin-top:16px; font-size:12.5px; color:var(--muted); text-align:center; }

/* ---------- Bloques ---------- */
.glab-pub .sp-block{ padding:54px 0; }
.glab-pub .sp-sec-title{ font-family:var(--font-d); font-weight:800; font-size:28px; color:var(--navy); margin-bottom:8px; position:relative; padding-bottom:12px; }
.glab-pub .sp-sec-title::after{ content:""; position:absolute; left:0; bottom:0; width:54px; height:4px; border-radius:4px; background:var(--green); }
.glab-pub .sp-videobox{ margin-top:28px; max-width:760px; border-radius:18px; overflow:hidden; border:1px solid rgba(0,0,0,.06); }
.glab-pub .sp-videobox iframe, .glab-pub .sp-videobox video{ width:100%; aspect-ratio:16/9; display:block; border:0; }

/* ---------- Beneficios ---------- */
.glab-pub .sp-benefits{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; max-width:880px; margin:30px auto 0; }
.glab-pub .sp-benefit{ background:#fff; border:1px solid var(--line); border-radius:18px; padding:24px; box-shadow:0 2px 10px rgba(0,40,80,.05); }
.glab-pub .sp-benefit-ic{ width:46px; height:46px; border-radius:13px; background:var(--green-l); color:var(--navy); display:grid; place-items:center; margin-bottom:14px; }
.glab-pub .sp-benefit-ic svg{ width:23px; height:23px; }
.glab-pub .sp-benefit h3{ font-family:var(--font-d); font-weight:700; font-size:17px; color:var(--navy); margin:0 0 6px; }
.glab-pub .sp-benefit p{ color:var(--muted); font-size:14.5px; margin:0; }

/* ---------- Para quién ---------- */
.glab-pub .sp-forwho{ background:var(--green-l); border-radius:22px; padding:38px; display:grid; grid-template-columns:1fr 1fr; gap:30px; }
.glab-pub .sp-forwho h3{ font-family:var(--font-d); font-weight:800; font-size:19px; color:var(--navy); margin:0 0 16px; display:flex; align-items:center; gap:9px; }
.glab-pub .sp-forwho h3 svg{ width:22px; height:22px; }
.glab-pub .sp-forwho ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
.glab-pub .sp-forwho li{ display:flex; gap:10px; font-size:15px; color:var(--ink); align-items:flex-start; }
.glab-pub .sp-forwho li svg{ width:18px; height:18px; flex-shrink:0; margin-top:2px; }
.glab-pub .sp-forwho .yes svg{ color:var(--green); } .glab-pub .sp-forwho .no svg{ color:#c0472f; }

/* ---------- Temario (journey) ---------- */
.glab-pub .sp-journey{ position:relative; margin-top:30px; max-width:760px; margin-left:auto; margin-right:auto; }
.glab-pub .sp-journey::before{ content:""; position:absolute; left:21px; top:10px; bottom:10px; width:3px; background:#e3ead2; border-radius:3px; }
.glab-pub .sp-step{ display:grid; grid-template-columns:44px 1fr; gap:14px; margin-bottom:16px; position:relative; }
.glab-pub .sp-step-node{ position:relative; z-index:1; width:44px; height:44px; border-radius:50%; background:var(--green); color:#fff; display:grid; place-items:center; font-family:var(--font-d); font-weight:800; font-size:17px; }
.glab-pub .sp-step-block{ background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden; box-shadow:0 2px 10px rgba(0,40,80,.05); }
.glab-pub .sp-step-head{ display:flex; align-items:center; gap:14px; padding:18px 20px; cursor:pointer; }
.glab-pub .sp-step-info{ flex:1; }
.glab-pub .sp-step-kicker{ font-family:var(--font-d); font-weight:700; font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); }
.glab-pub .sp-step-title{ font-family:var(--font-d); font-weight:700; font-size:17px; color:var(--navy); margin-top:2px; }
.glab-pub .sp-step-r{ display:flex; align-items:center; gap:12px; }
.glab-pub .sp-step-count{ font-size:13px; color:var(--muted); white-space:nowrap; }
.glab-pub .sp-step-chev{ width:20px; height:20px; transition:transform .2s; }
.glab-pub .sp-step.is-open .sp-step-head{ background:var(--green); }
.glab-pub .sp-step.is-open .sp-step-kicker, .glab-pub .sp-step.is-open .sp-step-title, .glab-pub .sp-step.is-open .sp-step-count{ color:#fff; }
.glab-pub .sp-step.is-open .sp-step-chev{ transform:rotate(180deg); color:#fff; }
.glab-pub .sp-step-lessons{ display:none; padding:6px 20px 16px; }
.glab-pub .sp-step.is-open .sp-step-lessons{ display:block; }
.glab-pub .sp-jlesson{ display:flex; align-items:center; gap:12px; padding:11px 2px; border-top:1px solid var(--line); }
.glab-pub .sp-jlesson:first-child{ border-top:none; }
.glab-pub .sp-jlesson-ic{ width:24px; height:24px; border-radius:50%; border:1.5px solid var(--line); display:grid; place-items:center; font-size:11px; font-weight:700; color:var(--green); flex-shrink:0; }
.glab-pub .sp-jlesson-n{ font-size:12px; font-weight:700; color:var(--muted); white-space:nowrap; }
.glab-pub .sp-jlesson-t{ flex:1; font-size:14.5px; color:var(--ink); }

/* ---------- Testimonios (marquee) ---------- */
.glab-pub .sp-tmarquee{ margin-top:30px; overflow:hidden; -webkit-mask-image:linear-gradient(to right, transparent, #000 6%, #000 94%, transparent); mask-image:linear-gradient(to right, transparent, #000 6%, #000 94%, transparent); }
.glab-pub .sp-ttrack{ display:flex; gap:20px; width:max-content; animation:sp-scroll 42s linear infinite; }
.glab-pub .sp-ttrack:hover{ animation-play-state:paused; }
@keyframes sp-scroll{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }
.glab-pub .sp-tcard{ flex:0 0 340px; background:#fff; border:1px solid var(--line); border-radius:18px; padding:24px; box-shadow:0 2px 10px rgba(0,40,80,.05); }
.glab-pub .sp-tstars{ color:#f5b301; font-size:15px; letter-spacing:2px; margin-bottom:10px; }
.glab-pub .sp-tcard p{ font-size:15px; color:var(--ink); margin:0 0 16px; }
.glab-pub .sp-twho{ display:flex; align-items:center; gap:10px; }
.glab-pub .sp-tav{ width:38px; height:38px; border-radius:50%; background:var(--green); color:#fff; display:grid; place-items:center; font-family:var(--font-d); font-weight:800; font-size:15px; }
.glab-pub .sp-twho span:last-child{ font-family:var(--font-d); font-weight:600; font-size:14px; color:var(--navy); }

/* ---------- FAQ ---------- */
.glab-pub .sp-faq{ max-width:760px; margin:30px auto 0; display:flex; flex-direction:column; gap:12px; }
.glab-pub .sp-faq-item{ background:#fff; border:1px solid var(--line); border-radius:14px; overflow:hidden; }
.glab-pub .sp-faq-q{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:18px 20px; background:none; border:none; cursor:pointer; text-align:left; font-family:var(--font-d); font-weight:700; font-size:16px; color:var(--navy); }
.glab-pub .sp-faq-q svg{ width:20px; height:20px; flex-shrink:0; transition:transform .2s; }
.glab-pub .sp-faq-item.is-open .sp-faq-q svg{ transform:rotate(180deg); }
.glab-pub .sp-faq-a{ display:none; padding:0 20px 18px; color:var(--muted); font-size:15px; }
.glab-pub .sp-faq-item.is-open .sp-faq-a{ display:block; }

/* ---------- CTA final ---------- */
.glab-pub .sp-final{ position:relative; overflow:hidden; background:var(--navy); color:#fff; border-radius:24px; margin:20px auto 0; text-align:center; }
.glab-pub .sp-final-art{ position:absolute; inset:0; background:radial-gradient(120% 130% at 80% 10%, rgba(0,143,255,.35), transparent 55%), radial-gradient(120% 130% at 10% 100%, rgba(149,177,50,.30), transparent 55%); }
.glab-pub .sp-final-in{ position:relative; z-index:1; padding:60px 28px; }
.glab-pub .sp-final h2{ font-family:var(--font-d); font-weight:800; font-size:30px; color:#fff; margin:0 0 10px; }
.glab-pub .sp-final p{ color:rgba(255,255,255,.85); margin:0 0 24px; }
.glab-pub .sp-final .glab-btn{ max-width:340px; margin:0 auto; }
.glab-pub .sp-final form{ display:flex; justify-content:center; }

/* ---------- Responsive ---------- */
@media (max-width:860px){
  .glab-pub .sp-wrap{ padding:0 30px; }
  .glab-pub .sp-hero--cat{ padding:72px 0 50px; }
  .glab-pub .sp-h1{ font-size:32px; } .glab-pub .sp-h1--dark{ font-size:30px; }
  .glab-pub .sp-hero-grid{ grid-template-columns:1fr; gap:30px; }
  .glab-pub .sp-buycard{ position:static; max-width:440px; }
  .glab-pub .sp-grid{ grid-template-columns:1fr; gap:30px; }
  .glab-pub .sp-trust{ flex-direction:column; }
  .glab-pub .sp-trust span{ justify-content:flex-start; }
  .glab-pub .sp-trust span + span{ border-left:none; border-top:1px solid rgba(255,255,255,.22); }
  .glab-pub .sp-benefits{ grid-template-columns:1fr; }
  .glab-pub .sp-benefit{ display:grid; grid-template-columns:auto 1fr; column-gap:16px; row-gap:3px; align-items:center; padding:16px 18px; }
  .glab-pub .sp-benefit-ic{ grid-row:1 / span 2; align-self:center; margin-bottom:0; width:42px; height:42px; }
  .glab-pub .sp-benefit h3{ grid-column:2; grid-row:1; }
  .glab-pub .sp-benefit p{ grid-column:2; grid-row:2; }
  .glab-pub .sp-forwho{ grid-template-columns:1fr; gap:22px; padding:28px; }
  .glab-pub .sp-strip-in{ flex-direction:column; align-items:center; gap:14px; }
  .glab-pub .sp-journey{ padding-right:6px; }
  .glab-pub .sp-block{ padding:44px 0; }
  .glab-pub .sp-sec-title{ font-size:24px; }
  .glab-pub .sp-tcard{ flex-basis:78vw; }
  .glab-pub .sp-ttrack{ animation-duration:32s; }
}
@media (max-width:440px){
  .glab-pub .sp-wrap{ padding:0 26px; }
}

/* Landing hero: permitir sticky del buycard (solo catálogo y CTA recortan) */
.glab-pub .sp-hero{ overflow:visible; }
.glab-pub .sp-hero--cat, .glab-pub .sp-final{ overflow:hidden; }