/* Robotmatic – Navbar · valores de Figma (Nav desktop y robotmatic-mobile-top) */
.rmn {
  --rmn-fondo: #060D1F;      /* Background/01 */
  --rmn-magenta: #CB1CC0;    /* Primary/500 */
  --rmn-violeta: #665AFA;    /* Purple/500 */
  --rmn-violeta-700: #4B2ED4;/* Purple/700 */
  --rmn-texto: #E9E9E9;      /* Neutral/200 */
  --rmn-gris: #8D8D8C;       /* Grey/300 */
  --rmn-cian: #06B6D4;       /* Secundary/500 */
  --rmn-top: 64px;
  position: relative;
  z-index: 1000;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  color: #FFFFFF;
}
.rmn *, .rmn *::before, .rmn *::after { box-sizing: border-box; }
.rmn ul { list-style: none; margin: 0; padding: 0; }
/* Texto siempre blanco, aunque el tema o el kit de Elementor definan otro color de enlace */
.rmn, .rmn a, .rmn a:hover, .rmn a:focus, .rmn a:visited, .rmn span { color: #FFFFFF !important; text-decoration: none !important; }

/* El contenedor de Elementor que envuelve el navbar queda fijo arriba */
.rmn-sticky { position: sticky !important; top: 0; z-index: 1000; }
.admin-bar .rmn-sticky { top: 32px; }
@media (max-width: 782px) { .admin-bar .rmn-sticky { top: 46px; } }

/* ---------- Barra ---------- */
.rmn__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: rgba(6, 13, 31, 0.92);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  transition: box-shadow 0.25s ease;
}
.rmn.is-scroll .rmn__barra { box-shadow: 0 8px 24px rgba(3, 7, 15, 0.6); }

.rmn__logo { display: flex; align-items: center; flex-shrink: 0; border-radius: 8px; }
.rmn__logo img { display: block; height: 40px; width: auto; }
.rmn__logo-texto { font-family: "Bricolage Grotesque", system-ui, sans-serif; font-weight: 800; font-size: 20px; line-height: 0.9; }

/* ---------- Botones ---------- */
.rmn__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 12px 24px;
  font-size: 16px;
  line-height: 1.3;
  white-space: nowrap;
  color: #FFFFFF;
}
.rmn__btn--pri { border-radius: 12px; background: linear-gradient(165deg, var(--rmn-magenta) 0%, var(--rmn-violeta) 100%); }
.rmn__btn--pri::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(165deg, var(--rmn-violeta) 0%, var(--rmn-magenta) 100%);
  opacity: 0; transition: opacity 0.25s ease;
}
.rmn__btn--pri:hover::before, .rmn__btn--pri:focus-visible::before { opacity: 1; }
.rmn__btn > *, .rmn__btn { z-index: 0; }
.rmn__btn--pri { isolation: isolate; }
.rmn__btn--pri::before { z-index: -1; }
.rmn__btn--sec { border-radius: 16px; background: var(--rmn-fondo); border: 1px solid var(--rmn-violeta-700); transition: border-color 0.2s ease; }
.rmn__btn--sec:hover { border-color: var(--rmn-violeta); }

/* Foco visible con teclado */
.rmn a:focus-visible, .rmn button:focus-visible { outline: 2px solid var(--rmn-cian); outline-offset: 2px; }

/* ---------- Hamburguesa (Figma: 25 × 25, líneas blancas) ----------
   Se resetean los estilos de botón del tema (padding, borde, fondo) para que el ícono quede centrado. */
.rmn .rmn__hamburguesa {
  display: flex !important;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px !important;
  height: 44px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 -10px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: transparent !important;
  box-shadow: none !important;
  line-height: 0 !important;
  cursor: pointer;
}
/* En celulares el :hover se queda "pegado" tras tocar, así que solo se aplica con mouse */
@media (hover: hover) {
  .rmn .rmn__hamburguesa:hover { background: rgba(102, 90, 250, 0.15) !important; }
}
.rmn__icono { position: relative; display: block; width: 24px; height: 16px; }
.rmn__icono span {
  position: absolute; left: 0; width: 24px; height: 2px; border-radius: 2px; background: #FFFFFF;
  transition: transform 0.3s cubic-bezier(.6,.05,.3,1), opacity 0.2s ease, top 0.3s cubic-bezier(.6,.05,.3,1);
}
.rmn__icono span:nth-child(1) { top: 0; }
.rmn__icono span:nth-child(2) { top: 7px; }
.rmn__icono span:nth-child(3) { top: 14px; }
/* La X: las tres líneas se juntan en el centro exacto del ícono (top 7px) y giran */
.rmn.is-abierto .rmn__icono span:nth-child(1) { top: 7px; transform: rotate(45deg); }
.rmn.is-abierto .rmn__icono span:nth-child(2) { opacity: 0; transform: scaleX(0.2); }
.rmn.is-abierto .rmn__icono span:nth-child(3) { top: 7px; transform: rotate(-45deg); }

/* ---------- Panel móvil ---------- */
.rmn__panel {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  top: var(--rmn-top);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  padding: 24px 20px calc(24px + env(safe-area-inset-bottom, 0px));
  background:
    radial-gradient(120% 60% at 100% 0%, rgba(203, 28, 192, 0.14) 0%, rgba(203, 28, 192, 0) 60%),
    radial-gradient(100% 50% at 0% 100%, rgba(102, 90, 250, 0.16) 0%, rgba(102, 90, 250, 0) 60%),
    rgba(6, 13, 31, 0.98);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  overflow-y: auto;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.25s ease, transform 0.3s cubic-bezier(.2,.8,.2,1);
}
.rmn__panel[hidden] { display: none; }
.rmn.is-abierto .rmn__panel { opacity: 1; transform: none; }

.rmn__panel-enlaces li { border-bottom: 1px solid rgba(255, 255, 255, 0.07); opacity: 0; transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.35s cubic-bezier(.2,.8,.2,1); transition-delay: calc(60ms + var(--i) * 50ms); }
.rmn.is-abierto .rmn__panel-enlaces li { opacity: 1; transform: none; }
.rmn__panel-enlaces a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 4px;
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-size: 24px; font-weight: 600; line-height: 1.1; color: #FFFFFF;
}
.rmn__panel-enlaces svg { width: 22px; height: 22px; fill: none; stroke: var(--rmn-magenta); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform 0.2s ease, stroke 0.2s ease; }
.rmn__panel-enlaces a:hover svg, .rmn__panel-enlaces a:focus-visible svg { transform: translateX(4px); stroke: var(--rmn-violeta); }

.rmn__panel-acciones { display: grid; gap: 12px; opacity: 0; transform: translateY(10px);
  transition: opacity 0.3s ease 0.28s, transform 0.35s cubic-bezier(.2,.8,.2,1) 0.28s; }
.rmn.is-abierto .rmn__panel-acciones { opacity: 1; transform: none; }
.rmn__panel-acciones .rmn__btn { width: 100%; padding: 14px 24px; }

html.rmn-bloqueo, html.rmn-bloqueo body { overflow: hidden; }

/* ---------- Solo móvil y tablet (mismos cortes que Elementor) ---------- */
.rmn__barra { min-height: 64px; padding: 0 20px; }
@media (min-width: 1025px) {
  .rmn { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .rmn *, .rmn *::before, .rmn *::after { transition: none !important; }
}