/* ========================================
       CONTENEDOR PRINCIPAL
    ======================================== */
    .cs-megamenu-wrapper {
      position: relative;
      width: 100%;
    }
    @media (max-width:1024px){
        .cs-megamenu-wrapper{
            border-style: solid;
            border-width: 1px 1px 1px 1px;
            border-color: #FFFFFF1A;
            border-radius: 100px 100px 100px 100px;
        }
    }
    .cs-megamenu-container {
      position: relative;
      width: 100%;
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 1.5rem;
    }
    
    .cs-megamenu-root .menu-link {
        font-weight: 400 !important;
    }

    /* ========================================
       HEADER MÓVIL (oculto en desktop)
    ======================================== */
    .cs-mobile-header {
      display: none;
    }

    /* ========================================
       BOTÓN HAMBURGUESA (oculto en desktop)
    ======================================== */
    .cs-hamburger {
      display: none;
      align-items: center;
      justify-content: center;
      width: 44px;
      height: 44px;
      padding: 10px;
      background: transparent;
      border: none;
      cursor: pointer;
      position: relative;
      z-index: 1002;
    }
    .cs-hamburger svg {
      width: 24px;
      height: 24px;
      filter: none !important;
      -webkit-filter: none !important;
    }
    .cs-hamburger svg path,
    .cs-hamburger svg * {
      fill: #FFFFFF !important;
      stroke: none !important;
      filter: none !important;
      -webkit-filter: none !important;
    }
    .cs-hamburger .hamburger-icon-open {
      display: block;
    }
    .cs-hamburger .hamburger-icon-close {
      display: none;
    }
    /* ========================================
       OVERLAY MÓVIL
    ======================================== */
    .cs-menu-overlay {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
      z-index: 999;
      opacity: 0;
      transition: opacity 0.3s ease;
    }
    .cs-menu-overlay.is-visible {
      opacity: 1;
    }

    /* ========================================
       MENÚ DESKTOP (horizontal)
    ======================================== */
    .cs-megamenu-root {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0;
      list-style: none;
      margin: 0;
      padding: 0;
    }
    .cs-megamenu-root > .menu-item {
      position: static;
      display: flex;
      align-items: center;
    }
    .submenu.depth-1 > .menu-item > .menu-link img {
      margin-right: 5px;
    }
    .cs-megamenu-root > .menu-item:not(:last-child)::after {
      content: "•";
      color: transparent;
      margin: 0 1rem;
      font-size: 1rem;
      line-height: 1;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .cs-megamenu-root > .menu-item:nth-last-child(2)::after {
      content: "|";
    }
    .cs-megamenu-root .menu-link {
      position: relative;
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      color: #fff;
      text-decoration: none;
      padding: 0.95rem 0;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      font-size: 16px !important;
      font-weight: 600;
      transition: color 0.2s ease, opacity 0.2s ease;
    }
    .cs-megamenu-root > .menu-item.has-children > .menu-link::before {
      content: "▾";
      font-size: 0.9rem;
      margin-left: 0.15rem;
      opacity: 0.8;
      order: 2;
    }
    .cs-megamenu-root .menu-link::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0.35rem;
      width: 100%;
      height: 2px;
      background: #fff;
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.2s ease;
    }
    .cs-megamenu-root .menu-link:hover,
    .cs-megamenu-root .menu-link:focus {
      color: #fff;
    }
    .cs-megamenu-root .menu-link:hover::after,
    .cs-megamenu-root .menu-link:focus::after {
      transform: scaleX(1);
    }

    /* ========================================
       BOTÓN TOGGLE SUBMENÚ (desktop oculto)
    ======================================== */
    .submenu-toggle {
      display: none;
      background: none;
      border: none;
      margin-left: 0.25rem;
      padding: 0.35rem;
      cursor: pointer;
      align-items: center;
      justify-content: center;
    }
    .submenu-toggle::before,
    .submenu-toggle::after,
    .submenu-toggle *::before,
    .submenu-toggle *::after {
      display: none !important;
      content: none !important;
      background: none !important;
      border: none !important;
      width: 0 !important;
      height: 0 !important;
    }
    .submenu-toggle:focus {
      outline: 2px solid #fff;
      outline-offset: 2px;
    }
    .submenu-toggle svg {
      display: block !important;
      width: 14px !important;
      height: 14px !important;
      pointer-events: none;
      position: relative !important;
      z-index: 10 !important;
      opacity: 1 !important;
      visibility: visible !important;
      filter: none !important;
      -webkit-filter: none !important;
    }
    .submenu-toggle svg path,
    .submenu-toggle svg rect,
    .submenu-toggle svg circle,
    .submenu-toggle svg * {
      fill: #FFFFFF !important;
      stroke: none !important;
      filter: none !important;
      -webkit-filter: none !important;
    }
    .submenu-toggle .toggle-icon-plus {
      display: block !important;
    }
    .submenu-toggle .toggle-icon-minus {
      display: none !important;
    }
    .menu-item.is-open > .submenu-toggle .toggle-icon-plus {
      display: none !important;
    }
    .menu-item.is-open > .submenu-toggle .toggle-icon-minus {
      display: block !important;
    }

    /* ========================================
       MEGA MENU DROPDOWN (desktop)
    ======================================== */
    .submenu.depth-0 {
      position: absolute;
      left: 50%;
      top: calc(100% + 8px);
      transform: translateX(-50%);
      display: flex;
      flex-direction: row;
      width: min(1100px, calc(100vw - 2rem));
      padding: 2.4rem 2.5rem 2rem;
      background: #08023f;
      border-radius: 16px;
      box-shadow: 0 18px 45px rgba(15, 58, 58, 0.12);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
      z-index: 1000;
    }
    .submenu.depth-0::after {
      content: "";
      position: absolute;
      top: -20px;
      left: 0;
      right: 0;
      height: 20px;
    }
    .has-children:hover > .submenu.depth-0,
    .menu-item.is-open > .submenu.depth-0,
    .submenu.depth-0.is-open {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transform: translate(-50%, 0);
    }

    /* Columna izquierda: lista de categorías */
    .submenu.depth-0 .mega-left-col {
      display: flex;
      flex-direction: column;
      width: 240px;
      flex-shrink: 0;
    }
    .submenu.depth-0 .mega-left-col .menu-link {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 0.5rem;
      padding: 0.65rem 0.75rem;
      border-radius: 12px;
      font-size: 0.82rem;
      font-weight: 600;
      color: #fff;
      background: transparent;
      transition: background 0.2s ease, color 0.2s ease;
      margin-bottom: 0.25rem;
      cursor: pointer;
    }
    .submenu.depth-0 .mega-left-col .menu-link::after {
      display: none;
    }
    .submenu.depth-0 .mega-left-col .menu-link:hover,
    .submenu.depth-0 .mega-left-col .menu-link.mega-active {
      background: rgba(130, 207, 205, 0.18);
      color: #fff;
    }

    /* Columna derecha: panel de contenido */
    .submenu.depth-0 .mega-right-col {
      flex: 1;
      padding-left: 2rem;
      border-left: 1px solid rgba(13, 58, 58, 0.08);
      min-height: 200px;
      position: relative;
    }
    .submenu.depth-0 .mega-right-col .submenu.depth-1 {
      display: none;
      grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
      gap: 1rem 2rem;
      align-content: start;
      justify-items: start;
      list-style: none;
      margin: 0;
      padding: 0;
    }
    .submenu.depth-0 .mega-right-col .submenu.depth-1.active-panel {
      display: grid;
    }

    /* Ocultar los menu-items originales en desktop */
    .submenu.depth-0 > .menu-item {
      display: none;
    }
    /* Ocultar submenús originales dentro de items depth-1 en desktop (usar los clones) */
    .submenu.depth-0 > .menu-item.depth-1 > .submenu.depth-1:not(.desktop-clone) {
      display: none !important;
    }
    .submenu.depth-1 {
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .submenu.depth-1 > .menu-item {
      align-self: start;
      display: flex;
      flex-direction: column;
      margin-bottom: 0.5rem;
      position: relative;
    }
    .submenu.depth-1 > .menu-item > .menu-link {
      font-size: 0.88rem;
      font-weight: 400;
      color: #fff;
      text-transform: none;
      letter-spacing: 0.01em;
      padding: 0.3rem 0;
      display: block;
      flex-shrink: 0;
      cursor: pointer;
    }
    .submenu.depth-1 > .menu-item > .submenu {
      margin-top: 0.4rem;
      padding-left: 1rem;
      border-left: 1px solid rgba(76, 95, 95, 0.18);
      list-style: none;
      display: none;
      flex-shrink: 0;
    }
    .submenu.depth-1 > .menu-item:hover > .submenu,
    .submenu.depth-1 > .menu-item.has-children:hover > .submenu {
      display: block;
    }
    .submenu.depth-1 > .menu-item > .submenu > .menu-item {
      padding: 0.15rem 0;
    }
    .depth-2 > .menu-link,
    .depth-2 > .menu-link:visited {
      color: #4c5f5f;
      font-size: 0.85rem;
      font-weight: 500;
      display: block;
      padding: 0.25rem 0;
      text-transform: none;
    }
    .depth-2 > .menu-link:hover,
    .depth-2 > .menu-link:focus {
      color: #0d3a3a;
    }
    .depth-3 > .menu-link {
      color: #6f8383;
      font-size: 0.78rem;
      display: block;
      padding: 0.2rem 0 0.2rem 0;
      text-transform: none;
    }
    .depth-3 > .menu-link:hover {
      color: #0d3a3a;
    }
    .depth-4 > .menu-link {
      color: #7a9090;
      font-size: 0.75rem;
      display: block;
      padding: 0.15rem 0 0.15rem 1.2rem;
    }

    /* ========================================
       RESPONSIVE DESKTOP: Ajustes de tamaño
    ======================================== */
    @media (max-width: 1757px) {
      .cs-megamenu-root .menu-link {
        font-size: 14px !important;
      }
    }
    @media (max-width: 1649px) {
      .cs-megamenu-root .menu-link {
        font-size: 12px !important;
      }
    }
    @media (max-width: 1440px) {
      .cs-megamenu-root .menu-link {
        font-size: 10px !important;
      }
      .cs-megamenu-root > .menu-item:not(:last-child)::after {
        margin: 0 0.6rem;
      }
    }
    @media (max-width: 1200px) {
      .cs-megamenu-root .menu-link {
        font-size: 9px !important;
      }
      .cs-megamenu-root > .menu-item:not(:last-child)::after {
        margin: 0 0.5rem;
      }
      .submenu.depth-0 {
        width: min(1000px, calc(100vw - 2rem));
      }
      .submenu.depth-0 .mega-left-col {
        width: 200px;
      }
    }
    @media (max-width: 1100px) {
      .cs-megamenu-root .menu-link {
        font-size: 8px !important;
      }
      .cs-megamenu-root > .menu-item:not(:last-child)::after {
        margin: 0 0.4rem;
        font-size: 0.7rem;
      }
    }
    @media (max-width: 1050px) {
      .cs-megamenu-root .menu-link {
        font-size: 7px !important;
      }
      .cs-megamenu-root > .menu-item:not(:last-child)::after {
        margin: 0 0.35rem;
      }
    }

    /* ========================================
       RESPONSIVE: 1024px - MENÚ HAMBURGUESA
    ======================================== */
    @media (max-width: 1024px) {
      /* Mostrar hamburguesa */
      .cs-hamburger {
        display: flex;
      }
      .cs-hamburger.is-active {
        position: fixed;
        right: 1rem;
        top: 1rem;
        z-index: 9999;
        width: 44px;
        height: 44px;
      }
      .cs-hamburger.is-active .hamburger-icon-open {
        display: none !important;
      }
      .cs-hamburger.is-active .hamburger-icon-close {
        display: block !important;
        width: 24px;
        height: 24px;
      }

      /* Overlay visible */
      .cs-menu-overlay {
        display: block;
        pointer-events: none;
      }
      .cs-menu-overlay.is-visible {
        pointer-events: auto;
      }

      /* Menú como panel lateral */
      .cs-megamenu-container {
        position: fixed;
        top: 0;
        right: -100%;
        width: 320px;
        max-width: 85vw;
        height: 100vh;
        max-height: 100vh;
        padding: 0;
        margin: 0;
        background: #08023f;
        box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
        z-index: 1001;
        transition: right 0.3s ease;
        overflow-y: auto;
        overflow-x: hidden;
      }
      .cs-megamenu-container.is-open {
        right: 0;
      }

      /* Header del menú móvil */
      .cs-mobile-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1rem 1.25rem;
        border-bottom: 1px solid rgba(13, 58, 58, 0.1);
        background: #f8fafa;
        position: sticky;
        top: 0;
        z-index: 10;
      }
      .cs-mobile-title {
        font-size: 1rem;
        font-weight: 700;
        color: #0d3a3a;
        margin: 0;
      }
      .cs-mobile-close {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        background: transparent;
        border: none;
        cursor: pointer;
        border-radius: 8px;
        transition: background 0.2s ease;
      }
      .cs-mobile-close:hover {
        background: rgba(13, 58, 58, 0.08);
      }
      .cs-mobile-close svg {
        width: 20px;
        height: 20px;
        stroke: #0d3a3a;
        stroke-width: 2;
      }

      /* Reset del menú root */
      .cs-megamenu-root {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 0.5rem 0;
      }
      .cs-megamenu-root > .menu-item {
        flex-direction: column;
        align-items: stretch;
        position: relative;
        border-bottom: 1px solid rgba(13, 58, 58, 0.06);
      }
      .cs-megamenu-root > .menu-item:last-child {
        border-bottom: none;
      }
      .cs-megamenu-root > .menu-item:not(:last-child)::after {
        display: none;
      }
      .cs-megamenu-root > .menu-item:nth-last-child(2)::after {
        display: none;
      }

      /* Links principales */
      .cs-megamenu-root .menu-link {
        padding: 1rem 1.25rem;
        font-size: 0.95rem !important;
        justify-content: flex-start;
        color: #fff;
        text-transform: none;
        letter-spacing: 0;
      }
      .cs-megamenu-root > .menu-item.has-children > .menu-link::before {
        display: none;
      }
      .cs-megamenu-root .menu-link::after {
        display: none;
      }

      /* Botón toggle submenú */
      .submenu-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        right: 0.75rem;
        top: 0;
        height: 100%;
        width: 44px;
        color: #0d3a3a;
        padding: 0;
        background: transparent !important;
        border: none !important;
      }
      .submenu-toggle::before,
      .submenu-toggle::after {
        display: none !important;
        content: none !important;
        background: none !important;
        width: 0 !important;
        height: 0 !important;
        position: static !important;
      }
      .submenu-toggle svg {
        display: block !important;
      }
      .submenu-toggle:focus {
        outline: none;
        background: rgba(13, 58, 58, 0.05);
      }

      /* Submenú depth-0 */
      .submenu.depth-0 {
        position: static;
        transform: none;
        width: 100%;
        padding: 0;
        border-radius: 0;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        display: none;
        background: #f4f8f8;
        flex-direction: column;
      }
      .submenu.depth-0::after {
        display: none;
      }
      .menu-item.is-open > .submenu.depth-0,
      .submenu.depth-0.is-open {
        display: flex;
        transform: none;
      }

      /* En móvil: ocultar columnas de desktop y mostrar estructura original */
      .submenu.depth-0 .mega-left-col,
      .submenu.depth-0 .mega-right-col {
        display: none !important;
      }

      /* Ocultar los clones de desktop en móvil */
      .submenu.depth-1.desktop-clone {
        display: none !important;
      }

      /* Mostrar los submenús originales en móvil */
      .submenu.depth-0 > .menu-item.depth-1 > .submenu.depth-1:not(.desktop-clone) {
        display: none; /* Por defecto oculto, se muestra con is-open */
      }
      .submenu.depth-0 > .menu-item.depth-1.is-open > .submenu.depth-1:not(.desktop-clone) {
        display: block !important;
      }

      /* Items de categoría - mostrar la estructura original */
      .submenu.depth-0 > .menu-item {
        display: block !important;
      }
      .submenu.depth-0 > .menu-item.depth-1 {
        border-bottom: 1px solid rgba(13, 58, 58, 0.08);
        position: relative;
        background: #08023f;
      }
      .submenu.depth-0 > .menu-item.depth-1:last-child {
        border-bottom: none;
      }
      .submenu.depth-0 > .menu-item.depth-1 > .menu-link {
        display: block;
        padding: 0.85rem 1.25rem;
        font-size: 0.9rem;
        font-weight: 600;
        color: #fff;
      }
      /* Ocultar el ::after en móvil, usamos el botón toggle */
      .submenu.depth-0 > .menu-item.depth-1.has-children > .menu-link::after {
        display: none !important;
      }

      /* Submenú depth-1 dentro de items originales */
      .submenu.depth-0 > .menu-item.depth-1 > .submenu.depth-1:not(.desktop-clone) {
        padding: 0 1.25rem 1rem 1.25rem;
        /*background: #f8fafa;*/
      }

      /* =============================================
         ESTILOS GENERALES PARA TODOS LOS NIVELES EN MÓVIL
         ============================================= */

      /* Todos los items con hijos en móvil */
      .submenu .menu-item.has-children {
        position: relative;
      }
      .submenu .menu-item.has-children > .menu-link {
        padding-right: 3rem !important;
      }
      /* Ocultar ::after en móvil - usamos botón toggle */
      .submenu .menu-item.has-children > .menu-link::after {
        display: none !important;
      }

      /* Botón toggle visible en móvil para TODOS los niveles */
      .submenu .menu-item.has-children > .submenu-toggle {
        display: flex !important;
        position: absolute;
        right: 0;
        top: 0;
        height: 44px;
        width: 44px;
        align-items: center;
        justify-content: center;
        background: transparent !important;
        border: none !important;
        cursor: pointer;
        color: #82cfcd;
        z-index: 2;
      }
      .submenu .menu-item.has-children > .submenu-toggle::before,
      .submenu .menu-item.has-children > .submenu-toggle::after {
        display: none !important;
        content: none !important;
        background: none !important;
        width: 0 !important;
        height: 0 !important;
      }
      .submenu .menu-item.has-children > .submenu-toggle svg {
        display: block !important;
        width: 14px !important;
        height: 14px !important;
      }
      .submenu .menu-item.has-children > .submenu-toggle .toggle-icon-plus {
        display: block !important;
      }
      .submenu .menu-item.has-children > .submenu-toggle .toggle-icon-minus {
        display: none !important;
      }
      .submenu .menu-item.has-children.is-open > .submenu-toggle .toggle-icon-plus {
        display: none !important;
      }
      .submenu .menu-item.has-children.is-open > .submenu-toggle .toggle-icon-minus {
        display: block !important;
      }

      /* Todos los submenús ocultos por defecto */
      .submenu .submenu {
        display: none !important;
        list-style: none;
        margin: 0.5rem 0 0 0;
        padding: 0 0 0 1rem;
        border-left: 2px solid rgba(130, 207, 205, 0.4);
      }
      /* Mostrar submenú cuando el padre tiene is-open */
      .submenu .menu-item.is-open > .submenu {
        display: block !important;
      }

      /* Items dentro de submenús */
      .submenu .menu-item {
        position: relative;
        border-bottom: 1px solid rgba(13, 58, 58, 0.05);
        padding: 0.35rem 0;
      }
      .submenu .menu-item:last-child {
        border-bottom: none;
      }
      .submenu .menu-item > .menu-link {
        display: block;
        color: #fff;
        padding: 0.5rem 0;
      }

      /* Estilos específicos por nivel */
      .submenu.depth-1:not(.desktop-clone) > .menu-item > .menu-link {
        font-size: 0.88rem;
        font-weight: 600;
      }
      .submenu.depth-2 > .menu-item > .menu-link {
        font-size: 0.85rem;
        font-weight: 500;
        color: #1a4a4a;
      }
      .submenu.depth-3 > .menu-item > .menu-link {
        font-size: 0.82rem;
        font-weight: 400;
        color: #5a7272;
      }
      .submenu.depth-3 > .menu-item > .menu-link:hover {
        color: #0d3a3a;
      }
      .submenu.depth-4 > .menu-item > .menu-link {
        font-size: 0.78rem;
        font-weight: 400;
        color: #6f8383;
      }
      .submenu.depth-4 > .menu-item > .menu-link:hover {
        color: #0d3a3a;
      }

      /* Bordes más sutiles en niveles profundos */
      .submenu.depth-2 {
        border-left-color: rgba(130, 207, 205, 0.35);
      }
      .submenu.depth-3 {
        border-left-color: rgba(130, 207, 205, 0.25);
      }
      .submenu.depth-4 {
        border-left-color: rgba(130, 207, 205, 0.15);
      }
      
      .submenu.depth-0 > .menu-item.depth-1 > .menu-link img {
            margin-right: 10px;
      }
    }

    /* ========================================
       RESPONSIVE: 480px - Móviles pequeños
    ======================================== */
    @media (max-width: 480px) {
      .cs-megamenu-container {
        width: 100%;
        max-width: 100vw;
      }
      .cs-mobile-header {
        padding: 0.85rem 1rem;
      }
      .cs-megamenu-root .menu-link {
        padding: 0.9rem 1rem;
        font-size: 0.9rem !important;
      }
      .submenu-toggle {
        right: 0.5rem;
      }
      .submenu.depth-0 .mega-left-col .menu-link {
        padding: 0.7rem 1rem;
        font-size: 0.85rem;
      }
      .submenu.depth-0 .mega-right-col {
        padding: 0.5rem 1rem 0.75rem;
      }
      .submenu.depth-1 > .menu-item > .menu-link {
        font-size: 0.85rem;
      }
      .depth-2 > .menu-link {
        font-size: 0.82rem;
      }
      .depth-3 > .menu-link {
        font-size: 0.78rem;
      }
      .depth-4 > .menu-link {
        font-size: 0.72rem;
      }
      .submenu.depth-3 {
        padding-left: 0.75rem;
      }
      .submenu.depth-4 {
        padding-left: 0.5rem;
      }
      
    }