/* Home cliente — una portada clara, promocional y fiel al sistema Chef Urbano. */

.screen-home {
  --home-max: 880px;
  --home-yellow: var(--cu-yellow, #ffc400);
  --home-ink: var(--menu-ink, #282824);
  --home-muted: var(--menu-muted, #65655e);
  --home-line: var(--menu-line, #e7e5de);
}

.screen-home .home-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: min(100%, var(--home-max));
  margin-inline: auto;
  padding: 14px 16px;
  background: var(--menu-surface, #fffefa);
}

.home-brand-lockup,
.home-brand-line {
  display: flex;
  align-items: center;
  min-width: 0;
}

.home-brand-lockup { gap: 10px; }
.home-brand-line { gap: 9px; flex-wrap: wrap; }

.home-brand-logo {
  display: block;
  width: 48px;
  height: 48px;
  object-fit: contain;
  flex: 0 0 auto;
}

.home-brand-copy { min-width: 0; }

.home-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.screen-home .lab-brand {
  margin: 0;
  font-size: clamp(22px, 6vw, 27px);
  line-height: 1;
}

.home-greeting {
  margin: 0 0 5px;
  color: var(--home-muted);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.screen-home .status-pill {
  flex: 0 0 auto;
  min-height: 26px;
  padding-inline: 9px;
  font-size: 12px;
}

.home-header-button {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 46px;
  height: 46px;
  min-width: 46px;
  padding: 0;
  border: 1px solid var(--home-line);
  border-radius: 14px;
  color: var(--home-ink);
  background: #fff;
  cursor: pointer;
}

.home-header-button .cu-svg { width: 22px; height: 22px; }

.home-header-button--notification:disabled {
  color: #8d897f;
  background: #faf9f5;
  cursor: not-allowed;
  opacity: .72;
}

.home-cart-count {
  position: absolute;
  top: -5px;
  right: -5px;
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding-inline: 5px;
  border: 2px solid var(--menu-surface, #fffefa);
  border-radius: 999px;
  color: #3d2d00;
  background: var(--home-yellow);
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* La búsqueda sigue conectada en JavaScript, pero no compite con el Home. */
.screen-home .home-search-wrap { display: none; }

.screen-home .home-promo-carousel {
  width: min(calc(100% - 32px), var(--home-max));
  max-width: var(--home-max);
  margin: 18px auto 22px;
}

.home-promo-track {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.home-promo-track::-webkit-scrollbar { display: none; }

.home-promo-slide {
  flex: 0 0 100%;
  min-width: 0;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  opacity: .82;
  transform: scale(.992);
  transform-origin: center;
  transition: opacity 220ms ease-out, transform 220ms ease-out;
}

.home-promo-slide.is-active {
  opacity: 1;
  transform: scale(1);
}

.home-promo-card {
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
  border: 1px solid #dfd9cd;
  border-radius: 20px;
  color: var(--home-ink);
  background: #fff;
  box-shadow: 0 12px 28px rgba(68, 50, 21, .09);
  cursor: pointer;
  text-align: left;
}

.home-promo-card--visual { cursor: default; }

.home-promo-media {
  position: relative;
  display: block;
  aspect-ratio: 1672 / 941;
  overflow: hidden;
  background: #fff7d7;
}

.home-promo-media img {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff7d7;
}

.home-promo-card.is-missing .home-promo-media img { display: none; }

.home-promo-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  margin-top: 7px;
}

.home-promo-dots button {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
}

.home-promo-dots button::before {
  content: "";
  display: block;
  width: 7px;
  height: 7px;
  margin: auto;
  border-radius: 999px;
  background: #b7b2a7;
}

.home-promo-dots button[aria-current="true"]::before {
  width: 22px;
  background: #6a5000;
}

/* Un solo bloque promocional: las ofertas comerciales conservan su lógica, no se duplican en Inicio. */
.screen-home .home-offers-section { display: none !important; }

.screen-home .menu-sticky-scope {
  width: min(100%, var(--home-max));
  margin-inline: auto;
}

.screen-home .menu-cat-sticky-head {
  padding: 8px 16px 12px;
  margin-bottom: 14px;
  border-bottom-color: var(--home-line);
}

.screen-home .section-categories-intro {
  padding-bottom: 8px;
}

.screen-home .section-categories-intro .section-title,
.screen-home .home-menu-title {
  margin: 0;
  color: var(--home-ink);
  font-size: 22px;
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: -.025em;
}

.screen-home .menu-catalog-block { padding-top: 0; }

.screen-home .home-menu-title {
  margin-bottom: 14px;
}

/* Si el catálogo tiene una sola sección, el título Burgers evita repetirla. */
.screen-home #productsWrap > .menu-cat-section:only-child > .menu-cat-heading { display: none; }

.screen-home .menu-cat-products { grid-template-columns: minmax(0, 1fr); }

@media (hover: hover) {
  .home-header-button:not(:disabled):hover,
  .home-promo-card:hover { border-color: #bdb6a7; }
}

@media (min-width: 700px) {
  .screen-home .home-header { padding-inline: 0; }
  .screen-home .home-promo-carousel { margin-top: 24px; }
  .screen-home .menu-cat-products { grid-template-columns: minmax(0, 1fr); }
  .screen-home .menu-catalog-block { max-width: 720px; margin-inline: auto; }
}

@media (max-width: 420px) {
  .home-brand-logo { width: 42px; height: 42px; }
  .screen-home .home-header { padding-block: 12px; }
  .screen-home .home-promo-carousel { width: calc(100% - 24px); margin-top: 14px; }
  .home-promo-card { border-radius: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  .home-promo-track { scroll-behavior: auto; }
  .home-promo-slide {
    opacity: 1;
    transform: none;
    transition: none;
  }
}