/* Carta editorial Delicias Urbanas.
   Se limita a #menu para no alterar las promociones, el checkout ni las
   tarjetas de los pedidos. Inspiración: cartas vintage de comida rápida. */

.du-editorial-menu {
  --du-chocolate: #29190f;
  --du-paper: #fff6e8;
  --du-yellow: #eac34d;
  --du-copper: #dcaa73;
  --du-divider: rgba(248, 221, 185, .16);
  background: var(--du-chocolate);
  color: var(--du-paper);
  border-top: 0;
  padding: clamp(48px, 5vw, 78px) 0 clamp(68px, 8vw, 115px);
  overflow: clip;
  position: relative;
  isolation: isolate;
  scroll-margin-top: 88px;
}

.du-editorial-menu::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 60% 28%, rgba(142, 80, 24, .095), transparent 53%);
  pointer-events: none;
}

.du-editorial-menu > .shell {
  position: relative;
  z-index: 1;
  width: min(calc(100% - 40px), 1150px);
}

.du-menu-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 26px;
}

.du-editorial-menu #menu-title {
  margin: 0;
  color: var(--du-yellow);
  font-family: "Lobster", Georgia, cursive;
  font-size: clamp(4.6rem, 9vw, 7.5rem);
  font-weight: 400;
  line-height: 1.16;
  letter-spacing: -.045em;
  text-wrap: nowrap;
  text-shadow: 1px 3px 0 rgba(61, 27, 10, .12);
}

.du-editorial-menu .du-menu-all {
  flex: 0 0 auto;
  min-height: 48px;
  padding: 0 22px;
  border: 2px solid #fff4df;
  border-radius: 999px;
  background: none;
  color: var(--du-paper);
  box-shadow: none;
  cursor: pointer;
  font: 400 .92rem/1 "Lilita One", "Poppins", sans-serif;
  text-transform: uppercase;
  letter-spacing: .015em;
  transition: background .2s, color .2s, transform .2s;
}

.du-editorial-menu .du-menu-all span { margin-left: 9px; font: 900 1.15rem/1 Inter, sans-serif; }
.du-editorial-menu .du-menu-all:hover,
.du-editorial-menu .du-menu-all:focus-visible {
  background: var(--du-paper);
  color: var(--du-chocolate);
  transform: translateY(-2px);
}

.du-editorial-menu .menu-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(12px, 2vw, 26px);
  position: relative;
  z-index: 12;
  top: auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.du-editorial-menu .menu-tools.is-stuck {
  border: 0;
  background: none;
  box-shadow: none;
}

.du-editorial-menu .category-strip {
  min-width: 0;
  display: flex;
  flex: 0 1 auto;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 6px;
  border: 2px solid rgba(243, 218, 190, .27);
  border-radius: 999px;
  scroll-padding-inline: 8px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}

.du-editorial-menu .category-button {
  flex-shrink: 0;
  min-height: 42px;
  padding: 0 clamp(13px, 1.5vw, 19px);
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #f8eee1;
  box-shadow: none;
  font: 400 .89rem/1 "Lilita One", "Poppins", sans-serif;
  letter-spacing: .01em;
  text-transform: uppercase;
  scroll-snap-align: center;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.du-editorial-menu .category-button::before { display: none; }
.du-editorial-menu .category-button[aria-pressed="true"] {
  border: 0;
  background: var(--du-yellow);
  color: #29190f;
  box-shadow: 0 2px 0 rgba(255, 250, 232, .08) inset;
}
.du-editorial-menu .category-button:hover:not([aria-pressed="true"]),
.du-editorial-menu .category-button:focus-visible:not([aria-pressed="true"]) {
  border: 0;
  background: rgba(255, 244, 224, .11);
  color: white;
}

.du-editorial-menu .search-field {
  width: min(250px, 25vw);
  flex: 0 0 auto;
  height: 46px;
  margin: 0;
  border: 1px solid rgba(243, 218, 190, .32);
  border-radius: 999px;
  background: rgba(255, 240, 209, .045);
  color: var(--du-paper);
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.du-editorial-menu .search-field:focus-within {
  border-color: var(--du-yellow);
  box-shadow: 0 0 0 3px rgba(234, 195, 77, .16);
}
.du-editorial-menu .search-field input {
  color: white;
  font-size: .83rem;
}
.du-editorial-menu .search-field input::placeholder { color: rgba(255, 242, 227, .64); }
.du-editorial-menu .search-field svg { color: var(--du-yellow); }
.du-editorial-menu .clear-search {
  background: var(--du-yellow);
  color: var(--du-chocolate);
  box-shadow: none;
}

.du-editorial-menu .menu-results-meta {
  min-height: 48px;
  margin: 4px 0 4px;
  color: #bda38f;
  font: 600 .74rem/1.4 Inter, sans-serif;
  letter-spacing: .035em;
}
.du-editorial-menu .menu-results-meta .text-button {
  color: var(--du-paper);
  border-color: rgba(255, 244, 224, .28);
  background: transparent;
  box-shadow: none;
}

.du-menu-board {
  position: relative;
  isolation: isolate;
  min-height: 280px;
  scroll-margin-top: 115px;
}
.du-menu-board.is-empty { min-height: 0; }

.du-editorial-menu .du-menu-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  position: relative;
}

.du-menu-item {
  position: relative;
  display: block;
  min-width: 0;
  margin: 0;
  padding: 22px 0 20px;
  border-bottom: 1px solid var(--du-divider);
  background: transparent;
  color: var(--du-paper);
  transition: opacity .2s ease;
}
@media (prefers-reduced-motion: no-preference) {
  .du-editorial-menu .du-menu-item {
    animation: du-menu-row-appear .58s cubic-bezier(.2,.77,.22,1) both;
    animation-delay: calc(var(--du-item-index, 0) * 45ms);
  }
  @keyframes du-menu-row-appear {
    from { opacity: 0; transform: translate3d(0,14px,0); }
    to { opacity: 1; transform: translate3d(0,0,0); }
  }
}
.du-menu-item:last-child { border-bottom: 0; }
.du-menu-line {
  display: flex;
  align-items: baseline;
  min-width: 0;
  gap: clamp(12px, 1.5vw, 22px);
}
.du-menu-name,
.du-menu-price {
  margin: 0;
  font-family: "Lilita One", "Poppins", sans-serif;
  font-weight: 400;
  line-height: 1.02;
  text-transform: uppercase;
  transition: color .22s ease;
}
.du-menu-name {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 62%;
  color: #b99d81;
  font-size: clamp(1.9rem, 4.25vw, 3.75rem);
  letter-spacing: -.034em;
  overflow-wrap: break-word;
}
.du-menu-dots {
  flex: 1 1 auto;
  min-width: 25px;
  height: 5px;
  align-self: baseline;
  border-bottom: 4px dotted rgba(248, 227, 198, .25);
  transform: translateY(-5px);
  transition: border-color .2s ease;
}
.du-menu-price {
  flex: 0 0 auto;
  color: #bc9952;
  font-size: clamp(1.9rem, 4vw, 3.5rem);
  font-style: italic;
  letter-spacing: -.015em;
  font-variant-numeric: tabular-nums;
}
.du-menu-details {
  min-height: 35px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 12px;
}
.du-menu-details p {
  max-width: min(66%, 590px);
  margin: 0;
  color: #c3a994;
  font: 400 clamp(.88rem, 1.38vw, 1.04rem)/1.5 Inter, sans-serif;
  text-wrap: pretty;
}
.du-editorial-menu .du-menu-add {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px;
  padding: 6px 13px;
  border: 1px solid rgba(246, 225, 194, .34);
  border-radius: 999px;
  background: transparent;
  color: #fff2df;
  box-shadow: none;
  font: 800 .76rem/1 Inter, sans-serif;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.du-editorial-menu .du-menu-add span {
  font: 800 1.2rem/1 Inter, sans-serif;
}
.du-editorial-menu .du-menu-add:hover,
.du-editorial-menu .du-menu-add:focus-visible {
  background: var(--du-yellow);
  color: var(--du-chocolate);
  border-color: var(--du-yellow);
  transform: translateY(-1px);
}
.du-editorial-menu .du-menu-add.is-added {
  background: #d7edbf;
  border-color: #d7edbf;
  color: #1e3a22;
}

.du-menu-item.is-current .du-menu-name,
.du-menu-item:hover .du-menu-name,
.du-menu-item:focus-within .du-menu-name {
  color: #fff7ec;
}
.du-menu-item.is-current .du-menu-price,
.du-menu-item:hover .du-menu-price,
.du-menu-item:focus-within .du-menu-price {
  color: var(--du-yellow);
}
.du-menu-item.is-current .du-menu-dots,
.du-menu-item:hover .du-menu-dots,
.du-menu-item:focus-within .du-menu-dots {
  border-color: var(--du-yellow);
}

/* La ficha aparece encima de la zona punteada, como en la referencia.
   No intercepta clics de las filas ni de los botones. */
.du-menu-ticket {
  position: absolute;
  top: clamp(86px, 12vw, 145px);
  left: 54%;
  z-index: 4;
  width: clamp(200px, 23vw, 254px);
  min-height: 165px;
  transform: rotate(-5deg);
  transform-origin: center;
  pointer-events: none;
  filter: drop-shadow(0 13px 20px rgba(8, 4, 2, .24));
}
.du-menu-ticket:empty { display: none; }
.du-ticket-paper {
  padding: 21px 20px 17px;
  background: #fff7e8;
  color: #271b15;
  border-top: 4px dotted #dccdb8;
  box-shadow: 1px 3px 0 #e4d9c6;
  animation: du-ticket-appear .28s cubic-bezier(.17,.75,.24,1.2) both;
}
@keyframes du-ticket-appear {
  from { opacity: .4; transform: translateY(9px) scale(.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.du-ticket-heading {
  display: block;
  margin-bottom: 10px;
  color: #c55225;
  font: 400 1rem/1 "Lilita One", "Poppins", sans-serif;
  text-transform: uppercase;
}
.du-ticket-name {
  display: block;
  margin: 0 0 8px;
  font: 400 clamp(1.1rem, 1.5vw, 1.36rem)/1.06 "Lilita One", "Poppins", sans-serif;
  text-transform: uppercase;
}
.du-ticket-description {
  margin: 0 0 14px;
  color: #59463a;
  font: 600 .78rem/1.45 Inter, sans-serif;
}
.du-ticket-rule {
  width: 100%;
  height: 1px;
  border-top: 2px dotted #bbaa96;
  margin-bottom: 9px;
}
.du-ticket-price {
  display: block;
  color: #271b15;
  text-align: right;
  font: 400 1.55rem/1 "Lilita One", "Poppins", sans-serif;
  font-style: italic;
}

.du-editorial-menu .empty-state {
  min-height: 240px;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  color: #fff3e4;
}
.du-editorial-menu .empty-state span { color: #d3baa0; }
.du-editorial-menu .empty-state .button-secondary {
  color: var(--du-chocolate);
  background: var(--du-yellow);
  border-color: var(--du-yellow);
}

@media (min-width: 920px) {
  .du-menu-item { padding-top: 24px; padding-bottom: 23px; }
  .du-menu-details { min-height: 44px; }
}

@media (max-width: 919px) {
  .du-editorial-menu .menu-tools {
    align-items: stretch;
    flex-wrap: wrap;
  }
  .du-editorial-menu .category-strip { max-width: 100%; }
  .du-editorial-menu .search-field { width: 100%; }
  .du-menu-board { display: flex; flex-direction: column; }
  .du-menu-ticket {
    position: relative;
    top: auto;
    left: auto;
    align-self: center;
    width: 240px;
    margin: 32px auto 8px;
    transform: rotate(-4deg);
  }
  .du-menu-name { font-size: clamp(1.7rem, 4.6vw, 2.6rem); }
  .du-menu-price { font-size: clamp(1.7rem, 4.3vw, 2.5rem); }
}

@media (max-width: 699px) {
  .du-editorial-menu { padding: 38px 0 65px; }
  .du-editorial-menu > .shell { width: min(calc(100% - 34px), 620px); }
  .du-menu-heading { align-items: flex-end; margin-bottom: 20px; gap: 9px; }
  .du-editorial-menu #menu-title { font-size: clamp(4rem, 17vw, 5.7rem); }
  .du-editorial-menu .du-menu-all {
    min-height: 39px;
    padding: 0 12px;
    border-width: 1.5px;
    font-size: .69rem;
    white-space: nowrap;
    margin-bottom: 10px;
  }
  .du-editorial-menu .du-menu-all span { margin-left: 3px; font-size: .9rem; }
  .du-editorial-menu .menu-tools { gap: 12px; }
  .du-editorial-menu .category-strip {
    gap: 3px;
    width: 100%;
    max-width: 100%;
    padding: 5px;
    border-width: 1.5px;
  }
  .du-editorial-menu .category-button {
    min-height: 38px;
    padding: 0 14px;
    font-size: .77rem;
  }
  .du-editorial-menu .search-field { height: 42px; }
  .du-editorial-menu .menu-results-meta { min-height: 40px; margin: 7px 0 0; }
  .du-menu-board { display: flex; flex-direction: column; }
  .du-editorial-menu .du-menu-list { flex: 1; width: 100%; }
  .du-menu-item { padding: 20px 0 19px; }
  .du-menu-line { align-items: flex-end; flex-wrap: nowrap; gap: 8px; }
  .du-menu-name {
    max-width: 67%;
    font-size: clamp(1.31rem, 6.2vw, 2rem);
    line-height: 1.04;
    letter-spacing: -.025em;
  }
  .du-menu-price {
    font-size: clamp(1.3rem, 5.5vw, 1.9rem);
    letter-spacing: -.025em;
    line-height: 1;
  }
  .du-menu-dots {
    min-width: 8px;
    align-self: flex-end;
    border-bottom-width: 3px;
    transform: translateY(-3px);
  }
  .du-menu-details { min-height: 0; margin-top: 9px; align-items: flex-start; gap: 11px; }
  .du-menu-details p {
    max-width: none;
    flex: 1;
    font-size: .76rem;
    line-height: 1.45;
    color: #c7ad98;
  }
  .du-editorial-menu .du-menu-add {
    min-height: 31px;
    padding: 6px 9px;
    font-size: .67rem;
    white-space: nowrap;
  }
  .du-editorial-menu .du-menu-add span { font-size: 1rem; }
  .du-menu-ticket {
    position: relative;
    top: auto;
    left: auto;
    align-self: center;
    width: min(235px, 75%);
    margin: 29px auto 4px;
    transform: rotate(-3deg);
    filter: drop-shadow(0 8px 14px rgba(10, 4, 2, .15));
  }
  .du-ticket-paper { padding: 17px 17px 14px; }
}

@media (max-width: 359px) {
  .du-editorial-menu #menu-title { font-size: 3.7rem; }
  .du-editorial-menu .du-menu-all { font-size: .62rem; padding-inline: 9px; }
  .du-menu-name { max-width: 62%; font-size: 1.17rem; }
  .du-menu-price { font-size: 1.22rem; }
  .du-menu-details { flex-wrap: wrap; }
  .du-menu-details p { flex-basis: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .du-editorial-menu *,
  .du-editorial-menu *::before,
  .du-editorial-menu *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}