/* CHAPA 011 — direção visual premium v2 */
:root {
  --premium-bg: #fff8ec;
  --premium-paper: #fffdf7;
  --premium-cream: #f6e8d2;
  --premium-cream-deep: #ead2b4;
  --premium-ink: #16071e;
  --premium-purple: #24102f;
  --premium-plum: #48205a;
  --premium-grape: #32133f;
  --premium-lilac: #b981c7;
  --premium-green: #a7bd3b;
  --premium-muted: #706273;
  --premium-line: rgba(22, 7, 30, .12);
  --premium-line-strong: rgba(22, 7, 30, .20);
  --premium-white: rgba(255, 253, 247, .94);
  --premium-shadow-soft: 0 18px 44px rgba(22, 7, 30, .10);
  --premium-shadow-deep: 0 34px 84px rgba(22, 7, 30, .18);
  --premium-radius: 18px;
}

html { scroll-behavior: smooth; }

body {
  color: var(--premium-ink);
  background:
    radial-gradient(circle at 80% 3%, rgba(185, 129, 199, .16), transparent 30rem),
    radial-gradient(circle at 4% 38%, rgba(167, 189, 59, .10), transparent 22rem),
    radial-gradient(circle at 78% 88%, rgba(72, 32, 90, .10), transparent 25rem),
    linear-gradient(180deg, #fffaf0 0%, var(--premium-cream) 58%, #edd8bb 100%);
}

body::before { opacity: .014; }

::selection {
  background: rgba(72, 32, 90, .20);
  color: var(--premium-ink);
}

.skip-link:focus,
a:focus-visible,
button:focus-visible {
  outline: 3px solid rgba(167, 189, 59, .70);
  outline-offset: 4px;
}

[data-logo-photo] {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  image-rendering: auto;
}

.brand-logo[data-logo-photo] {
  width: 56px !important;
  height: 56px !important;
  max-width: none !important;
  margin: 0 !important;
  object-fit: contain !important;
  border-radius: 0 !important;
  filter: drop-shadow(0 8px 14px rgba(22, 7, 30, .08));
}

.footer-logo .brand-logo[data-logo-photo] {
  width: 64px !important;
  height: 64px !important;
}

.navbar {
  height: 78px;
  backdrop-filter: blur(20px);
}

.navbar.scrolled,
.navbar.menu-open {
  background: rgba(255, 250, 242, .94);
  border-bottom-color: rgba(22, 7, 30, .10);
  box-shadow: 0 12px 34px rgba(22, 7, 30, .065);
}

.brand {
  gap: 12px;
}

.brand-name strong {
  color: var(--premium-ink);
  letter-spacing: .055em;
}

.brand-name small {
  color: rgba(22, 7, 30, .58);
  letter-spacing: .11em;
}

.nav-links a {
  color: rgba(22, 7, 30, .66);
  font-weight: 800;
  letter-spacing: .08em;
}

.nav-links a:hover {
  color: var(--premium-plum);
}

.cart-toggle,
.menu-toggle,
.btn-secondary {
  background: rgba(255, 253, 247, .58) !important;
  border-color: rgba(22, 7, 30, .12) !important;
  box-shadow: 0 10px 24px rgba(22, 7, 30, .045);
}

.cart-badge {
  background: var(--premium-green) !important;
  color: var(--premium-ink) !important;
}

.hero {
  min-height: 790px;
  padding-top: 126px;
  overflow: clip;
  background: transparent;
}

.hero-grid {
  background:
    linear-gradient(116deg, transparent 0 61%, rgba(22, 7, 30, .045) 61% 61.12%, transparent 61.12%),
    linear-gradient(116deg, transparent 0 69%, rgba(22, 7, 30, .03) 69% 69.10%, transparent 69.10%),
    radial-gradient(circle at 70% 36%, rgba(72, 32, 90, .12), transparent 24rem),
    radial-gradient(circle at 52% 78%, rgba(167, 189, 59, .075), transparent 18rem);
}

.hero-shell {
  align-items: center;
  gap: clamp(42px, 7vw, 104px);
}

.hero-content {
  position: relative;
}

.hero-content::before {
  content: "011";
  position: absolute;
  left: -4px;
  top: -72px;
  z-index: -1;
  color: rgba(22, 7, 30, .035);
  font-family: var(--font-display);
  font-size: clamp(8rem, 19vw, 18rem);
  font-weight: 800;
  letter-spacing: -.08em;
  line-height: 1;
}

.eyebrow,
.section-kicker {
  color: var(--premium-plum);
  font-weight: 900;
  letter-spacing: .18em;
}

.eyebrow span {
  background: var(--premium-green) !important;
  box-shadow: 0 0 0 7px rgba(167, 189, 59, .16);
}

.hero h1 {
  max-width: 680px;
  color: var(--premium-ink);
  font-size: clamp(4.25rem, 7vw, 7rem);
  line-height: .84;
  letter-spacing: -.058em;
}

.hero h1 em {
  position: relative;
  color: var(--premium-plum);
  font-style: normal;
  white-space: nowrap;
}

.hero h1 em::after {
  content: "";
  position: absolute;
  left: .01em;
  right: .01em;
  bottom: .05em;
  height: .13em;
  z-index: -1;
  background: linear-gradient(90deg, rgba(167, 189, 59, .10), rgba(167, 189, 59, .34));
  border-radius: 999px;
}

.hero-copy {
  max-width: 530px;
  color: rgba(22, 7, 30, .73);
  font-size: clamp(1.1rem, 1.2vw, 1.24rem);
}

.hero-buttons {
  gap: 12px;
}

.btn,
.category-btn,
.cart-toggle,
.menu-toggle,
.close-cart,
.qty-btn,
.btn-add {
  border-radius: 12px !important;
}

.btn-primary,
.category-btn.active,
.category-btn:hover,
.btn-add {
  background: linear-gradient(135deg, var(--premium-ink), var(--premium-plum)) !important;
  color: #fff4e4 !important;
  border-color: transparent !important;
  box-shadow: 0 18px 36px rgba(22, 7, 30, .14);
}

.btn-primary:hover,
.btn-add:hover {
  transform: translateY(-2px);
  box-shadow: 0 24px 48px rgba(22, 7, 30, .18);
}

.btn-secondary:hover,
.cart-toggle:hover,
.menu-toggle:hover {
  border-color: rgba(72, 32, 90, .22) !important;
  background: rgba(255, 253, 247, .82) !important;
}

.hero-highlights {
  border-top-color: rgba(22, 7, 30, .12);
  gap: clamp(16px, 2.4vw, 34px);
}

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

.hero-highlights dt {
  color: var(--premium-ink);
  letter-spacing: .10em;
}

.hero-highlights dd {
  color: rgba(22, 7, 30, .56);
}

.hero-visual {
  perspective: 1200px;
}

.stage-ring {
  position: relative;
  width: min(100%, 472px) !important;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  padding: 0 !important;
  overflow: visible;
  border: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  isolation: isolate;
}

.stage-ring::before {
  content: "";
  position: absolute;
  inset: 2%;
  z-index: -3;
  border-radius: 999px;
  background:
    radial-gradient(circle, rgba(255, 250, 240, .92), rgba(255, 250, 240, .40) 45%, transparent 70%),
    radial-gradient(circle at 42% 34%, rgba(185, 129, 199, .28), transparent 48%);
  filter: blur(10px);
}

.stage-ring::after {
  content: "";
  position: absolute;
  inset: 17%;
  z-index: -2;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(22, 7, 30, .20), transparent 68%);
  filter: blur(34px);
  opacity: .72;
  transform: translateY(25px);
}

.stage-ring img[data-logo-photo] {
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  margin: 0 !important;
  object-fit: contain !important;
  border-radius: 0 !important;
  filter: drop-shadow(0 26px 34px rgba(22, 7, 30, .14));
}

.brand-stage {
  position: relative;
  gap: 16px;
  align-items: center;
}

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

.hero-markline {
  display: inline-flex;
  justify-content: center;
  width: 100%;
  margin-top: 8px;
  color: rgba(22, 7, 30, .64);
  font-family: var(--font-display);
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .25em;
  text-transform: uppercase;
}

.trust-strip,
.menu-categories,
.menu-card,
.benefit-card,
.cta-section {
  border-color: var(--premium-line) !important;
}

.trust-strip {
  margin-top: -18px;
  background: rgba(255, 253, 247, .48);
  box-shadow: 0 18px 44px rgba(22, 7, 30, .06);
  backdrop-filter: blur(16px);
}

.trust-strip div span {
  color: var(--premium-plum);
}

.trust-strip p {
  color: rgba(22, 7, 30, .72);
}

.section-shell {
  position: relative;
}

.menu {
  padding-top: 104px;
}

.section-heading-row {
  align-items: end;
}

.section-title h2,
.build-copy h2,
.cta-section h2,
.card-title,
.card-price {
  color: var(--premium-ink);
}

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

.text-acai {
  color: var(--premium-plum) !important;
}

.menu-link {
  color: var(--premium-plum);
  border-bottom-color: rgba(72, 32, 90, .26);
  font-weight: 900;
}

.menu-categories {
  position: sticky;
  top: 88px;
  z-index: 8;
  background: rgba(255, 253, 247, .72);
  box-shadow: 0 14px 34px rgba(22, 7, 30, .055);
  backdrop-filter: blur(16px);
}

.category-btn {
  font-weight: 900;
  letter-spacing: .09em;
}

.menu-grid {
  gap: 22px;
}

.menu-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--premium-radius) !important;
  background: linear-gradient(180deg, rgba(255, 253, 247, .98), rgba(255, 249, 239, .92)) !important;
  box-shadow: var(--premium-shadow-soft) !important;
  transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease;
}

.menu-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, var(--premium-green), var(--premium-lilac), var(--premium-plum));
  opacity: .72;
}

.menu-card:hover {
  transform: translateY(-5px) !important;
  border-color: rgba(72, 32, 90, .26) !important;
  box-shadow: 0 28px 58px rgba(22, 7, 30, .15) !important;
}

.product-photo {
  position: relative;
  min-height: 184px !important;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 26%, rgba(255, 244, 228, .17), transparent 7rem),
    radial-gradient(circle at 50% 18%, rgba(185, 129, 199, .32), transparent 8.7rem),
    linear-gradient(145deg, #24102f 0%, #13061a 100%) !important;
}

.product-photo::before {
  inset: 14px !important;
  border-color: rgba(255, 244, 228, .12) !important;
  border-radius: 14px !important;
  opacity: .64;
}

.product-photo::after {
  opacity: .24 !important;
}

.photo-cup {
  width: 116px !important;
  height: 94px !important;
  bottom: 26px !important;
  filter: drop-shadow(0 18px 20px rgba(0, 0, 0, .32));
}

.photo-layer { height: 6px !important; }
.photo-topping { opacity: .72 !important; transform: scale(.78); }
.photo-caption {
  bottom: 13px !important;
  font-size: .60rem !important;
  letter-spacing: .16em !important;
}
.photo-caption small { display: none; }

.card-content {
  padding: 21px !important;
}

.card-meta {
  color: var(--premium-plum) !important;
  letter-spacing: .14em !important;
  font-weight: 900 !important;
}

.card-title {
  font-size: 1.46rem !important;
  line-height: 1.02 !important;
}

.card-desc {
  min-height: 54px;
  line-height: 1.52;
}

.card-footer {
  border-top-color: var(--premium-line) !important;
  align-items: end;
}

.card-price-wrap small {
  color: rgba(22, 7, 30, .52) !important;
}

.card-price {
  font-size: 1.5rem !important;
}

.btn-add {
  width: 46px !important;
  height: 46px !important;
  font-size: 1.45rem !important;
}

.build-card {
  position: relative;
  overflow: hidden;
  border-radius: 22px !important;
  background:
    radial-gradient(circle at 90% 12%, rgba(185, 129, 199, .18), transparent 20rem),
    radial-gradient(circle at 8% 88%, rgba(167, 189, 59, .11), transparent 18rem),
    linear-gradient(135deg, var(--premium-purple), #15071d) !important;
  box-shadow: var(--premium-shadow-deep);
}

.build-card::after {
  content: "011";
  position: absolute;
  right: -10px;
  bottom: -56px;
  color: rgba(255, 244, 228, .055);
  font-family: var(--font-display);
  font-size: clamp(8rem, 18vw, 18rem);
  font-weight: 900;
  line-height: 1;
}

.build-steps li {
  background: rgba(255, 255, 255, .08) !important;
  border-color: rgba(255, 244, 228, .13) !important;
  backdrop-filter: blur(12px);
}

.benefits {
  padding-top: 96px;
}

.benefit-card {
  background: rgba(255, 253, 247, .62);
  box-shadow: 0 10px 28px rgba(22, 7, 30, .045);
  border-radius: 18px !important;
}

.benefit-card.featured {
  background: rgba(255, 253, 247, .94);
  box-shadow: var(--premium-shadow-soft);
}

.benefit-index,
.benefit-icon {
  color: var(--premium-plum) !important;
}

.cta-section {
  border-radius: 22px !important;
  background:
    radial-gradient(circle at 84% 14%, rgba(185, 129, 199, .13), transparent 16rem),
    linear-gradient(135deg, rgba(255, 253, 247, .96), rgba(255, 246, 231, .78));
  box-shadow: var(--premium-shadow-soft);
}

.cart-sidebar {
  background: rgba(255, 253, 247, .985) !important;
  box-shadow: -26px 0 70px rgba(22, 7, 30, .20) !important;
}

.cart-header,
.cart-footer {
  border-color: rgba(22, 7, 30, .10) !important;
}

.cart-item {
  border-radius: 16px !important;
  background: rgba(246, 232, 210, .42) !important;
  border-color: rgba(22, 7, 30, .10) !important;
}

.toast {
  border-radius: 14px !important;
  background: rgba(22, 7, 30, .94) !important;
  color: #fff4e4 !important;
}

footer {
  background:
    radial-gradient(circle at 8% 0%, rgba(185, 129, 199, .10), transparent 19rem),
    #14071b !important;
}

.footer-content {
  border-bottom-color: rgba(255, 244, 228, .10);
}

.footer-bottom { border-top-color: rgba(255, 244, 228, .10); }

@media (max-width: 1040px) {
  .hero { min-height: auto; }
  .stage-ring { width: min(82vw, 410px) !important; }
  .hero h1 { font-size: clamp(3.7rem, 8.4vw, 5.7rem); }
}

@media (max-width: 820px) {
  .navbar { height: 72px; }
  .brand-logo[data-logo-photo] { width: 52px !important; height: 52px !important; }
  .hero { padding-top: 108px; }
  .hero-shell { gap: 34px; }
  .hero-content::before { top: -42px; }
  .stage-ring { width: min(84vw, 390px) !important; }
  .menu-categories { position: relative; top: auto; }
}

@media (max-width: 580px) {
  .hero { padding-top: 96px; }
  .hero h1 {
    font-size: clamp(3.15rem, 13.8vw, 4.65rem);
    letter-spacing: -.052em;
  }
  .hero-copy { font-size: 1rem; }
  .hero-buttons { align-items: stretch; }
  .hero-markline { font-size: .64rem; letter-spacing: .16em; }
  .stage-ring { width: min(88vw, 340px) !important; }
  .trust-strip { margin-top: 0; }
  .menu { padding-top: 76px; }
  .menu-grid { gap: 16px; }
  .product-photo { min-height: 158px !important; }
  .photo-cup { width: 104px !important; height: 84px !important; }
  .card-desc { min-height: auto; }
  .card-content { padding: 18px !important; }
  .build-card,
  .cta-section { border-radius: 18px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .menu-card,
  .btn-primary,
  .btn-add {
    transition: none !important;
  }
}