/* CHAPA 011 — revisão limpa e premium */
:root {
  --brand-950: #16081d;
  --brand-900: #21102b;
  --brand-800: #34163f;
  --brand-700: #4b2358;
  --brand-500: #8d5a9d;
  --brand-lilac: #b985c7;
  --brand-cream: #fbf1df;
  --brand-paper: #fff9ef;
  --brand-soft: #f4e7d5;
  --brand-green: #a7bf3b;
  --brand-ink: #211822;
  --brand-muted: #766875;
  --brand-line: rgba(33,16,43,.13);
  --brand-shadow: 0 22px 55px rgba(22,8,29,.13);
}

html { scroll-padding-top: 88px; }

body {
  color: var(--brand-ink);
  background:
    radial-gradient(circle at 78% 10%, rgba(185,133,199,.16), transparent 28rem),
    linear-gradient(180deg, #fffaf1 0%, var(--brand-cream) 58%, #f4e5d0 100%);
}

body::before { opacity: .045; }

.navbar { height: 76px; }

.navbar.scrolled,
.navbar.menu-open {
  background: rgba(255, 249, 239, .94);
  border-bottom-color: var(--brand-line);
  box-shadow: 0 12px 34px rgba(22,8,29,.07);
}

.brand-logo,
.stage-ring img,
.footer-logo .brand-logo {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  border-radius: 0 !important;
}

.brand-logo {
  width: 50px;
  height: 50px;
  object-fit: contain;
}

.brand-name strong {
  color: var(--brand-950);
  letter-spacing: .08em;
}

.brand-name small { color: rgba(33,16,43,.58); }

.nav-links a { color: rgba(33,16,43,.66); }
.nav-links a:hover { color: var(--brand-950); }

.cart-toggle,
.menu-toggle {
  border-color: var(--brand-line);
  background: rgba(255,255,255,.36);
  border-radius: 12px;
}

.cart-toggle:hover {
  background: var(--brand-950);
  color: var(--brand-cream);
}

.hero {
  min-height: 790px;
  padding-top: 126px;
}

.hero-grid {
  background:
    radial-gradient(circle at 70% 42%, rgba(75,35,88,.10), transparent 24rem),
    linear-gradient(115deg, transparent 0 62%, rgba(33,16,43,.045) 62% 62.12%, transparent 62.12%);
}

.eyebrow,
.section-kicker {
  color: var(--brand-700);
  letter-spacing: .16em;
}

.hero h1 {
  color: var(--brand-950);
  letter-spacing: -.045em;
}

.hero h1 em { color: var(--brand-700); }

.hero-copy {
  color: rgba(33,24,34,.72);
  font-size: 1.05rem;
}

.btn { border-radius: 14px; }

.btn-primary {
  background: var(--brand-950);
  color: var(--brand-cream);
  box-shadow: 0 16px 34px rgba(22,8,29,.16);
}

.btn-primary:hover { background: var(--brand-800); }

.btn-secondary {
  color: var(--brand-950);
  background: rgba(255,255,255,.46);
  border-color: var(--brand-line);
}

.hero-highlights { border-top-color: var(--brand-line); }

.hero-highlights div {
  padding: 0;
  border: 0;
  background: transparent;
}

.hero-visual { min-height: 520px; }

.brand-stage { width: min(100%, 520px); }

.brand-stage::before,
.brand-stage::after,
.line-detail,
.stage-tag {
  display: none !important;
}

.stage-ring {
  width: 92%;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}

.stage-ring img {
  width: 100%;
  filter: drop-shadow(0 28px 48px rgba(22,8,29,.22));
}

.trust-strip {
  border-color: var(--brand-line);
  background: rgba(255,255,255,.34);
}

.trust-strip span { color: var(--brand-700); }

.section-title h2,
.build-copy h2,
.cta-section h2 {
  color: var(--brand-950);
}

.text-acai { color: var(--brand-700); }

.section-title p:not(.section-kicker),
.card-desc,
.benefit-card p {
  color: var(--brand-muted);
}

.menu { padding-top: 106px; }

.menu-categories {
  background: rgba(255,255,255,.55);
  border-color: var(--brand-line);
  border-radius: 14px;
  box-shadow: none;
}

.category-btn {
  min-height: 42px;
  border-radius: 10px;
  color: rgba(33,16,43,.68);
}

.category-btn.active,
.category-btn:hover {
  background: var(--brand-950);
  color: var(--brand-cream);
}

.menu-grid { gap: 22px; }

.menu-card {
  border: 1px solid var(--brand-line);
  border-radius: 20px;
  background: rgba(255,253,248,.88);
  box-shadow: 0 14px 34px rgba(22,8,29,.08);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.menu-card:hover {
  transform: translateY(-5px);
  border-color: rgba(75,35,88,.25);
  box-shadow: 0 22px 48px rgba(22,8,29,.13);
}

.card-art { display: none; }

.product-photo {
  position: relative;
  min-height: 218px;
  overflow: hidden;
  isolation: isolate;
  border-bottom: 1px solid var(--brand-line);
  background:
    radial-gradient(circle at 50% 18%, rgba(255,249,239,.70), transparent 9rem),
    linear-gradient(150deg, #2c1238 0%, #18081f 68%, #0e0612 100%);
}

.product-photo::before {
  content: "";
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(255,249,239,.14);
  border-radius: 16px;
  z-index: -1;
}

.product-photo::after {
  content: "";
  position: absolute;
  width: 170px;
  height: 170px;
  right: -42px;
  top: -52px;
  border-radius: 999px;
  background: rgba(185,133,199,.18);
  filter: blur(1px);
  z-index: -1;
}

.photo-cup {
  position: absolute;
  left: 50%;
  bottom: 27px;
  width: 136px;
  height: 112px;
  transform: translateX(-50%);
}

.photo-cup:nth-of-type(2) {
  transform: translateX(-5%) scale(.88);
  opacity: .85;
}

.product-photo-combo .photo-cup:first-of-type { transform: translateX(-82%) scale(.9); }
.product-photo-combo .photo-cup:nth-of-type(2) { transform: translateX(-8%) scale(.9); }

.photo-cup::before {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  top: 18px;
  height: 30px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 28% 42%, rgba(255,255,255,.20), transparent 1.1rem),
    linear-gradient(90deg, #351240, #5a2470 48%, #2a0d34);
  border: 2px solid rgba(255,241,223,.92);
  box-shadow: inset 0 0 0 6px rgba(75,35,88,.45);
}

.photo-cup::after {
  content: "";
  position: absolute;
  left: 20px;
  right: 20px;
  top: 38px;
  height: 66px;
  border-radius: 0 0 36px 36px;
  background: linear-gradient(180deg, rgba(255,241,223,.95), rgba(244,231,213,.78));
  border: 2px solid rgba(255,241,223,.96);
  border-top: 0;
  box-shadow: 0 18px 30px rgba(0,0,0,.18);
}

.photo-layer {
  position: absolute;
  left: 26px;
  right: 26px;
  height: 7px;
  border-radius: 999px;
  z-index: 2;
}

.layer-acai { top: 48px; background: #33103d; }
.layer-cream { top: 60px; background: #efe1c9; opacity: .92; }
.layer-fruit { top: 72px; background: #9c4e72; opacity: .84; }
.layer-bottom { top: 84px; background: #2b0e35; opacity: .88; }

.photo-topping {
  position: absolute;
  z-index: 3;
  display: block;
  opacity: .95;
}

.topping-banana {
  width: 26px;
  height: 10px;
  border-radius: 999px;
  background: #f1d38a;
  transform: rotate(-18deg);
}

.topping-strawberry {
  width: 18px;
  height: 18px;
  border-radius: 60% 60% 70% 70%;
  background: #d65b67;
}

.topping-berry {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #35113e;
  border: 2px solid rgba(255,241,223,.35);
}

.topping-granola {
  width: 24px;
  height: 8px;
  border-radius: 999px;
  background: #c79b55;
}

.t1 { left: 28%; top: 48px; }
.t2 { left: 45%; top: 42px; }
.t3 { right: 31%; top: 54px; }
.t4 { left: 54%; top: 64px; }
.t5 { left: 36%; top: 70px; }
.t6 { right: 22%; top: 84px; }

.product-photo-morango .t2,
.product-photo-morango .t4 { background: #d85e6d; }

.product-photo-ninho .layer-cream,
.product-photo-ninho::after { background: rgba(255,241,223,.28); }

.product-photo-tropical .topping-banana,
.product-photo-tropical .t5 { background: #d7bd4a; }

.product-photo-zero {
  background:
    radial-gradient(circle at 50% 18%, rgba(255,249,239,.72), transparent 9rem),
    linear-gradient(150deg, #203315, #13091a 72%);
}

.product-photo-bebida .photo-cup::after {
  border-radius: 20px 20px 28px 28px;
  background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(185,133,199,.36));
}

.product-photo-adicional .photo-cup { transform: translateX(-50%) scale(.82); }

.photo-caption {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: rgba(255,249,239,.82);
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.photo-caption small {
  color: rgba(255,249,239,.56);
  font-size: .62rem;
  letter-spacing: .02em;
  text-transform: none;
}

.card-content { padding: 22px; }
.card-meta { color: var(--brand-700); }
.card-title {
  color: var(--brand-950);
  font-size: 1.55rem;
}
.card-footer { border-top-color: var(--brand-line); }
.card-price { color: var(--brand-950); }

.btn-add {
  border-radius: 12px;
  background: var(--brand-950);
  color: var(--brand-cream);
  border-color: var(--brand-950);
}

.btn-add:hover {
  transform: translateY(-1px);
  background: var(--brand-700);
}

.build-card {
  border-radius: 22px;
  background:
    radial-gradient(circle at 88% 18%, rgba(185,133,199,.22), transparent 20rem),
    linear-gradient(135deg, var(--brand-950), var(--brand-800));
  box-shadow: var(--brand-shadow);
}

.benefit-card { background: rgba(255,253,248,.58); }
.benefit-card.featured { background: #fffdf8; }
.cta-section { border-color: var(--brand-line); }
footer { background: #130719; }
.cart-sidebar { background: var(--brand-paper); }
.toast { background: var(--brand-950); }

@media (max-width: 820px) {
  .nav-links {
    background: #fff9ef;
    border-color: var(--brand-line);
    border-radius: 16px;
  }

  .hero { padding-top: 108px; }
  .hero-visual { min-height: auto; }
  .stage-ring { width: min(88%, 420px); }
  .product-photo { min-height: 205px; }
}

@media (max-width: 580px) {
  .brand-logo {
    width: 44px;
    height: 44px;
  }

  .hero h1 { font-size: clamp(3.35rem, 15vw, 4.8rem); }
  .menu-categories { border-radius: 14px; }
  .category-btn { flex-basis: 46%; }
  .menu-card { border-radius: 18px; }
  .product-photo { min-height: 196px; }
  .card-content { padding: 20px; }
}