/* ============================================================
   cx-rnav — Navbar "resizable": sticky, se encoge a una píldora
   centrada con blur al hacer scroll. Reemplaza a .cx-nav.
   (Recreación vanilla del resizable-navbar de Aceternity)
   ============================================================ */
.cx-rnav { position: sticky; top: 0; left: 0; right: 0; z-index: 50; width: 100%; padding: 14px 16px; pointer-events: none; }
.cx-rnav__bar {
  pointer-events: auto;
  max-width: 1240px; margin: 0 auto;
  display: flex; align-items: center; gap: 16px;
  padding: 9px 12px 9px 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0);
  transition: max-width .55s cubic-bezier(.16, 1, .3, 1), background .4s ease,
              box-shadow .4s ease, transform .55s cubic-bezier(.16, 1, .3, 1),
              -webkit-backdrop-filter .4s ease, backdrop-filter .4s ease;
}
.cx-rnav.is-shrunk .cx-rnav__bar {
  max-width: 1080px;
  background: rgba(255, 255, 255, .82);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 1px 1px rgba(0,0,0,.05), 0 0 0 1px rgba(28,53,66,.06),
              0 8px 24px -8px rgba(28,53,66,.12), 0 24px 56px -16px rgba(28,53,66,.18);
  transform: translateY(8px);
}
[data-theme="dark"] .cx-rnav.is-shrunk .cx-rnav__bar { background: rgba(2,21,33,.82); box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 24px 56px -16px rgba(0,0,0,.5); }

.cx-rnav__logo { display: flex; align-items: center; flex-shrink: 0; }
.cx-rnav__logo img { height: 30px; width: auto; display: block; }

.cx-rnav__items { display: flex; align-items: center; gap: 2px; margin: 0 auto; }
.cx-rnav__items a { position: relative; padding: 8px 15px; font-size: 14.5px; font-weight: 600; color: var(--cx-ink-soft); text-decoration: none; border-radius: 999px; transition: color .15s, background .15s; white-space: nowrap; }
.cx-rnav__items a:hover { color: var(--cx-blue); background: var(--cx-bg-soft); }

.cx-rnav__actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.cx-rnav__phone { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; color: var(--cx-blue); background: var(--cx-bg-soft); border: 1px solid var(--cx-line); transition: all .15s; flex-shrink: 0; }
.cx-rnav__phone:hover { background: #fff; box-shadow: 0 6px 16px -6px rgba(28,164,175,.4); transform: translateY(-1px); }
.cx-rnav__phone svg { width: 18px; height: 18px; }
.cx-rnav__cta { display: inline-flex; align-items: center; padding: 10px 18px; border-radius: 999px; background: var(--cx-gradient); color: #fff; font-size: 14px; font-weight: 700; text-decoration: none; transition: all .15s; white-space: nowrap; box-shadow: 0 4px 14px rgba(28,164,175,.30); }
.cx-rnav__cta:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(28,164,175,.45); }

/* Breakpoint alineado con cx-v2.min.css, que oculta .cx-nav__links a <=1024px.
   Antes el hamburguesa solo aparecía a <=980px → franja muerta 981–1024px sin
   menú NI hamburguesa. Ahora a <=1024px se colapsa todo y sale el hamburguesa. */
@media (max-width: 1024px) {
  .cx-rnav__items { display: none; }
  .cx-rnav__cta { display: none; }
  .cx-rnav.is-shrunk .cx-rnav__bar { max-width: 94%; }
}
@media (min-width: 1025px) {
  .cx-rnav .cx-nav__hamb { display: none; }
  /* En desktop el navbar (con megamenú) va por ENCIMA del sticky "¿Hablamos?" (9020)
     y del botón WhatsApp (9050), para que el desplegable no quede tapado. Por debajo
     de cookies (9100) y exit (9300). En móvil se queda en z-index:50 (manda el drawer). */
  .cx-rnav { z-index: 9060; }
}
@media (prefers-reduced-motion: reduce) {
  .cx-rnav__bar { transition: background .2s ease, box-shadow .2s ease; }
  .cx-rnav.is-shrunk .cx-rnav__bar { transform: none; }
}

/* Quita el padding-top del body (era para el navbar viejo position:fixed; el nuevo es sticky) */
body { padding-top: 0 !important; }

/* Megamenús originales dentro de la píldora */
.cx-rnav__bar { overflow: visible; }
.cx-rnav__bar > .cx-nav__links { margin: 0 auto; }
/* El item NO es contenedor: así el megamenú se posiciona respecto a .cx-rnav (ancho completo) y queda centrado en pantalla */
.cx-rnav .cx-nav__item--has-menu { position: static; }
.cx-rnav .cx-megamenu { left: 50%; transform: translateX(-50%) translateY(-8px); }
.cx-rnav .cx-nav__item--has-menu:hover .cx-megamenu,
.cx-rnav .cx-nav__item--open .cx-megamenu { transform: translateX(-50%) translateY(0); }
@media (max-width: 1024px) { .cx-rnav__bar > .cx-nav__links { display: none; } }