/* TrailLab v381 · navegación premium y tour conectado.
   Una sola escala tipográfica para la barra superior y los títulos del cajón. */
:root{
  --tl-nav-label-size:var(--tl-type-meta, 13px);
  --tl-nav-sub-size:var(--tl-type-meta, 13px);
  --tl-nav-glow:rgba(166,232,44,.22);
}

html body .topbar{
  border-bottom-color:rgba(82,180,157,.24)!important;
  background:
    linear-gradient(180deg,rgba(7,27,31,.96),rgba(5,20,25,.94))!important;
  box-shadow:0 10px 34px rgba(0,0,0,.24)!important;
}
html body .topbar nav#tbNav{
  gap:1px!important;
  justify-content:space-between!important;
}
html body .topbar nav#tbNav>.tbn{
  flex:0 1 auto!important;
}
html body .topbar nav#tbNav>.tbn>button.tbn-top{
  min-height:34px!important;
  padding:7px 4px!important;
  gap:3px!important;
  border:1px solid transparent!important;
  border-radius:9px!important;
  font-family:var(--tl-font-action,'Saira',sans-serif)!important;
  font-size:var(--tl-nav-label-size)!important;
  font-weight:800!important;
  line-height:1!important;
  letter-spacing:.035em!important;
  text-transform:uppercase!important;
}
html body .topbar nav#tbNav>.tbn>button.tbn-top>.ic{
  width:14px!important;height:14px!important;flex:0 0 14px!important;
}
html body .topbar nav#tbNav>.tbn:hover>button.tbn-top,
html body .topbar nav#tbNav>.tbn.tl-tour-open-v381>button.tbn-top{
  border-color:rgba(90,211,181,.25)!important;
  background:rgba(49,214,179,.07)!important;
}
html body .topbar nav#tbNav>.tbn.tl-activity-v381>button.tbn-top{
  padding-inline:8px!important;
  border-color:rgba(166,232,44,.46)!important;
  background:linear-gradient(135deg,rgba(166,232,44,.17),rgba(49,214,179,.08))!important;
  color:#dfff92!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 0 18px rgba(166,232,44,.08)!important;
}
html body .topbar nav#tbNav>.tbn.tl-activity-v381>button.tbn-top:hover{
  border-color:#a6e82c!important;background:rgba(166,232,44,.22)!important;
}
.tbn.tl-tour-open-v381>.tbn-drop{
  opacity:1!important;visibility:visible!important;transform:translateY(0)!important;
}
.tbn-drop{
  border-color:rgba(74,180,155,.3)!important;
  background:linear-gradient(155deg,rgba(12,39,43,.98),rgba(6,24,30,.98))!important;
  box-shadow:0 24px 54px rgba(0,0,0,.48),inset 0 1px 0 rgba(255,255,255,.04)!important;
}

html body aside.left{
  gap:3px!important;
  padding:16px 13px 20px!important;
  border-right-color:rgba(73,181,156,.3)!important;
  background:
    radial-gradient(circle at 20% 0,rgba(49,214,179,.11),transparent 30%),
    linear-gradient(180deg,#081c22 0%,#06171d 55%,#051319 100%)!important;
  box-shadow:22px 0 58px rgba(0,0,0,.5)!important;
}
html body aside.left>.brand{
  margin:0 0 10px!important;padding:5px 7px 14px!important;
  border-bottom:1px solid rgba(94,175,157,.2)!important;
}
html body aside.left>.nav-item.nav-solo,
html body aside.left>.nav-group>.nav-grp{
  min-height:42px!important;
  margin:0!important;
  padding:9px 11px!important;
  gap:10px!important;
  border:1px solid transparent!important;
  border-radius:10px!important;
  color:#d6e4df!important;
  font-family:var(--tl-font-action,'Saira',sans-serif)!important;
  font-size:var(--tl-nav-label-size)!important;
  font-weight:800!important;
  line-height:1!important;
  letter-spacing:.045em!important;
  text-transform:uppercase!important;
}
html body aside.left>.nav-item.nav-solo>.ic,
html body aside.left>.nav-group>.nav-grp>.ic{
  width:18px!important;height:18px!important;flex:0 0 18px!important;
  color:#b8cbc5!important;
}
html body aside.left>.nav-item.nav-solo:hover,
html body aside.left>.nav-group>.nav-grp:hover{
  border-color:rgba(49,214,179,.2)!important;
  background:rgba(49,214,179,.06)!important;
  color:#fff!important;
}
html body aside.left>.nav-item.nav-solo.active{
  border-color:rgba(166,232,44,.46)!important;
  border-left:3px solid #a6e82c!important;
  background:linear-gradient(90deg,rgba(166,232,44,.16),rgba(49,214,179,.05))!important;
  color:#dfff8d!important;
  box-shadow:0 8px 24px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.04)!important;
  clip-path:none!important;
}
html body aside.left>.nav-item.nav-solo.active>.ic{color:#a6e82c!important}
html body aside.left>.nav-item.tl-activity-v381{
  margin:5px 0 7px!important;
  border-color:rgba(166,232,44,.62)!important;
  background:linear-gradient(135deg,#a6e82c,#72d95d)!important;
  color:#102007!important;
  box-shadow:0 10px 26px rgba(121,214,62,.19)!important;
}
html body aside.left>.nav-item.tl-activity-v381>.ic{color:#102007!important}
html body aside.left>.nav-group{
  border:1px solid transparent;border-radius:11px;
}
html body aside.left>.nav-group.open{
  margin:2px 0 4px;padding:3px;
  border-color:rgba(49,214,179,.18);
  background:rgba(49,214,179,.035);
}
html body aside.left>.nav-group.has-active>.nav-grp{
  color:#dfff8d!important;background:rgba(166,232,44,.06)!important;
}
html body aside.left .nav-grp-body{
  gap:2px!important;margin:1px 0 4px 17px!important;padding:3px 0 2px 10px!important;
  border-left-color:rgba(81,198,170,.28)!important;
}
html body aside.left .nav-grp-body .nav-item{
  min-height:36px!important;padding:7px 9px!important;gap:9px!important;
  border:1px solid transparent!important;border-radius:8px!important;
  color:#9fb6b0!important;
  font-family:var(--tl-font-action,'Saira',sans-serif)!important;
  font-size:var(--tl-nav-sub-size)!important;font-weight:650!important;
}
html body aside.left .nav-grp-body .nav-item:hover,
html body aside.left .nav-grp-body .nav-item.active{
  border-color:rgba(166,232,44,.18)!important;
  background:rgba(166,232,44,.07)!important;color:#effbd3!important;
}

/* La navegación conserva el acabado premium también con el tema claro. */
html[data-theme="light"] body .topbar{
  border-bottom-color:rgba(23,119,101,.2)!important;
  background:linear-gradient(180deg,rgba(250,253,252,.98),rgba(239,248,245,.98))!important;
  box-shadow:0 10px 30px rgba(22,67,58,.1)!important;
}
html[data-theme="light"] body .topbar nav#tbNav>.tbn>button.tbn-top{color:#244039!important}
html[data-theme="light"] body .topbar nav#tbNav>.tbn:hover>button.tbn-top,
html[data-theme="light"] body .topbar nav#tbNav>.tbn.tl-tour-open-v381>button.tbn-top{
  border-color:rgba(23,119,101,.2)!important;background:rgba(23,119,101,.07)!important;
}
html[data-theme="light"] body .topbar nav#tbNav>.tbn.tl-activity-v381>button.tbn-top{
  border-color:rgba(80,145,20,.42)!important;
  background:linear-gradient(135deg,rgba(134,198,34,.2),rgba(49,176,148,.1))!important;
  color:#315b10!important;
}
html[data-theme="light"] body .tbn-drop{
  border-color:rgba(23,119,101,.2)!important;
  background:linear-gradient(155deg,rgba(251,254,253,.99),rgba(237,248,244,.99))!important;
  box-shadow:0 22px 48px rgba(22,67,58,.16),inset 0 1px 0 #fff!important;
}
html[data-theme="light"] body aside.left{
  border-right-color:rgba(23,119,101,.2)!important;
  background:radial-gradient(circle at 20% 0,rgba(49,214,179,.12),transparent 30%),linear-gradient(180deg,#f8fcfa 0%,#eef8f4 100%)!important;
  box-shadow:22px 0 48px rgba(22,67,58,.15)!important;
}
html[data-theme="light"] body aside.left>.nav-item.nav-solo,
html[data-theme="light"] body aside.left>.nav-group>.nav-grp{color:#244039!important}
html[data-theme="light"] body aside.left>.nav-item.nav-solo>.ic,
html[data-theme="light"] body aside.left>.nav-group>.nav-grp>.ic{color:#45675f!important}
html[data-theme="light"] body aside.left .nav-grp-body .nav-item{color:#4f6f67!important}
html[data-theme="light"] body aside.left>.nav-item.nav-solo:hover,
html[data-theme="light"] body aside.left>.nav-group>.nav-grp:hover{
  background:rgba(23,119,101,.07)!important;color:#102d26!important;
}
html[data-theme="light"] body aside.left>.nav-item.nav-solo.active,
html[data-theme="light"] body aside.left>.nav-group.has-active>.nav-grp{
  color:#315b10!important;background:rgba(134,198,34,.13)!important;
}

/* Recorrido premium v381. */
#tourDim.on{
  background:radial-gradient(circle at 50% 28%,rgba(24,82,72,.18),rgba(2,10,13,.78) 62%)!important;
  backdrop-filter:blur(3px) saturate(85%)!important;
}
#tourSpot.on{
  border:1px solid rgba(214,255,132,.88)!important;
  border-radius:14px!important;
  box-shadow:0 0 0 3px rgba(166,232,44,.2),0 0 34px rgba(106,220,116,.28),0 0 0 9999px rgba(2,10,13,.68)!important;
}
#tourTip.tour-v381{
  width:min(440px,calc(100vw - 24px))!important;
  max-height:calc(100dvh - 24px)!important;
  overflow:auto!important;
  padding:0!important;
  border:1px solid rgba(90,211,181,.38)!important;
  border-radius:19px!important;
  background:
    radial-gradient(circle at 100% 0,rgba(166,232,44,.12),transparent 34%),
    linear-gradient(155deg,rgba(13,43,47,.99),rgba(5,22,28,.99))!important;
  color:#eff8f4!important;
  box-shadow:0 28px 80px rgba(0,0,0,.58),inset 0 1px 0 rgba(255,255,255,.07)!important;
  backdrop-filter:blur(18px) saturate(130%)!important;
}
#tourTip.tour-v381::before{
  content:"";display:block;height:3px;
  background:linear-gradient(90deg,#31d6b3,#a6e82c 62%,#e4b34f);
}
.tour-v381 .tl-tour-inner{padding:20px 21px 19px}
.tour-v381 .tl-tour-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:20px}
.tour-v381 .tl-tour-brand{display:flex;align-items:center;gap:8px;color:#b7cdc7;font-size:var(--tl-type-kicker, 12px);font-weight:900;letter-spacing:.13em;text-transform:uppercase}
.tour-v381 .tl-tour-brand i{display:grid;place-items:center;width:27px;height:27px;border:1px solid rgba(166,232,44,.46);border-radius:8px;background:rgba(166,232,44,.1);color:#cfff67;font-style:normal;font-size:var(--tl-type-kicker, 12px);letter-spacing:0}
.tour-v381 .tl-tour-count{color:#7fa299;font-family:var(--tl-font-display,'Saira Condensed',sans-serif);font-size:var(--tl-type-kicker, 12px);font-weight:800;letter-spacing:.08em}
.tour-v381 .tour-x{top:12px!important;right:13px!important;width:32px!important;height:32px!important;border:1px solid rgba(255,255,255,.1)!important;border-radius:9px!important;background:rgba(255,255,255,.035)!important;color:#afc2bd!important}
.tour-v381 .tl-tour-kicker{display:block;margin-bottom:7px;color:#a6e82c;font-size:var(--tl-type-kicker, 12px);font-weight:950;letter-spacing:.15em;text-transform:uppercase}
.tour-v381 .tour-ttl{margin:0!important;color:#f3faf6!important;font-family:var(--tl-font-display,'Saira Condensed',sans-serif)!important;font-size:var(--tl-type-section, 26px)!important;font-weight:800!important;line-height:1.05!important;letter-spacing:.01em!important}
.tour-v381 .tour-body{margin:11px 0 0!important;color:#b9ccc6!important;font-family:var(--tl-font-copy,'Archivo',sans-serif)!important;font-size:var(--tl-type-body, 15px)!important;line-height:1.62!important}
.tour-v381 .tour-body b{color:#eefbd0!important;font-weight:750!important}
.tour-v381 .tl-tour-note{display:flex;align-items:flex-start;gap:9px;margin-top:15px;padding:10px 11px;border:1px solid rgba(49,214,179,.17);border-radius:11px;background:rgba(49,214,179,.055);color:#9fc2b8;font-size:var(--tl-type-kicker, 12px);line-height:1.45}
.tour-v381 .tl-tour-note i{width:7px;height:7px;margin-top:4px;flex:0 0 7px;border-radius:50%;background:#31d6b3;box-shadow:0 0 10px #31d6b3}
.tour-v381 .tour-foot{display:grid!important;grid-template-columns:1fr auto auto;gap:8px!important;align-items:center!important;margin-top:19px!important}
.tour-v381 .tl-tour-progress{height:4px;overflow:hidden;border-radius:999px;background:rgba(255,255,255,.09)}
.tour-v381 .tl-tour-progress i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#31d6b3,#a6e82c);box-shadow:0 0 12px rgba(166,232,44,.3);transition:width .3s ease}
.tour-v381 .tour-btn{min-height:39px!important;padding:0 13px!important;border-radius:10px!important;font-size:var(--tl-type-kicker, 12px)!important;font-weight:850!important}
.tour-v381 .tour-btn.sec{border-color:rgba(255,255,255,.14)!important;background:rgba(255,255,255,.035)!important;color:#bfd0cb!important}
.tour-v381 .tour-btn.pri{border:1px solid #b8ef55!important;background:linear-gradient(135deg,#a6e82c,#6fd25e)!important;color:#102007!important;box-shadow:0 9px 22px rgba(166,232,44,.18)!important}

@media(max-width:1500px) and (min-width:761px){
  :root{--tl-nav-label-size:var(--tl-type-meta, 13px)}
  html body .topbar{gap:7px!important;padding-inline:10px!important}
  html body .topbar nav#tbNav>.tbn>button.tbn-top{padding-inline:3px!important}
  html body .topbar nav#tbNav>.tbn.tl-activity-v381>button.tbn-top{padding-inline:6px!important}
  html body .topbar nav#tbNav>.tbn.tl-primary-v335>button.tbn-top{
    width:auto!important;flex-basis:auto!important;font-size:var(--tl-nav-label-size)!important;
  }
}
@media(max-width:1180px) and (min-width:761px){
  :root{--tl-nav-label-size:var(--tl-type-meta, 13px)}
  html body .topbar nav#tbNav>.tbn>button.tbn-top>.ic{width:12px!important;height:12px!important;flex-basis:12px!important}
}
@media(max-width:760px){
  :root{--tl-nav-label-size:var(--tl-type-meta, 13px);--tl-nav-sub-size:var(--tl-type-meta, 13px)}
  #tourTip.tour-v381{width:calc(100vw - 20px)!important;max-height:56dvh!important;border-radius:17px!important}
  .tour-v381 .tl-tour-inner{padding:17px 16px 16px}
  .tour-v381 .tl-tour-head{margin-bottom:15px;padding-right:27px}
  .tour-v381 .tour-ttl{font-size:var(--tl-type-stat, 24px)!important}
  .tour-v381 .tour-body{font-size:var(--tl-type-meta, 13px)!important;line-height:1.55!important}
  .tour-v381 .tour-foot{grid-template-columns:1fr auto!important}
  .tour-v381 .tl-tour-progress{grid-column:1/-1;grid-row:1}
}
@media(prefers-reduced-motion:reduce){
  #tourSpot,.tour-v381 .tl-tour-progress i{transition:none!important}
}