/* ===== Barra ===== */
.wcpmm {
  position: relative;
}

.wcpmm-bar {
  list-style: none;
  display: flex;
  gap: 20px;
  padding: 0;
  margin: 0;
  align-items: center;
}

.wcpmm-link {
  background: transparent;
  border: 0;
  font-weight: 600;
  cursor: pointer;
  padding: 10px 6px;
  text-decoration: none;
  color: inherit;
}

/* ===== Panel ===== */
.wcpmm-item {
  position: static; /* 👈 CAMBIA 'relative' por 'static' */
}

/* === CONTENEDOR DEL MEGA: centrado y ancho como tu ejemplo === */
.wcpmm-item .wcpmm-panel {
  position: absolute;
  top: 100%;
  left: 50%; /* centrado */
  width: 1200px !important; /* <<< ajusta aquí el ancho global */
  max-width: 95vw; /* seguridad en pantallas pequeñas */
  background: #fff;
  border: 1px solid #e5e7eb;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12);
  padding: 20px 20px;
  border-radius: 14px;
  transform: translate(-50%, 15px); /* centrado + desplazamiento inicial */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s 0.2s;
  z-index: 9999;
}

/* === Mostrar al abrir (hover o click) manteniendo el centrado === */
.wcpmm-item[data-openon="hover"]:hover > .wcpmm-panel,
.wcpmm-item.open > .wcpmm-panel {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

/* ===== Responsive ===== */
@media (max-width: 1024px) {
  .wcpmm-item .wcpmm-panel {
    width: 92vw; /* ocupa casi todo el ancho */
    left: 50%;
    transform: translate(-50%, 10px);
    padding: 16px 18px;
    border-radius: 10px;
  }
}

/* === Estilo del menú para igualar a Elementor === */
.wcpmm-link {
  font-family: 'Josefin Sans', sans-serif !important;
  font-size: 18px !important;
  font-weight: 400;
  color: #BD0141 !important;
  margin: 0 27.5px 0 0 !important; /* igual al spacing que mostraste */
  text-transform: none; /* asegúrate que no esté en mayúsculas */
}

/* === Opcional: cambio de color al pasar el mouse === */
.wcpmm-link:hover {
  color: #A10036 !important; /* un tono más oscuro o el mismo, según tu diseño */
}

/* --- Flecha "V" fija hacia abajo (sin giro) --- */
.wcpmm-item.has-mega > .wcpmm-link::after,
.wcpmm-item.has-panel > .wcpmm-link::after {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-right: 2px solid #BD0141;
  border-bottom: 2px solid #BD0141;
  transform: rotate(45deg) !important;   /* siempre hacia abajo */
  margin-left: 8px;
  margin-bottom: 2px;
  transition: none;                       /* sin animación de giro */
}

/* Forzar mismo estado en hover y abierto (por si alguna regla externa rota) */
.wcpmm-item.has-mega.open > .wcpmm-link::after,
.wcpmm-item.has-mega:hover > .wcpmm-link::after,
.wcpmm-item.has-panel.open > .wcpmm-link::after,
.wcpmm-item.has-panel:hover > .wcpmm-link::after,
.wcpmm-item[data-openon="hover"]:hover > .wcpmm-link::after {
  transform: rotate(45deg) !important;    /* sigue igual */
}


.wcpmm-item.has-mega.open > .wcpmm-link::after,
.wcpmm-item.has-mega[data-openon="hover"]:hover > .wcpmm-link::after {
  transform: rotate(180deg);
}