/* --- Estilos Generales del Plugin --- */
.main-menu { position: relative; z-index: 10000; width: 100%; }
.main-menu .main-menu-wrapper > ul { display: flex; list-style: none; margin: 0; padding: 0; justify-content: flex-end; }
.main-menu .main-menu-wrapper > ul > li { list-style: none; margin: 0; padding: 0; position: static; }
.main-menu .main-menu-wrapper > ul > li > a { padding: 25px 20px; display: flex; align-items: center; text-decoration: none; color: #333; font-weight: 500; background: none; border: none; transition: color 0.3s ease, transform 0.3s ease; }
.main-menu .main-menu-wrapper > ul > li > a:hover { color: #ff6262; transform: translateY(-2px); }

/* --- Contenedor Principal del Submenú (Común para ambos diseños) --- */
.main-menu .submenu-container { position: fixed; top: 0; left: 0; width: 100vw; background: #fafafa; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); padding: 25px 0; z-index: 9999; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(10px); transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s; }
.main-menu .submenu-container.is-visible { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
.main-menu .submenu-inner { max-width: 980px; margin: 0 auto; display: flex; width: 100%; min-height: 250px; position: relative; }

/* --- DISEÑO 1: MENÚ CON PESTAÑAS --- */
.main-menu .has-tabs-menu .submenu-inner { display: flex; }
.main-menu .has-tabs-menu .second-level-column { width: 300px; padding: 4px 0; display: flex; flex-direction: column; }
.main-menu .has-tabs-menu .second-level-list { display: flex; flex-direction: column; gap: 8px; padding: 0; margin: 0; list-style: none; }
.main-menu .has-tabs-menu .second-level-list > li { border-bottom: 1px dotted #ccc; margin: 0; padding: 0; }
.main-menu .has-tabs-menu .second-level-list > li > a { display: flex; justify-content: space-between; align-items: center; padding: 8px; width: 100%; text-decoration: none; color: #333; font-weight: 500; transition: all 0.2s ease; border-radius: 3px; }
.main-menu .has-tabs-menu .second-level-list > li > a:hover { color: #ff6262; transform: translateX(5px); }
.main-menu .has-tabs-menu .second-level-list > li.active > a { background: rgba(0, 0, 0, 0.05); color: #ff6262; }
.main-menu .has-tabs-menu .third-level-column { flex-grow: 1; padding: 0 0 0 25px; margin-left: 25px; border-left: 1px solid rgba(0, 0, 0, 0.1); }
.main-menu .has-tabs-menu .third-level-wrapper { display: none; }
.main-menu .has-tabs-menu .third-level-list { display: grid; list-style: none; grid-template-columns: repeat(2, 1fr); gap: 10px 20px; padding: 0; margin: 0; }
.main-menu .has-tabs-menu .third-level-list li a { display: flex; align-items: center; text-decoration: none; color: #333; font-weight: 400; transition: all 0.2s ease; padding: 5px 0; }
.main-menu .has-tabs-menu .third-level-list li a:hover { color: #ff6262; transform: translateX(5px); }

/* --- DISEÑO 2: MENÚ EN REJILLA (NUEVO) --- */
.main-menu .has-grid-menu .submenu-inner { display: block; }
.main-menu .has-grid-menu .grid-container { display: flex; flex-wrap: nowrap; list-style: none; margin: 0; padding: 0; width: 100%; justify-content: flex-start; align-items: flex-start; gap: 30px; }
.main-menu .has-grid-menu .grid-column { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 150px; }
.main-menu .has-grid-menu .grid-column > a.grid-column-title { font-weight: bold; color: #000; text-decoration: none; cursor: default; margin-bottom: 15px; display: block; }
.main-menu .has-grid-menu .grid-column > a.grid-column-title:hover { color: #000; }
.main-menu .has-grid-menu .grid-column-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.main-menu .has-grid-menu .grid-column-list li a { text-decoration: none; color: #333; font-weight: 400; transition: all 0.2s ease; }
.main-menu .has-grid-menu .grid-column-list li a:hover { color: #ff6262; transform: translateX(5px); }