/* Menú móvil (≤ 1024 px) en todas las rutas. Personalización autorizada 2026-10-05, propuesta A "Noche"
   elegida por el cliente entre tres. Al abrir, cabecera y panel azul noche a juego con el pie: logo en
   blanco, enlaces grandes alineados a la izquierda, página actual en dorado, flechas en círculo que giran,
   submenús en un fondo más oscuro. Botón de menú redondeado que se convierte en X y RESERVAR en píldora.
   Entrada escalonada al abrir, sin movimiento con "reducir movimiento".
   El selector de la cabecera va doblado: las reglas originales `li:hover/:focus-within > a` llevan
   !important con más especificidad y, al tocar una flecha, el li queda en :focus-within. */
@media (max-width: 1024px) {
  html [data-ecb-mobile-header] {
    --mm-ease: cubic-bezier(0.23, 1, 0.32, 1);
    --mm-navy: #062a44;
    --mm-night: #0a3556;
    --mm-gold: #df9b11;
    --mm-gold-light: #f5be4f;
    --mm-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    padding: 4px 12px 4px 10px !important;
    gap: 12px !important;
    transition: background-color 260ms ease !important;
  }

  /* Botón de menú: cuadrado redondeado con rayas que forman una X */
  html [data-ecb-mobile-generated-toggle] {
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    place-content: center !important;
    justify-items: center !important;
    gap: 5px !important;
    border-radius: 12px !important;
    background: var(--mm-gold) !important;
    box-shadow: 0 6px 16px -8px rgb(223 155 17 / 80%) !important;
  }

  html [data-ecb-mobile-generated-toggle] span {
    width: 20px !important;
    height: 2.5px !important;
    border-radius: 2px !important;
    background: var(--mm-navy) !important;
  }

  html [data-ecb-mobile-generated-toggle][aria-expanded="true"] span:nth-child(1) {
    transform: translateY(7.5px) rotate(45deg) !important;
  }

  html [data-ecb-mobile-generated-toggle][aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-7.5px) rotate(-45deg) !important;
  }

  html [data-ecb-mobile-reservation] {
    min-height: 40px !important;
    padding: 0 18px !important;
    border-radius: 12px !important;
    background: var(--mm-gold) !important;
    color: #fff !important;
    font: 700 12.5px/1 "Open Sans", Arial, sans-serif !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
  }

  html [data-ecb-mobile-reservation] * {
    color: inherit !important;
    font: inherit !important;
    letter-spacing: inherit !important;
  }

  /* Cabecera con el menú abierto */
  html [data-ecb-mobile-header]:has(> [data-ecb-mobile-panel][data-ecb-open="true"]) {
    background: var(--mm-night) !important;
  }

  html [data-ecb-mobile-header]:has(> [data-ecb-mobile-panel][data-ecb-open="true"]) [data-ecb-mobile-logo] img {
    filter: brightness(0) invert(1);
  }

  html [data-ecb-mobile-header]:has(> [data-ecb-mobile-panel][data-ecb-open="true"]) [data-ecb-mobile-generated-toggle] {
    background: rgb(255 255 255 / 10%) !important;
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 18%) !important;
  }

  html [data-ecb-mobile-header]:has(> [data-ecb-mobile-panel][data-ecb-open="true"]) [data-ecb-mobile-generated-toggle] span {
    background: #fff !important;
  }

  /* Panel */
  html [data-ecb-mobile-header][data-ecb-mobile-header] > [data-ecb-mobile-panel] {
    padding: 6px 0 calc(28px + env(safe-area-inset-bottom)) !important;
    background:
      radial-gradient(80% 40% at 100% 0%, rgb(0 159 227 / 16%) 0%, transparent 70%),
      linear-gradient(180deg, var(--mm-night) 0%, var(--mm-navy) 55%, #041c30 100%) !important;
  }

  html [data-ecb-mobile-header][data-ecb-mobile-header] > [data-ecb-mobile-panel] > li {
    grid-template-columns: minmax(0, 1fr) 60px !important;
    align-items: center !important;
    border-bottom: 1px solid rgb(255 255 255 / 8%) !important;
    background: transparent !important;
  }

  html [data-ecb-mobile-header][data-ecb-mobile-header] > [data-ecb-mobile-panel] > li > a {
    justify-content: flex-start !important;
    min-height: 62px !important;
    padding: 16px 24px !important;
    color: #fff !important;
    font: 600 20px/1.2 "Open Sans", Arial, sans-serif !important;
    letter-spacing: -0.01em !important;
    text-align: left !important;
  }

  html [data-ecb-mobile-header][data-ecb-mobile-header] > [data-ecb-mobile-panel] a * {
    text-align: left !important;
  }

  html [data-ecb-mobile-header][data-ecb-mobile-header] > [data-ecb-mobile-panel] a span {
    color: inherit !important;
  }

  html [data-ecb-mobile-header][data-ecb-mobile-header] > [data-ecb-mobile-panel] > li > a i {
    color: var(--mm-gold-light) !important;
  }

  html [data-ecb-mobile-header][data-ecb-mobile-header] > [data-ecb-mobile-panel] a[aria-current="page"] {
    color: var(--mm-gold-light) !important;
  }

  html [data-ecb-mobile-header][data-ecb-mobile-header] > [data-ecb-mobile-panel] > li > a[aria-current="page"]:not(:has(img))::before {
    content: "";
    flex: 0 0 8px;
    width: 8px;
    height: 8px;
    margin-right: 12px;
    border-radius: 50%;
    background: var(--mm-gold-light);
  }

  /* Flecha dibujada en círculo que gira al abrir */
  html [data-ecb-mobile-header][data-ecb-mobile-header] > [data-ecb-mobile-panel] > li > button[aria-expanded] {
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    justify-self: center !important;
    border-radius: 50% !important;
    background: rgb(255 255 255 / 8%) !important;
    color: #fff !important;
  }

  html [data-ecb-mobile-header][data-ecb-mobile-header] > [data-ecb-mobile-panel] > li > button[aria-expanded]::after {
    content: "" !important;
    width: 16px;
    height: 16px;
    background: currentColor;
    -webkit-mask: var(--mm-chevron) center / contain no-repeat;
    mask: var(--mm-chevron) center / contain no-repeat;
    transition: rotate 260ms var(--mm-ease);
  }

  html [data-ecb-mobile-header][data-ecb-mobile-header] > [data-ecb-mobile-panel] > li > button[aria-expanded="true"]::after {
    transform: none !important;
    rotate: 180deg;
  }

  /* Submenús */
  html [data-ecb-mobile-header][data-ecb-mobile-header] > [data-ecb-mobile-panel] > li > ul {
    padding: 4px 0 12px !important;
    background: rgb(0 0 0 / 14%) !important;
  }

  html [data-ecb-mobile-header][data-ecb-mobile-header] > [data-ecb-mobile-panel] > li > ul > li > a {
    justify-content: flex-start !important;
    min-height: 46px !important;
    padding: 10px 24px 10px 44px !important;
    border-top: 0 !important;
    color: rgb(214 232 245 / 86%) !important;
    font: 500 16px/1.3 "Open Sans", Arial, sans-serif !important;
    text-align: left !important;
  }

  html [data-ecb-mobile-header][data-ecb-mobile-header] > [data-ecb-mobile-panel] > li > ul > li > a[aria-current="page"] {
    color: var(--mm-gold-light) !important;
  }

  /* Foco de teclado */
  html [data-ecb-mobile-header][data-ecb-mobile-header] > [data-ecb-mobile-panel] :is(a, button):focus-visible {
    outline: 2px solid var(--mm-gold-light) !important;
    outline-offset: -4px !important;
    border-radius: 12px;
  }

  html [data-ecb-mobile-header][data-ecb-mobile-header] > [data-ecb-mobile-panel] > li > button[aria-expanded]:focus-visible {
    border-radius: 50% !important;
    outline-offset: 2px !important;
  }
}

/* Movimiento: X del botón y entrada escalonada de las filas */
@media (max-width: 1024px) and (prefers-reduced-motion: no-preference) {
  html [data-ecb-mobile-generated-toggle] span {
    transition: transform 280ms var(--mm-ease), opacity 160ms ease !important;
  }

  html [data-ecb-mobile-header] > [data-ecb-mobile-panel][data-ecb-open="true"] > li > :is(a, button) {
    animation: mm-in 460ms var(--mm-ease) both;
    animation-delay: calc(var(--mm-i, 0) * 32ms + 60ms);
  }

  html [data-ecb-mobile-header] > [data-ecb-mobile-panel] > li:nth-child(2) { --mm-i: 1; }
  html [data-ecb-mobile-header] > [data-ecb-mobile-panel] > li:nth-child(3) { --mm-i: 2; }
  html [data-ecb-mobile-header] > [data-ecb-mobile-panel] > li:nth-child(4) { --mm-i: 3; }
  html [data-ecb-mobile-header] > [data-ecb-mobile-panel] > li:nth-child(5) { --mm-i: 4; }
  html [data-ecb-mobile-header] > [data-ecb-mobile-panel] > li:nth-child(6) { --mm-i: 5; }
  html [data-ecb-mobile-header] > [data-ecb-mobile-panel] > li:nth-child(7) { --mm-i: 6; }
  html [data-ecb-mobile-header] > [data-ecb-mobile-panel] > li:nth-child(8) { --mm-i: 7; }
  html [data-ecb-mobile-header] > [data-ecb-mobile-panel] > li:nth-child(9) { --mm-i: 8; }
  html [data-ecb-mobile-header] > [data-ecb-mobile-panel] > li:nth-child(10) { --mm-i: 9; }
  html [data-ecb-mobile-header] > [data-ecb-mobile-panel] > li:nth-child(n + 11) { --mm-i: 10; }

  html [data-ecb-mobile-header] > [data-ecb-mobile-panel] > li[data-ecb-open="true"] > ul > li > a {
    animation: mm-in 360ms var(--mm-ease) both;
  }
}

@keyframes mm-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* «Mi reserva» en el menú (2026-10-13): solo en el menú móvil; en escritorio la enlaza el pie. */
@media (min-width: 1025px) {
  .ecb-menu-account { display: none !important; }
}