/* ── NAV — desktop + mobile, hamburguesa, nav-shop animation ── */

nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 5%;
  background: var(--nav-bg); backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border-red);
  transition: padding .3s;
}
.nav-brand { display: flex; align-items: center; gap: .8rem; text-decoration: none; }
.nav-logo  { height: 40px; width: auto; max-width: 48px; object-fit: contain; border-radius: 6px; }
.nav-name  { font-size: var(--fs-base); font-weight: 800; color: var(--white); }
.nav-sub   { font-size: var(--fs-xs); color: var(--pink); letter-spacing: .12em; text-transform: uppercase; }
.nav-links { display: flex; align-items: center; gap: .3rem; list-style: none; margin: 0; padding: 0; }
.nav-links li:not(:last-child):not(:has(.nav-shop))::after {
  content: '';
  display: inline-block; width: 3px; height: 3px; border-radius: 50%;
  background: rgba(255,255,255,.28); vertical-align: middle; flex-shrink: 0;
  margin-left: .15rem;
}
.nav-link  {
  padding: .45rem .9rem; border-radius: 6px; text-decoration: none;
  font-size: var(--fs-base); font-weight: 600; color: var(--gray);
  transition: color .2s, background .2s; white-space: nowrap;
}
.nav-link:hover, .nav-link.active { color: var(--white); background: var(--white-subtle); }

/* Tienda active variant */
.nav-link.active.tienda-active { color: var(--red); background: var(--red-subtle); }

/* Link dorado — Diagnóstico en nav */
.nav-link-gold { color: var(--gold); font-weight: 700; }
.nav-link-gold:hover { color: var(--gold); background: var(--white-subtle); }

/* nav-shop glow button — especificidad elevada, sin !important */
.nav-links .nav-shop,
.nav-shop {
  position: relative;
  padding: .38rem .9rem;
  border-radius: 20px;
  background: linear-gradient(135deg, var(--red) 0%, var(--gold) 100%);
  color: var(--white);
  font-weight: 700;
  box-shadow: 0 0 10px var(--gold-glow-sm);
  animation: shopGlow 2.5s ease-in-out infinite;
}
.nav-links .nav-shop:hover,
.nav-shop:hover {
  transform: scale(1.07);
  box-shadow: 0 0 24px var(--gold-glow-lg);
  color: var(--white);
}
.nav-shop-mobile {
  background: linear-gradient(135deg, var(--red), var(--gold));
  color: var(--white);
  font-weight: 700;
}
.shop-badge {
  font-size: var(--fs-xs); font-weight: 800; letter-spacing: .06em;
  background: var(--black-overlay); color: var(--gold);
  border-radius: 4px; padding: 1px 5px;
  margin-left: .4rem; vertical-align: middle;
}

@keyframes shopGlow {
  0%,100% { box-shadow: 0 0 8px var(--gold-glow-sm); }
  50%      { box-shadow: 0 0 22px var(--gold-glow-mid), 0 0 38px var(--red-glow); }
}

/* nav CTA button */
.nav-cta {
  padding: .45rem 1.1rem; border-radius: 6px;
  background: var(--red); color: var(--white);
  font-weight: 700; font-size: var(--fs-base); text-decoration: none;
  transition: background .2s;
}
.nav-cta:hover { background: var(--red2); }
.nav-right { display: flex; align-items: center; gap: .8rem; }

/* ── HAMBURGUESA ── */
.nav-hamburger {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  background: none; border: none; cursor: pointer; padding: .4rem; z-index: 201;
}
.nav-hamburger span {
  display: block; width: 22px; height: 2px;
  background: var(--white); border-radius: 2px;
  transition: transform .3s, opacity .3s;
}
.nav-hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px,5px); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px,-5px); }

/* ── MENÚ MÓVIL ── */
.nav-mobile {
  display: none; position: fixed; top: 62px; left: 0; right: 0; z-index: 199;
  flex-direction: column; gap: .6rem; padding: 1rem 5% 1.5rem;
  background: var(--nav-bg-full); backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--border-red-md);
}
.nav-mobile.open { display: flex; }
.nav-mobile-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: .2rem;
}
.nav-mobile .nav-link {
  padding: .85rem 1rem; font-size: var(--fs-md); font-weight: 600;
  border-bottom: 1px solid var(--border-white);
}
.nav-mobile li:last-child .nav-link { border-bottom: none; }
.nav-mobile .nav-cta {
  margin-top: .6rem; text-align: center;
  padding: .85rem; font-size: var(--fs-md);
}

/* Mobile phone rows (index only, but harmless on other pages) */
.nav-mobile-phones {
  display: flex; flex-direction: column; gap: .4rem;
  padding: .6rem 0; border-top: 1px solid var(--border-white); margin-top: .4rem;
}
.nav-mobile-phone-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: .4rem 1rem; border-radius: 8px; font-size: var(--fs-base);
}
.nav-mobile-phone-label { color: var(--gray); font-size: var(--fs-sm); }
.nav-mobile-phone-num   { color: var(--white); font-weight: 600; }
.nav-mobile-phone-wa    { color: var(--green); font-size: var(--fs-sm); font-weight: 600; text-decoration: none; }

/* ── RESPONSIVE ── */
@media (max-width: 960px) {
  .nav-links     { display: none; }
  .nav-hamburger { display: flex; }
}