/*
 * Estilos copiados de catalogo.html para navbar-vo, topbar y elementos relacionados.
 * Si ya tienes estos estilos en otro archivo, puedes eliminar este archivo.
 */
:root {
  --cyan:#00a7e1; --magenta:#d72a86; --gold:#f8bd23;
  --dark:#0f1723; --dark2:#1a2332;
  --green:#059669; --red:#ef4444;
  --g50:#f8fafc; --g100:#f1f5f9; --g200:#e2e8f0;
  --g400:#94a3b8; --g600:#475569; --g800:#1e293b;
  --r:14px; --sh:0 4px 24px rgba(0,0,0,.10); --sh2:0 16px 48px rgba(0,0,0,.16);
  --topbar-h: 36px;
  --navbar-h: 54px;
}

body::after{
  content:'';position:fixed;top:0;left:0;right:0;height:3px;z-index:9999;
  background:linear-gradient(90deg,var(--cyan),var(--magenta),var(--gold),var(--cyan));
  background-size:300%;
  animation:lineMove 6s linear infinite;
}
@keyframes lineMove{0%{background-position:0%}100%{background-position:300%}}

.topbar{
  position:fixed;top:3px;left:0;right:0;z-index:2000;
  background:var(--dark);
  border-bottom:1px solid rgba(0,167,225,.18);
  height:var(--topbar-h);
  display:flex;align-items:center;
  padding:0 16px;
}
.topbar-inner{
  width:100%;max-width:1400px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
}
.topbar-pills{display:flex;gap:7px;flex-wrap:nowrap;align-items:center;min-width:0;}
.t-pill{
  display:inline-flex;align-items:center;gap:5px;
  background:rgba(255,255,255,.07);border:1px solid rgba(0,167,225,.2);
  color:rgba(255,255,255,.82);font-size:11px;font-weight:500;
  padding:3px 10px;border-radius:999px;white-space:nowrap;
}
.t-pill i{color:var(--cyan);font-size:12px;}
.topbar-btns{display:flex;gap:7px;flex-shrink:0;}
.tb-btn{
  display:inline-flex;align-items:center;gap:5px;
  padding:5px 13px;border-radius:999px;
  font-size:11.5px;font-weight:700;border:none;transition:all .2s;white-space:nowrap;
}
.tb-wa{background:#25d366;color:#fff;}
.tb-wa:hover{background:#1eb356;color:#fff;transform:translateY(-1px);}
.tb-call{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.22);}
.tb-call:hover{background:rgba(255,255,255,.18);color:#fff;}
@media(max-width:600px){
  .topbar{ padding:0 12px; }
  .t-pill{ display:none; }
  .t-pill.tb-phone{ display:inline-flex; background:transparent;border:none;padding:0; color:rgba(255,255,255,.7);font-size:11px; }
  .tb-btn .tb-label{ display:none; }
  .tb-btn{ padding:5px 10px;border-radius:8px;font-size:13px;gap:0; }
  .tb-wa{ padding:5px 12px; }
  .tb-wa .tb-label-wa{ display:inline; }
  .tb-call{ padding:5px 10px; }
}

.navbar-vo{
  position:fixed;top:calc(3px + var(--topbar-h));left:0;right:0;z-index:1900;
  background:rgba(255,255,255,.97);backdrop-filter:blur(18px);
  box-shadow:0 2px 20px rgba(0,0,0,.08);
  border-bottom:1px solid var(--g200);
  height:var(--navbar-h);
}
.nb-inner{
  height:100%;max-width:1400px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;padding:0 20px;gap:12px;
}
.nb-brand{display:flex;align-items:center;gap:10px;text-decoration:none;}
.nb-brand img{height:32px;border-radius:8px;object-fit:contain;}
.nb-name{
  font-size:15px;font-weight:900;letter-spacing:-.4px;
  background:linear-gradient(135deg,var(--magenta),var(--cyan));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.nb-links{display:flex;align-items:center;gap:2px;}
.nb-link{
  display:flex;align-items:center;gap:5px;
  padding:7px 13px;border-radius:10px;
  font-size:13px;font-weight:500;color:var(--g600);
  transition:all .2s;border:none;background:none;text-decoration:none;
}
.nb-link:hover,.nb-link.active{background:rgba(215,42,134,.09);color:var(--magenta);}
.nb-link i{font-size:14px;}
.nb-cta{
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 18px;border-radius:999px;
  background:linear-gradient(135deg,var(--cyan),var(--magenta));
  color:#fff;font-size:13px;font-weight:700;border:none;
  box-shadow:0 4px 16px rgba(0,167,225,.3);transition:all .2s;text-decoration:none;
}
.nb-cta:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,167,225,.4);color:#fff;}
.nb-hamburger{
  display:none;
  flex-direction:column;justify-content:center;align-items:center;gap:5px;
  width:40px;height:40px;border:none;background:none;border-radius:10px;
  padding:6px;transition:background .2s;flex-shrink:0;
}
.nb-hamburger:hover{background:var(--g100);}
.hb-line{
  width:22px;height:2px;border-radius:2px;
  background:var(--dark);
  transition:transform .28s cubic-bezier(.4,0,.2,1), opacity .2s;
  transform-origin:center;
}
.nb-hamburger.open .hb-line:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nb-hamburger.open .hb-line:nth-child(2){ opacity:0; transform:scaleX(0); }
.nb-hamburger.open .hb-line:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
.nb-drawer{
  display:none;
  position:fixed;
  top:calc(3px + var(--topbar-h) + var(--navbar-h));
  left:0;right:0;
  background:rgba(255,255,255,.98);backdrop-filter:blur(20px);
  border-bottom:2px solid var(--g200);
  box-shadow:0 12px 40px rgba(0,0,0,.12);
  z-index:1800;
  padding:8px 0 16px;
  transform:translateY(-8px);opacity:0;
  transition:transform .28s cubic-bezier(.4,0,.2,1), opacity .24s;
  pointer-events:none;
}
.nb-drawer.open{
  transform:translateY(0);opacity:1;pointer-events:all;
}
.nb-drawer-link{
  display:flex;align-items:center;gap:10px;
  padding:13px 24px;font-size:14px;font-weight:600;color:var(--dark);
  border:none;background:none;width:100%;text-align:left;text-decoration:none;
  transition:background .15s,color .15s;border-radius:0;
}
.nb-drawer-link i{font-size:16px;color:var(--cyan);width:20px;text-align:center;}
.nb-drawer-link:hover,.nb-drawer-link.active{background:rgba(0,167,225,.06);color:var(--cyan);}
.nb-drawer-link.active{border-left:3px solid var(--cyan);padding-left:21px;}
.nb-drawer-divider{height:1px;background:var(--g200);margin:8px 24px;}
.nb-drawer-cta{
  display:flex;align-items:center;justify-content:center;gap:8px;
  margin:10px 20px 0;padding:13px;border-radius:12px;
  background:linear-gradient(135deg,var(--cyan),var(--magenta));
  color:#fff;font-size:14px;font-weight:700;border:none;text-decoration:none;
}
.nb-overlay{
  display:none;position:fixed;inset:0;z-index:1750;
  background:rgba(0,0,0,.35);backdrop-filter:blur(2px);
  opacity:0;transition:opacity .24s;pointer-events:none;
}
.nb-overlay.open{opacity:1;pointer-events:all;}
@media(max-width:768px){
  .nb-links{ display:none; }
  .nb-cta{ display:none; }
  .nb-hamburger{ display:flex; }
  .nb-drawer{ display:block; }
  .nb-overlay{ display:block; }
  .nb-inner{ padding:0 16px; }
}
.pw{ padding-top:calc(3px + var(--topbar-h) + var(--navbar-h)); }