/* ═══════════════════════════════════════════════════════════════════════════
   Frontend — Navegación pill flotante global
   ═══════════════════════════════════════════════════════════════════════════ */

/* Ocultar header original de Kadence */
#masthead, .site-header {
  display: none !important;
}

/* Espacio para el nav fijo */
body {
  padding-top: 72px !important;
}

@media (max-width: 768px) {
  body {
    padding-top: 64px !important;
  }
}

/* Resetear spacing de Kadence en páginas con diseño custom */
.page-id-14 .content-area,
.page-id-15 .content-area,
.page-id-16 .content-area,
.page-id-17 .content-area,
.page-id-163 .content-area {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.page-id-14 .entry-content-wrap,
.page-id-15 .entry-content-wrap,
.page-id-16 .entry-content-wrap,
.page-id-17 .entry-content-wrap,
.page-id-163 .entry-content-wrap {
  padding: 0 !important;
}

.page-id-14 article.entry,
.page-id-15 article.entry,
.page-id-16 article.entry,
.page-id-17 article.entry,
.page-id-163 article.entry {
  box-shadow: none !important;
}

.page-id-14 .content-wrap,
.page-id-15 .content-wrap,
.page-id-16 .content-wrap,
.page-id-17 .content-wrap,
.page-id-163 .content-wrap {
  padding: 0 !important;
}

/* Nav pill flotante */
#vc-nav {
  position: fixed;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  width: calc(100% - 32px);
  max-width: 1056px;
}

#vc-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-radius: 9999px;
  border: 1px solid var(--vc-color-border, #E3E5EE);
  background: rgba(254, 255, 254, 0.7);
  padding: 8px 8px 8px 12px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03), 0 4px 16px rgba(0, 0, 0, 0.07);
  transition: background 0.2s, box-shadow 0.2s;
}

#vc-nav-inner:hover {
  background: rgba(254, 255, 254, 0.88);
}

/* Logo */
#vc-nav-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none !important;
  flex-shrink: 0;
  padding-left: 4px;
}

#vc-nav-logo-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: var(--vc-color-primary-ink, #1A1F36);
  color: #fff;
  flex-shrink: 0;
}

#vc-nav-logo-icon svg {
  width: 14px;
  height: 14px;
}

#vc-nav-logo-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 7px;
  display: block;
}

/* Con el isotipo de verdad (la V sobre las olas), la pastilla azul de arriba
   sobra: es el fondo que necesita el SVG de respaldo, que se dibuja en blanco
   con currentColor. El isotipo ya trae su propio disco, así que encerrarlo en
   un cuadrado oscuro lo dejaba como un ícono de app genérico, minúsculo y
   apretado. Acá se muestra suelto y a tamaño completo: sin fondo, `contain`
   para que el círculo no se recorte, y sin el punto azul —que sobre la marca
   dorada se leía como una notificación pendiente, no como parte del logo. */
#vc-nav-logo-icon.vc-has-img {
  width: 30px;
  height: 30px;
  background: none;
  border-radius: 0;
}

#vc-nav-logo-icon.vc-has-img img {
  object-fit: contain;
  border-radius: 0;
}

#vc-nav-logo-icon.vc-has-img #vc-nav-logo-dot {
  display: none;
}

#vc-nav-logo-dot {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background: var(--vc-color-primary, #4D6AE0);
  box-shadow: 0 0 0 2px rgba(254, 255, 254, 0.8);
}

#vc-nav-logo-name {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 1.25rem;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--vc-color-primary-ink, #1A1F36);
  font-weight: 400;
}

/* Desktop nav links */
#vc-nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (max-width: 900px) {
  #vc-nav-links {
    display: none;
  }
}

#vc-nav-links li {
  flex-shrink: 0;
}

#vc-nav-links a {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  border-radius: 9999px;
  padding: 6px 12px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--vc-color-muted, #6B7494) !important;
  text-decoration: none !important;
  transition: background 0.15s, color 0.15s;
}

#vc-nav-links a:hover,
#vc-nav-links a.vc-nav-active,
#vc-nav-links li.current-menu-item > a,
#vc-nav-links li.current-menu-ancestor > a {
  background: var(--vc-color-chip-bg, #ECEEF5);
  color: var(--vc-color-primary-ink, #1A1F36) !important;
}

/* Right buttons */
#vc-nav-btns {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

@media (max-width: 520px) {
  #vc-nav-btns .vc-btn-ghost {
    display: none;
  }
}

.vc-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
  border-radius: 9999px;
  padding: 6px 14px;
  height: 36px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13.5px;
  font-weight: 500;
  text-decoration: none !important;
  cursor: pointer;
  transition: all 0.15s ease-out;
  border: none;
  outline: none;
}

.vc-btn-ghost {
  color: var(--vc-color-muted, #6B7494) !important;
  background: transparent;
}

.vc-btn-ghost:hover {
  background: var(--vc-color-chip-bg, #ECEEF5);
  color: var(--vc-color-primary-ink, #1A1F36) !important;
}

.vc-btn-primary {
  background: var(--vc-color-primary, #4D6AE0);
  color: #fff !important;
  padding: 6px 16px;
}

.vc-btn-primary:hover {
  background: #3d58cc;
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(77, 106, 224, 0.35);
}

.vc-btn-primary svg {
  width: 13px;
  height: 13px;
  opacity: 0.9;
}

/* Mobile hamburger */
#vc-nav-hamburger {
  display: none;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border: 1px solid var(--vc-color-border, #E3E5EE) !important;
  background: #fff !important;
  color: var(--vc-color-primary-ink, #1A1F36) !important;
  cursor: pointer;
  transition: background 0.15s;
  flex-shrink: 0;
  box-shadow: none !important;
  padding: 0 !important;
}

#vc-nav-hamburger:hover {
  background: var(--vc-color-chip-bg, #ECEEF5) !important;
}

#vc-nav-hamburger svg {
  stroke: var(--vc-color-primary-ink, #1A1F36) !important;
  fill: none !important;
  display: block;
}

#vc-nav-hamburger svg path {
  stroke: var(--vc-color-primary-ink, #1A1F36) !important;
}

@media (max-width: 900px) {
  #vc-nav-hamburger {
    display: inline-flex;
  }
}

/* Mobile dropdown */
#vc-nav-mobile {
  display: none;
  flex-direction: column;
  gap: 2px;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: rgba(254, 255, 254, 0.96);
  border: 1px solid var(--vc-color-border, #E3E5EE);
  border-radius: 20px;
  padding: 8px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

#vc-nav-mobile.vc-open {
  display: flex;
}

#vc-nav-mobile ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
}

#vc-nav-mobile li {
  margin: 0;
  padding: 0;
}

#vc-nav-mobile a {
  display: flex;
  align-items: center;
  padding: 10px 16px;
  border-radius: 12px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--vc-color-primary-ink, #1A1F36) !important;
  text-decoration: none !important;
  transition: background 0.12s;
}

#vc-nav-mobile a:hover {
  background: var(--vc-color-chip-bg, #ECEEF5);
}

#vc-nav-mobile .vc-mob-divider {
  height: 1px;
  background: var(--vc-color-border, #E3E5EE);
  margin: 4px 8px;
}

#vc-nav-mobile .vc-mob-primary {
  background: var(--vc-color-primary, #4D6AE0);
  color: #fff !important;
  justify-content: center;
  margin-top: 4px;
}

#vc-nav-mobile .vc-mob-primary:hover {
  background: #3d58cc;
}