/* ==========================================================================
   crepe.css — visual da Crepe Hall por cima da base (components.css):
   preto e branco, amarelo do logo só nos destaques, fonte reta, sem enfeites.
   ========================================================================== */

/* ---------- Ajustes de cor da base (preto neutro) ---------- */
.header { background: rgba(11, 11, 11, 0.88); }
.catnav { background: rgba(11, 11, 11, 0.92); }
.search__input:focus, .opt-obs:focus { border-color: rgba(248, 196, 13, 0.6); box-shadow: 0 0 0 4px rgba(248, 196, 13, 0.12); }
.badge { background: rgba(11, 11, 11, 0.76); border-color: rgba(255, 255, 255, 0.14); }
.psheet__bar.is-stuck { background: rgba(7, 7, 7, 0.94); }
.psheet__close { background: rgba(11, 11, 11, 0.72); border-color: rgba(255, 255, 255, 0.16); }
.psheet__close:hover { background: rgba(11, 11, 11, 0.92); }
.chip { border-radius: 10px; }
.add-btn { border-radius: 10px; }

/* ---------- Logotipo ---------- */
.brand { font-family: var(--font-body); font-size: 1.125rem; font-weight: 800; letter-spacing: 0.06em; gap: 10px; }
.brand__icon { width: 29px; height: 32px; object-fit: contain; flex: none; }
.brand__name span { color: var(--accent); }

/* ---------- Capa: as fotos dos crepes passando ao fundo ----------
   Troca suave (uma foto some enquanto a outra aparece) + aproximação lenta de câmera.
   Escurecido por cima para o texto ficar legível. Só transform/opacity: leve no celular. */
.hero {
  min-height: clamp(560px, calc(92svh - var(--header-h)), 760px);
  display: flex; align-items: flex-end;
  background: var(--bg-deep);
  border-bottom: 1px solid var(--line);
}
.hero__show { position: absolute; inset: 0; z-index: -2; overflow: hidden; background: var(--bg-deep); }
.hero__slide {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.06);
  transition: opacity 1.2s ease;
}
.hero__slide.is-claro { filter: brightness(0.7); } /* fotos de fundo branco */
.hero__slide.is-on { opacity: 1; }
.hero__slide.is-on, .hero__slide.is-saindo { animation: aproxima 5.5s linear both; }
@keyframes aproxima {
  from { transform: scale(1.06) translate3d(0, 0, 0); }
  to { transform: scale(1.16) translate3d(var(--dx, -2%), var(--dy, -1%), 0); }
}
.hero::before {
  display: block;
  background: linear-gradient(180deg, rgba(7, 7, 7, 0.5) 0%, rgba(7, 7, 7, 0.2) 28%, rgba(7, 7, 7, 0.78) 58%, rgba(7, 7, 7, 0.97) 100%);
}
.hero__content { position: relative; padding-block: 48px 36px; }
.hero__copy { max-width: 620px; }
.hero__logo { display: none; width: 210px; height: auto; margin-bottom: 22px; }
.hero__title { margin-top: 12px; font-size: clamp(2rem, 7.4vw, 3.5rem); font-weight: 800; line-height: 1.06; letter-spacing: -0.03em; text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35); }
.hero__lead { margin-top: 16px; max-width: 52ch; font-size: 1.0625rem; color: #dcdcd9; }
.hero__actions .btn--ghost { height: 52px; background: rgba(11, 11, 11, 0.45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.hero__facts { margin-top: 24px; color: #d6d6d3; }

/* um traço por foto: enche enquanto ela aparece; tocar troca a foto */
.hero__dots { display: flex; gap: 6px; margin-top: 26px; }
.hero__dot { width: 40px; height: 24px; display: flex; align-items: center; }
.hero__dot span { position: relative; display: block; width: 100%; height: 4px; border-radius: 4px; overflow: hidden; background: rgba(255, 255, 255, 0.22); }
.hero__dot span::after { content: ''; position: absolute; inset: 0; background: var(--accent); transform: scaleX(0); transform-origin: left; }
.hero__dot.is-on span::after { animation: enche var(--tempo, 4s) linear forwards; }
@keyframes enche { to { transform: scaleX(1); } }

.hero__copy > * { animation: entra 0.8s var(--ease) both; }
.hero__copy > :nth-child(2) { animation-delay: 0.05s; }
.hero__copy > :nth-child(3) { animation-delay: 0.1s; }
.hero__copy > :nth-child(4) { animation-delay: 0.15s; }
.hero__copy > :nth-child(n + 5) { animation-delay: 0.2s; }
@keyframes entra { from { opacity: 0; transform: translateY(16px); } }

@media (min-width: 1024px) {
  .hero { align-items: center; }
  .hero::before {
    background:
      linear-gradient(90deg, rgba(7, 7, 7, 0.94) 0%, rgba(7, 7, 7, 0.8) 36%, rgba(7, 7, 7, 0.32) 68%, rgba(7, 7, 7, 0.18) 100%),
      linear-gradient(180deg, transparent 75%, rgba(7, 7, 7, 0.9) 100%);
  }
  .hero__content { padding-block: 80px; }
  .hero__logo { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__slide.is-on, .hero__slide.is-saindo { animation: none; }
  .hero__dots { display: none; }
}

/* ---------- Seções do cardápio ---------- */
.menu-section { margin-top: 44px; }
.cat-head { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.cat-head h2 { font-size: clamp(1.6rem, 5vw, 2.25rem); font-weight: 800; letter-spacing: -0.03em; }
.cat-head p { margin-top: 6px; max-width: 56ch; font-size: 0.9375rem; color: var(--muted); }
.cat-head__count { flex: none; padding-bottom: 4px; font-size: 0.8125rem; color: var(--muted); }
/* categoria com foto: faixa com a foto e o título por cima */
.cat-head--foto {
  isolation: isolate; overflow: hidden;
  min-height: 190px; padding: 20px;
  border-radius: var(--radius-lg); border: 1px solid var(--line);
  background: var(--surface);
}
.cat-head__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.cat-head--foto::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.86) 0%, rgba(0, 0, 0, 0.6) 48%, rgba(0, 0, 0, 0.08) 100%),
    linear-gradient(0deg, rgba(0, 0, 0, 0.55), transparent 65%);
}
.cat-head--foto p, .cat-head--foto .cat-head__count { color: #d6d6d3; }
@media (min-width: 768px) { .cat-head--foto { min-height: 250px; padding: 32px; } }
@media (min-width: 1024px) { .menu-section { margin-top: 64px; } }

/* lista de itens (sem foto em cada um): linhas finas, 2 colunas no computador */
.lista {
  display: grid; gap: 1px; overflow: hidden;
  background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-lg);
}
.item {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px; background: var(--surface); cursor: pointer;
  transition: background-color 0.2s;
}
.item__body { min-width: 0; }
.item__title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 1rem; font-weight: 700; letter-spacing: -0.01em; }
.item__desc { margin-top: 4px; font-size: 0.875rem; line-height: 1.5; color: var(--text-2); }
.item__meta { margin-top: 2px; font-size: 0.8125rem; font-weight: 600; color: var(--muted); }
.item__side { flex: none; display: flex; align-items: center; gap: 12px; }
.item__side .price { font-size: 1.0625rem; }
.item .badge {
  position: static; height: 22px; padding: 0 8px; gap: 0;
  background: var(--accent-soft); border: 1px solid rgba(248, 196, 13, 0.3); color: var(--accent);
  font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.06em;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.item .badge::before { display: none; }
.item .badge--out { background: rgba(255, 255, 255, 0.08); border-color: var(--line-strong); color: var(--text-2); }
.item.is-out { opacity: 0.5; }
@media (hover: hover) { .item:hover { background: var(--surface-2); } }
@media (min-width: 900px) {
  .lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .item:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .item { padding: 18px 20px; }
}

/* card grande do Bubble Waffle (monte o seu) */
.feature-rail--um { display: block; overflow: visible; margin-inline: 0; padding-inline: 0; }
.feature-rail--um .feature { aspect-ratio: auto; display: block; }
.feature-rail--um .feature::after { display: none; }
.feature-rail--um .feature__media { position: relative; height: auto; aspect-ratio: 16 / 10; z-index: auto; }
.feature-rail--um .feature__desc { -webkit-line-clamp: unset; }
.feature__cat { color: var(--accent); }
.feature__title { font-weight: 800; letter-spacing: -0.03em; }
.feature__steps { list-style: none; margin-top: 16px; display: grid; gap: 8px; counter-reset: passo; }
.feature__steps li { counter-increment: passo; display: flex; align-items: center; gap: 10px; font-size: 0.9rem; color: var(--text-2); }
.feature__steps li::before {
  content: counter(passo); flex: none; width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center; background: var(--accent-soft); color: var(--accent);
  font-size: 0.75rem; font-weight: 800;
}
.feature__cta { height: 46px; padding: 0 18px; }
.feature-rail--um .feature__foot .price { font-size: 1.5rem; }
@media (min-width: 768px) {
  .feature-rail--um .feature { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); min-height: 400px; }
  .feature-rail--um .feature__media { aspect-ratio: auto; }
  .feature-rail--um .feature__body { padding: 36px 36px; }
}

/* ---------- Janela do produto: "monte o seu" e produto sem foto ---------- */
.opt-tag--req { background: var(--accent-soft); color: var(--accent); }
.opt-group.is-ok .opt-tag--req { background: rgba(34, 197, 94, 0.14); color: #4ade80; }
.opt-group.is-alert .opt-group__head { animation: alerta 0.7s var(--ease); }
@keyframes alerta { 30% { box-shadow: 0 0 0 2px var(--accent); } }
.opt-row.is-disabled { opacity: 0.4; cursor: default; }
.opt-check--radio { border-radius: 50%; }
.psheet__add.is-pending { background: var(--surface-2); color: var(--text-2); }
.psheet__add.is-pending .price__cur { color: inherit; }

.psheet--sem-foto .psheet__bar { margin-bottom: 0; background: var(--bg-deep); pointer-events: auto; }
.psheet--sem-foto .psheet__body { padding-top: 4px; }
@media (min-width: 960px) {
  .psheet.psheet--sem-foto { width: min(560px, calc(100% - 48px)); height: auto; max-height: min(88vh, 900px); }
  .psheet--sem-foto .psheet__panel { display: flex; flex-direction: column; }
  .psheet--sem-foto .psheet__scroll { display: block; }
  .psheet--sem-foto .psheet__body { overflow: visible; padding: 4px 28px 28px; }
  .psheet--sem-foto .psheet__bar { position: sticky; padding: 0 16px 0 28px; }
  .psheet--sem-foto .psheet__foot { padding: 16px 24px; }
}

.line__img--vazio { display: grid; place-items: center; color: var(--muted); border: 1px solid var(--line); }

/* ---------- Unidade (trailer): botão no topo, escolha e confirmação ---------- */
.unidade-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px;
  border-radius: 10px; border: 1px solid var(--line-strong); background: var(--surface);
  color: var(--text); font-size: 0.8125rem; font-weight: 700; margin-left: auto; cursor: pointer;
}
.unidade-chip .icon { color: var(--accent); }
.unidade-chip:hover { border-color: var(--accent); }
.unidade-chip:not([hidden]) ~ .cart-btn { margin-left: 0; }
@media (min-width: 900px) { .header__nav + .unidade-chip { margin-left: 8px; } }

.upick {
  position: fixed; inset: 0; margin: auto; padding: 0; border: 1px solid var(--line-strong);
  width: min(560px, calc(100% - 24px)); max-height: calc(100dvh - 24px);
  border-radius: 20px; background: var(--bg-deep); color: var(--text); overflow: auto;
}
.upick[open] { animation: pop 0.26s var(--ease); }
.upick::backdrop { background: rgba(0, 0, 0, 0.72); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.upick__panel { padding: 22px 20px 20px; }
.upick__head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.upick__head h2 { margin-top: 6px; font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; }
.upick__head p:not(.eyebrow) { margin-top: 6px; font-size: 0.9rem; color: var(--muted); }
.upick__list { display: grid; gap: 12px; margin-top: 18px; }
.upick__card {
  display: grid; gap: 6px; padding: 18px; text-align: left; cursor: pointer;
  border-radius: 16px; background: var(--surface); border: 1px solid var(--line-strong);
  border-left: 4px solid var(--cor, var(--accent)); transition: border-color 0.2s, background-color 0.2s;
}
.upick__card:hover, .upick__card.is-on { background: var(--surface-2); border-color: var(--cor, var(--accent)); }
.upick__tag { display: inline-flex; align-items: center; gap: 4px; font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cor, var(--accent)); }
.upick__nome { font-size: 1.375rem; font-weight: 800; letter-spacing: -0.02em; }
.upick__info { display: flex; align-items: center; gap: 8px; font-size: 0.875rem; color: var(--text-2); }
.upick__info .icon { color: var(--muted); flex: none; }
.upick__cta { margin-top: 6px; display: inline-flex; align-items: center; gap: 6px; font-size: 0.875rem; font-weight: 700; color: var(--accent); }
@media (min-width: 560px) { .upick__list { grid-template-columns: 1fr 1fr; } .upick__panel { padding: 26px 26px 24px; } }

.ounidade {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px; border-radius: 12px; background: var(--surface);
  border: 1px solid var(--line-strong); border-left: 4px solid var(--cor, var(--accent));
}
.ounidade > span { display: flex; align-items: center; gap: 10px; }
.ounidade > span > .icon { color: var(--cor, var(--accent)); }
.ounidade small { display: block; font-size: 0.75rem; color: var(--muted); }
.ounidade b { font-size: 1rem; }
.ounidade__trocar { font-size: 0.875rem; font-weight: 700; color: var(--accent); }
.footer__unidade { margin-bottom: 14px; }

/* ---------- Sobre ---------- */
.sobre { padding-block: 64px; background: var(--bg-deep); border-top: 1px solid var(--line); }
.sobre__head h2 { margin-top: 8px; font-size: clamp(1.75rem, 5vw, 2.375rem); font-weight: 800; letter-spacing: -0.03em; }
.sobre__onde { margin-top: 10px; display: inline-flex; align-items: center; gap: 8px; font-size: 0.9375rem; color: var(--text-2); }
.sobre__onde .icon { color: var(--accent); }
.sobre__grid { margin-top: 28px; display: grid; gap: 14px; }
.sobre__card { padding: 24px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--accent); }
.sobre__card h3 { font-size: 1.125rem; font-weight: 800; }
.sobre__card p { margin-top: 8px; font-size: 0.9375rem; color: var(--text-2); }
@media (min-width: 768px) {
  .sobre { padding-block: 88px; }
  .sobre__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
}