/* TuCalculadora Legal — navigation.css */

/* Header sticky glass */
.tcl-header {
  position: sticky; top: 0; z-index: 100;
  transition: background .25s ease, box-shadow .25s ease;
}
.tcl-header-inner {
  max-width: var(--container); margin: 10px auto; padding: 10px 18px;
  display: flex; align-items: center; gap: 24px;
  border-radius: 999px;
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(20px) saturate(170%);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  border: 1px solid rgba(255,255,255,.6);
  box-shadow: 0 4px 18px rgba(13,30,70,.06);
}
.tcl-header.is-scrolled .tcl-header-inner {
  background: rgba(255,255,255,.8);
  box-shadow: 0 10px 28px rgba(13,30,70,.12);
}
@media (max-width: 1180px) { .tcl-header-inner { margin: 10px 14px; } }

.tcl-logo { display: flex; align-items: center; gap: 10px; font: 700 19px var(--font-body); color: var(--ink); text-decoration: none !important; }
.tcl-logo:hover { color: var(--ink); }
.tcl-logo-mark { font-size: 24px; }
.tcl-logo span em { color: var(--blue-deep); font-style: normal; }
.tcl-logo small { color: var(--ink3); font-weight: 500; font-size: 13px; }

.tcl-nav { margin-left: auto; }
.tcl-nav ul { display: flex; list-style: none; gap: 6px; }
.tcl-nav a {
  display: block; padding: 10px 16px; border-radius: 999px;
  font: 500 16px var(--font-body); color: var(--ink2); text-decoration: none !important;
  transition: background .2s, color .2s;
}
.tcl-nav a:hover { background: rgba(37,99,235,.08); color: var(--blue-deep); }
.tcl-nav .current-menu-item > a { background: rgba(37,99,235,.1); color: var(--blue-deep); font-weight: 600; }

.tcl-header-cta { margin-left: 8px; }
@media (max-width: 980px) { .tcl-nav, .tcl-header-cta { display: none; } }

/* Burger + drawer móvil */
.tcl-burger {
  display: none; margin-left: auto; width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--line); background: rgba(255,255,255,.7); cursor: pointer; font-size: 18px;
}
@media (max-width: 980px) { .tcl-burger { display: grid; place-items: center; } }

.tcl-drawer {
  position: fixed; inset: 0; z-index: 200; background: rgba(12,18,32,.4);
  backdrop-filter: blur(6px); opacity: 0; pointer-events: none; transition: opacity .25s;
}
.tcl-drawer.open { opacity: 1; pointer-events: auto; }
.tcl-drawer-panel {
  position: absolute; top: 12px; right: 12px; left: 12px;
  border-radius: var(--r-lg); padding: 22px;
  background: rgba(255,255,255,.92); backdrop-filter: blur(24px);
  border: 1px solid rgba(255,255,255,.7); box-shadow: var(--shadow-lg);
  transform: translateY(-14px) scale(.98); transition: transform .3s cubic-bezier(.22,.8,.3,1);
}
.tcl-drawer.open .tcl-drawer-panel { transform: none; }
.tcl-drawer-panel ul { list-style: none; }
.tcl-drawer-panel a {
  display: block; padding: 14px 12px; border-radius: var(--r-md);
  font: 600 17px var(--font-body); color: var(--ink); text-decoration: none !important;
}
.tcl-drawer-panel a:active { background: rgba(37,99,235,.08); }

/* Tab bar móvil (estilo iOS, indicador animado) */
.tcl-tabbar {
  display: none; position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 150;
  padding: 8px; border-radius: 999px;
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(24px) saturate(170%);
  -webkit-backdrop-filter: blur(24px) saturate(170%);
  border: 1px solid rgba(255,255,255,.7);
  box-shadow: 0 14px 38px rgba(13,30,70,.2);
}
@media (max-width: 900px) {
  .tcl-tabbar { display: flex; justify-content: space-around; }
  body { padding-bottom: 88px; }
}
.tcl-tabbar-item {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 8px 14px; border-radius: 999px; min-width: 62px;
  font: 600 11px var(--font-body); color: var(--ink3); text-decoration: none !important;
  transition: all .28s cubic-bezier(.34,1.4,.4,1);
}
.tcl-tabbar-item .tcl-tabbar-ico { font-size: 21px; line-height: 1; transition: transform .28s cubic-bezier(.34,1.6,.4,1); }
.tcl-tabbar-item.active {
  color: var(--blue-deep);
  background: linear-gradient(150deg, rgba(37,99,235,.14), rgba(37,99,235,.06));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}
.tcl-tabbar-item.active .tcl-tabbar-ico { transform: translateY(-2px) scale(1.12); }
.tcl-tabbar-item:active .tcl-tabbar-ico { transform: scale(.9); }