/* ================= RIBBON INTEGRADO AL HEADER ================= */
.vm-ribbon{
  position: relative !important;
  z-index: auto !important;
  top: auto !important;
  transform: none !important;

  width: 100%;
  background: var(--vm-ribbon-bg, rgba(5,3,141,.9)) !important;
  color: var(--vm-ribbon-color, #fff) !important;
  display: flex;
  align-items: center;
  overflow: hidden;
  margin: 0;
  box-shadow: none;
  font-family: inherit;
}

/* Igual dentro del header */
.site-header .vm-ribbon{
  position: relative !important;
  z-index: auto !important;
  margin: 0;
}

/* Botón cerrar */
.vm-ribbon__close{
  position: absolute;
  right: 8px; top: 50%;
  transform: translateY(-50%);
  width: 32px; height: 32px;
  border: 0; background: transparent;
  color: var(--vm-ribbon-color, #fff);
  font-size: 22px; line-height: 1;
  cursor: pointer; opacity: .8; z-index: 2;
}
.vm-ribbon__close:hover{ opacity: 1; }

/* Pista e items */
.vm-ribbon__track{ position: relative; width: 100%; display: grid; }
.vm-ribbon__item{
  grid-area: 1 / 1;
  opacity: 0; transform: translateY(5px);
  transition: opacity .4s ease, transform .4s ease;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  min-height: var(--vm-ribbon-h, 80px);
  padding: 8px 48px;
  font-weight: 500;
  font-size: var(--vm-ribbon-fs, 16px);
  line-height: 1.3;
}
.vm-ribbon__item.is-active{ opacity: 1; transform: translateY(0); }

.vm-ribbon__icon{ margin-right: .6rem; font-size: 1.1em; }

/* Enlaces dentro del ribbon */
.vm-ribbon a,
.vm-ribbon .vm-ribbon__link{
  color: var(--vm-ribbon-color, #fff) !important;
  text-decoration: underline; font-weight: 600;
  transition: color 0.2s ease;
}
.vm-ribbon .vm-ribbon__link:hover{ 
  text-decoration: none;
  color: var(--vm-ribbon-color-hover, #D7A9E3) !important;
}

.vm-ribbon .vm-ribbon__link.no-underline {
  text-decoration: none !important;
}

/* Animación slide opcional */
.vm-ribbon__item.slide-in{ animation: vmRibbonSlide .4s ease both; }

@keyframes vmRibbonSlide {
  from { transform: translateX(20px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

/* ===== RIBBON EN MÓVIL, FLOTANTE BAJO EL HEADER ===== */
@media (max-width: 767px){
  :root{
    /* Ajusta estos valores a tu header real en móvil */
    --mobile-header-height: 60px; /* alto del header */
    --vm-ribbon-h: 64px;          /* alto del ribbon */
  }

  .vm-ribbon{
    position: fixed !important;
    top: var(--mobile-header-height) !important;
    left: 0; right: 0;
    z-index: 9998 !important;
  }

  /* Empuja el contenido para que no lo tape el header+ribbon */
  body{
    padding-top: calc(var(--mobile-header-height) + var(--vm-ribbon-h));
  }

  .vm-ribbon__item{
    min-height: var(--vm-ribbon-h);
  }

  /* Mostrar texto móvil, ocultar desktop */
  .vm-ribbon .vm-desktop-text { display: none !important; }
  .vm-ribbon .vm-mobile-text  { display: inline-block !important; }
}

@media (min-width: 768px){
  /* Mostrar texto desktop, ocultar móvil */
  .vm-ribbon .vm-desktop-text { display: inline-block !important; }
  .vm-ribbon .vm-mobile-text  { display: none !important; }
}

/* safe-area iOS */
@supports (padding-top: env(safe-area-inset-top)) {
  @media (max-width: 767px){
    .vm-ribbon{
      top: calc(var(--mobile-header-height) + env(safe-area-inset-top)) !important;
    }
    body{
      padding-top: calc(var(--mobile-header-height) + var(--vm-ribbon-h) + env(safe-area-inset-top));
    }
  }
}