/* Menue · cabecera octubre 2026. No cambia productos, pedidos ni estilos de otros locales. */
/* La ficha de dirección, horarios y teléfono conserva contraste pero deja entrever la portada. */
body .hero .hero-integrated-top .hero-info-stack > #headerInfoCard:not([hidden]) {
  background:color-mix(in srgb,var(--md-header-color,#121212) 67%,transparent)!important;
  border-color:color-mix(in srgb,var(--md-header-ink,#fff) 20%,transparent)!important;
}
body .hero.menue-has-header-image .hero-integrated-top .hero-info-stack > #headerInfoCard:not([hidden]) {
  background:rgba(14,14,17,.62)!important;
  border-color:rgba(255,255,255,.2)!important;
}

/* El selector comercial aparece SOLO si el local ofrece ambas versiones. */
body[data-both-plans="1"] .hero .hero-integrated-top > .menue-plan-switch {
  display:inline-flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  flex-wrap:nowrap!important;
  gap:5px!important;
  flex:0 0 auto!important;
  margin:0!important;
  padding:0!important;
  min-width:0!important;
  width:auto!important;
  max-width:100%!important;
  z-index:3!important;
}
body[data-both-plans="1"] .hero .hero-integrated-top > .menue-plan-switch > span {display:none!important}
body[data-both-plans="1"] .hero .hero-integrated-top > .menue-plan-switch > a {
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  border:1px solid color-mix(in srgb,var(--md-header-ink,#fff) 30%,transparent)!important;
  background:color-mix(in srgb,var(--md-header-color,#101010) 75%,transparent)!important;
  color:var(--md-header-ink,#fff)!important;
  text-decoration:none!important;
  font-size:12px!important;
  line-height:1.2!important;
  font-weight:750!important;
  padding:9px 12px!important;
  min-height:36px!important;
  white-space:nowrap!important;
  border-radius:999px!important;
  box-shadow:none!important;
  transition:background-color .2s ease,border-color .2s ease!important;
}
body[data-both-plans="1"] .hero .hero-integrated-top > .menue-plan-switch > a[aria-current="page"] {
  background:var(--md-header-accent,#ffe12e)!important;
  border-color:var(--md-header-accent,#ffe12e)!important;
  color:#171714!important;
}
body[data-both-plans="1"] .hero .hero-integrated-top > .menue-plan-switch > a:focus-visible {
  outline:2px solid var(--md-header-accent,#ffe12e)!important;
  outline-offset:3px!important;
}
@media(min-width:1101px){
  body[data-both-plans="1"] .hero .hero-integrated-top {
    display:grid!important;
    grid-template-columns:minmax(170px,1fr) max-content max-content!important;
    align-items:center!important;
    gap:12px!important;
  }
  body[data-both-plans="1"] .hero .hero-integrated-top > .brand {grid-column:1!important;grid-row:1!important}
  body[data-both-plans="1"] .hero .hero-integrated-top > .menue-plan-switch {grid-column:2!important;grid-row:1!important;justify-self:end!important}
  body[data-both-plans="1"] .hero .hero-integrated-top > .hero-info-stack {
    grid-column:3!important;grid-row:1!important;
    justify-self:end!important;
    margin-left:0!important;
    width:auto!important;
    max-width:600px!important;
  }
}
@media(min-width:801px) and (max-width:1100px){
  body[data-both-plans="1"] .hero .hero-integrated-top {
    display:flex!important;
    flex-wrap:wrap!important;
    gap:9px 12px!important;
  }
  body[data-both-plans="1"] .hero .hero-integrated-top > .brand {flex:1 1 auto!important}
  body[data-both-plans="1"] .hero .hero-integrated-top > .menue-plan-switch {margin-left:auto!important}
  body[data-both-plans="1"] .hero .hero-integrated-top > .hero-info-stack {
    flex:0 0 100%!important;
    width:100%!important;
    max-width:100%!important;
    justify-content:flex-end!important;
  }
}
@media(max-width:800px){
  /* En pantallas estrechas, las dos versiones quedan en la fila inmediatamente
     anterior al cuerpo de la portada, a la izquierda del icono de información. */
  body[data-both-plans="1"] .hero .hero-integrated-top {
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 40px!important;
    grid-template-rows:auto auto auto!important;
    gap:9px 8px!important;
  }
  body[data-both-plans="1"] .hero .hero-integrated-top > .brand {
    grid-column:1 / -1!important;
    grid-row:1!important;
  }
  body[data-both-plans="1"] .hero .hero-integrated-top > .menue-plan-switch {
    grid-column:1!important;
    grid-row:2!important;
    justify-self:end!important;
  }
  body[data-both-plans="1"] .hero .hero-integrated-top > .menue-info-trigger {
    grid-column:2!important;
    grid-row:2!important;
    justify-self:end!important;
  }
  body[data-both-plans="1"] .hero .hero-integrated-top > .hero-info-stack {
    grid-column:1 / -1!important;
    grid-row:3!important;
  }
  body[data-both-plans="1"] .hero .hero-integrated-top > .menue-plan-switch > a {
    padding:8px 12px!important;
    min-height:36px!important;
  }
}

/* V3 - misma fila para Logo | Básica/Premium | ⓘ también en móvil.
   No crea una nueva línea para los controles. */
@media (max-width:800px){
  body[data-both-plans="1"] .hero .hero-integrated-top {
    display:grid!important;
    grid-template-columns:minmax(0,1fr) max-content 36px!important;
    grid-template-rows:auto!important;
    align-items:center!important;
    column-gap:6px!important;
    row-gap:0!important;
  }
  body[data-both-plans="1"] .hero .hero-integrated-top > .brand {
    grid-column:1!important;
    grid-row:1!important;
    min-width:0!important;
    flex:0 1 auto!important;
    flex-wrap:nowrap!important;
    gap:7px!important;
    padding-right:0!important;
  }
  body[data-both-plans="1"] .hero .hero-integrated-top > .brand .brand-mark {
    width:clamp(40px,12vw,58px)!important;
    height:clamp(40px,12vw,58px)!important;
    flex:0 0 clamp(40px,12vw,58px)!important;
    min-width:clamp(40px,12vw,58px)!important;
    max-width:clamp(40px,12vw,58px)!important;
  }
  body[data-both-plans="1"] .hero .hero-integrated-top > .brand > div:nth-child(2) {min-width:0!important;overflow:hidden!important;}
  body[data-both-plans="1"] .hero .hero-integrated-top > .brand h1 {
    overflow:hidden!important;
    white-space:nowrap!important;
    text-overflow:ellipsis!important;
    font-size:clamp(12px,3.6vw,18px)!important;
    margin-bottom:3px!important;
  }
  body[data-both-plans="1"] .hero .hero-integrated-top > .brand > div:nth-child(2)>span {
    font-size:10px!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }
  body[data-both-plans="1"] .hero .hero-integrated-top > .menue-plan-switch {
    grid-column:2!important;
    grid-row:1!important;
    justify-self:end!important;
    margin:0!important;
    gap:4px!important;
    width:max-content!important;
  }
  body[data-both-plans="1"] .hero .hero-integrated-top > .menue-plan-switch>a {
    font-size:11px!important;
    padding:7px 9px!important;
    min-height:32px!important;
  }
  body[data-both-plans="1"] .hero .hero-integrated-top > .menue-info-trigger {
    grid-column:3!important;
    grid-row:1!important;
    justify-self:end!important;
    width:36px!important;
    height:36px!important;
    min-width:36px!important;
  }
  body[data-both-plans="1"] .hero .hero-integrated-top > .hero-info-stack {
    grid-column:1 / -1!important;
    grid-row:2!important;
  }
}
@media(max-width:370px){
  body[data-both-plans="1"] .hero .hero-integrated-top {
    grid-template-columns:minmax(0,1fr) max-content 32px!important;
    column-gap:4px!important;
  }
  body[data-both-plans="1"] .hero .hero-integrated-top > .brand .brand-mark {
    width:39px!important;height:39px!important;flex-basis:39px!important;min-width:39px!important;max-width:39px!important;
  }
  body[data-both-plans="1"] .hero .hero-integrated-top > .brand {gap:5px!important;}
  body[data-both-plans="1"] .hero .hero-integrated-top > .brand > div:nth-child(2)>span {display:none!important;}
  body[data-both-plans="1"] .hero .hero-integrated-top > .menue-plan-switch>a {
    font-size:10px!important;
    padding:6px 7px!important;
    min-height:30px!important;
  }
  body[data-both-plans="1"] .hero .hero-integrated-top > .menue-info-trigger {
    width:32px!important;height:32px!important;min-width:32px!important;
  }
}

/* La franja está situada ENTRE el encabezado y la carta, fuera del header.
   Se usa un elemento propio para que ninguna regla global de bordes la tape. */
body[data-local="moulin"] .menue-moulin-rainbow {
  display:block!important;
  position:relative!important;
  z-index:10!important;
  width:100%!important;
  height:7px!important;
  min-height:7px!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  background:linear-gradient(90deg,#ff256b 0%,#ff6b37 14%,#ffd83b 28%,#55d947 42%,#11cbbd 56%,#28a4ff 70%,#8859ff 84%,#e347d0 100%)!important;
}
/* Emojis solo en los botones del menú; títulos de sección sin iconos. */
body .category-wrap .cat .menue-nav-category-emoji {
  display:inline-block;
  vertical-align:baseline;
  margin-right:.25em;
  font-family:system-ui,"Apple Color Emoji","Segoe UI Emoji",sans-serif;
}
