/*
 * Menu desplegable de movil.
 *
 * Elementor colapsa el panel con transform:scaleY(0), que depende de que su
 * JavaScript aplique la clase correcta y resulto fragil. Aqui se controla la
 * apertura con max-height, que es predecible y no depende de nada externo.
 * Solo aplica por debajo del punto de ruptura en el que aparece el boton.
 */

@media (max-width: 1024px) {

  /* Panel desplegable ------------------------------------------------- */
  .dc-menu-panel {
    transform: none !important;
    max-height: 0 !important;
    overflow: hidden !important;
    transition: max-height .3s ease !important;
  }

  .dc-menu-panel.dc-abierto {
    max-height: min(78vh, 640px) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
  }

  /* Submenus en acordeon ---------------------------------------------- */
  .dc-menu-panel .sub-menu {
    display: block !important;
    max-height: 0;
    overflow: hidden;
    transition: max-height .28s ease;
  }

  .dc-menu-panel li.dc-sub-abierto > .sub-menu {
    max-height: 520px;
  }

  /* Sangrado para distinguir el segundo nivel */
  .dc-menu-panel .sub-menu .elementor-sub-item {
    padding-left: 32px !important;
  }

  /* La flecha gira al desplegar */
  .dc-menu-panel .sub-arrow {
    display: inline-flex;
    align-items: center;
    margin-left: 8px;
    transition: transform .28s ease;
  }

  .dc-menu-panel li.dc-sub-abierto > a .sub-arrow {
    transform: rotate(180deg);
  }

  /* Area de pulsacion comoda en pantalla tactil */
  .dc-menu-panel .elementor-item,
  .dc-menu-panel .elementor-sub-item {
    min-height: 44px;
    display: flex !important;
    align-items: center;
  }

  /* El boton tambien necesita area suficiente */
  .elementor-menu-toggle {
    min-width: 44px;
    min-height: 44px;
    touch-action: manipulation;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dc-menu-panel,
  .dc-menu-panel .sub-menu,
  .dc-menu-panel .sub-arrow { transition: none !important; }
}