/* Header de Learning Camp: definición ÚNICA del encabezado del sitio.
   La usan tanto el home (que trae su propio marcado) como header.js (que lo inyecta en el
   resto de las páginas). Antes cada zona tenía su propio header y se fueron desviando entre
   sí; esta hoja existe para que no vuelva a pasar: si el look cambia, cambia aquí y en todas.

   Se escribe con valores literales y var(...) con respaldo, porque las páginas satélite no
   declaran las variables del home. */

/* ---- Fila 1: barra oscura con el logo y las acciones ---- */
.lcbar{
  position:sticky;top:0;z-index:70;
  background:#17233E;color:#fff;
  padding:12px 24px;
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}
.lcbar .lclogo{color:#fff;text-decoration:none;font-weight:800;font-size:1.15rem;letter-spacing:-.3px;flex:none;}
.lcbar .lclogo span{color:#c8761d;}
.lcbar .lcacts{display:flex;gap:8px;align-items:center;}

/* Un único lenguaje de botón: .tbtn = secundario (contorno); .tbtn.cta = único acento dorado. */
.tbtn{background:transparent;border:1px solid rgba(255,255,255,.32);color:#fff;text-decoration:none;border-radius:999px;padding:7px 14px;font-family:inherit;font-weight:700;font-size:.82rem;line-height:1;cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;gap:7px;transition:background .15s,border-color .15s;}
.tbtn:hover{border-color:rgba(255,255,255,.6);background:rgba(255,255,255,.07);}
.tbtn:focus-visible{outline:3px solid #fff;outline-offset:2px;}
.tbtn.cta{background:#F6B549;border-color:#F6B549;color:#17233E;}
.tbtn.cta:hover{background:#ffca63;border-color:#ffca63;}
/* Marca de "estás aquí". No se aplica al CTA dorado: pintarle un velo encima lo dejaba
   apagado, como si estuviera deshabilitado. */
.tbtn[aria-current="page"]:not(.cta){background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.55);}
.favs-count{background:rgba(255,255,255,.22);color:#fff;border-radius:999px;padding:1px 8px;font-size:.78rem;min-width:20px;text-align:center;}

/* ---- Fila 2: pestañas de sección, claras ---- */
.tabnav{
  position:sticky;top:0;z-index:60;
  background:#fff;border-bottom:1px solid var(--line,#e3e8f1);
  display:flex;flex-wrap:wrap;gap:2px;padding:0 12px;justify-content:center;
  box-shadow:0 2px 12px rgba(27,42,74,.06);
}
.tabnav .tab{
  border:0;background:none;text-decoration:none;
  font-family:var(--font,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif);
  font-weight:600;font-size:.94rem;color:var(--muted,#586273);
  padding:15px 16px;cursor:pointer;border-bottom:3px solid transparent;
  transition:color .12s,border-color .12s;
}
.tabnav .tab:hover{color:var(--ink,#17233E);}
.tabnav .tab.active,.tabnav .tab[aria-current="page"]{color:var(--ink,#17233E);border-bottom-color:var(--accent,#c8761d);}

/* ---- Móvil ---- */
/* En celular las secciones envuelven en varias filas. Se probó una tira con scroll
   horizontal y provocaba desbordamiento de la página (495px en una pantalla de 390),
   que es justo el defecto que se estaba corrigiendo. */
@media(max-width:640px){
  .tabnav{gap:0;}
  .tabnav .tab{font-size:.8rem;padding:12px 9px;}
}
/* Bajo 520px la barra envuelve: el logo arriba y las acciones, apretadas, en una sola fila
   debajo. Sin esto el botón de retos quedaba fuera de la pantalla y provocaba scroll
   horizontal. "Mis referentes" se colapsa a estrella + contador; el title/aria lo explica. */
@media(max-width:520px){
  .lcbar{flex-wrap:wrap;row-gap:12px;padding-left:14px;padding-right:14px;}
  .lcbar .lcacts{flex-wrap:wrap;row-gap:8px;gap:7px;width:100%;justify-content:flex-start;}
  .lcbar .tbtn{padding:6px 11px;font-size:.78rem;gap:5px;}
  .lcbar .favs-count{padding:1px 6px;font-size:.78rem;min-width:16px;}
  .lcbar .favs-open .favs-lbl{display:none;}
}