/* ============================
   PALETA DE CORES (tokens)
   ============================ */
:root {
  /* Brand principal */
  --green-900: #142c24;
  --green-800: #1c3e33;
  --green-700: #1f4a39;
  --green-600: #275643; /* base */
  --green-500: #2b6d56;
  --green-300: #398c6f;

  --orange-600: #ea7d17; /* base */
  --orange-700: #d46f10;
  --orange-400: #ffbb66;
  --orange-300: #ffd29a;

  --cream-100: #fffdf8;
  --cream-200: #fff6ea;
  --cream-300: #f5f1e3;
  --cream-400: #e7e3da;

  --wood-500: #a35d0c;

  /* Aliases usados no layout */
  --verde-escuro: var(--green-600);
  --verde-escuro-2: var(--green-500);
  --laranja: var(--orange-600);
  --laranja-2: var(--orange-700);
  --creme: var(--cream-300);
  --creme-2: var(--cream-200);
  --marrom-madeira: var(--wood-500);
  --cinza-claro: var(--cream-400);

  /* Sombras */
  --shadow: 0 10px 28px rgba(0, 0, 0, 0.16);
  --shadow-sm: 0 6px 18px rgba(0, 0, 0, 0.12);
}

/* ===== Base ===== */
html {
  scroll-behavior: smooth;
}
body {
  /* textura suave de fundo geral */
  background: radial-gradient(
      1200px 600px at 10% -10%,
      #fff 0%,
      var(--creme-2) 40%,
      #fff2e0 60%,
      #fff 100%
    ),
    radial-gradient(
      800px 420px at 100% 0%,
      rgba(39, 86, 67, 0.08),
      transparent 60%
    ),
    linear-gradient(180deg, #fff, #fff7ed 60%, #fff 100%);
  color: #332f2b;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial,
    sans-serif;
}

/* ===== HERO ===== */
.hero {
  position: relative;
  padding: 2.8rem 0 0;
  background: linear-gradient(
    180deg,
    var(--verde-escuro) 0%,
    var(--green-700) 60%,
    var(--green-800) 100%
  );
  border-bottom: 3px solid var(--laranja);
  overflow: hidden;
}
.hero-image-wrap {
  width: clamp(180px, 28vw, 280px);
  height: clamp(180px, 28vw, 280px);
  border-radius: 24px;
  position: relative;
  margin-bottom: 1rem;
  background: linear-gradient(135deg, #ffffff 0%, #fff9f1 100%);
  padding: 10px;
  box-shadow: var(--shadow);
}
.hero-logo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
  border: 6px solid var(--laranja);
  box-shadow: inset 0 0 0 2px #ffe3c1;
}
.hero-ring {
  position: absolute;
  inset: -14px;
  border-radius: 30px;
  background: radial-gradient(
      60% 60% at 70% 0%,
      rgba(234, 125, 23, 0.28),
      transparent 60%
    ),
    radial-gradient(
      70% 70% at 0% 100%,
      rgba(255, 210, 154, 0.22),
      transparent 70%
    );
  pointer-events: none;
}
.hero-title {
  margin-top: 0.8rem;
  color: var(--creme);
  font-weight: 900;
  letter-spacing: 0.4px;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.15);
}
.hero-subtitle {
  color: #d7ffee;
  opacity: 0.96;
  margin-bottom: 1.2rem;
}

.hero-wave {
  display: block;
  width: 100%;
  height: 80px;
  fill: #fdf3e2;
}

/* ===== NAVBAR ===== */
.navbar {
  background-color: var(--verde-escuro) !important;
}
.navbar-brand {
  color: var(--laranja) !important;
}
.navbar-nav .nav-link {
  color: var(--creme) !important;
}
.navbar-nav .nav-link.active,
.navbar-nav .nav-link:hover {
  color: var(--laranja) !important;
}

/* ===== SUPERFÍCIE (meio com degradê sutil) ===== */
/* Substitua sua regra .surface por esta */
.surface {
  background: linear-gradient(
    180deg,
    /* creme bem claro */ #fdf3e2 30%,
    /* creme médio */ /* creme mais quente */ #e8d9b9 100%
      /* creme mais fechado no final */
  );
}

/* ===== FILTROS ===== */
.filters {
  background: #ffffffcc;
  backdrop-filter: blur(6px);
  border-top: 1px solid #ffffff;
  border-bottom: 1px solid var(--cinza-claro);
  border-radius: 40px;
  padding: 30px 30px 10px;
}
.input-search .input-group-text {
  background: #fff;
  border: 1px solid var(--cinza-claro);
}
.input-search .form-control {
  border: 1px solid var(--cinza-claro);
}
.input-search .btn {
  border: 1px solid var(--cinza-claro);
}

/* Chips apenas ícones */
.btn-chip.icon-only {
  --_bg: #ffffff;
  --_bd: var(--cinza-claro);
  --_fg: #28463a;
  background: var(--_bg);
  color: var(--_fg);
  border: 1px solid var(--_bd);
  border-radius: 14px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  font-size: 1.1rem;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease,
    color 0.15s ease;
}
.btn-check:checked + .btn-chip.icon-only,
.btn-chip.icon-only:hover {
  --_bg: linear-gradient(180deg, var(--orange-300) 0%, var(--orange-400) 100%);
  --_bd: var(--orange-400);
  --_fg: #1f2a24;
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(234, 125, 23, 0.25);
}

/* ===== TÍTULOS ===== */
.section-title {
  font-weight: 900;
  color: var(--verde-escuro);
  margin-bottom: 0.9rem;
  position: relative;
}
.title-underline {
  display: block;
  width: 120px;
  height: 6px;
  margin: 0.6rem auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--laranja), var(--orange-400));
  box-shadow: 0 6px 16px rgba(234, 125, 23, 0.35);
}

/* ===== CARDS ===== */
.card-menu {
  width: 100%;
  background: #fff;
  border: 1px solid var(--cinza-claro);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.18s ease, box-shadow 0.18s ease,
    border-color 0.18s ease;
}
.card-menu:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18);
  border-color: #f0cba8;
}
.image-card {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 14px 0 0 14px;
  border: 6px solid var(--creme);
}
@media (max-width: 992px) {
  .image-card {
    border-radius: 14px 14px 0 0;
  }
}
.card-title {
  color: var(--verde-escuro);
  font-weight: 800;
}
.card-text {
  color: var(--marrom-madeira);
  margin-bottom: 0.25rem;
}

/* Chip de preço */
.price-chip {
  background: linear-gradient(
    180deg,
    var(--orange-300) 0%,
    var(--orange-400) 100%
  );
  color: #1f2a24;
  font-weight: 800;
  border-radius: 999px;
  padding: 0.2rem 0.6rem;
  font-size: 0.95rem;
  border: 2px solid var(--orange-400);
}

/* ===== BOTÕES BRAND ===== */
.btn-primary {
  --bs-btn-bg: linear-gradient(
    180deg,
    var(--laranja) 0%,
    var(--orange-700) 100%
  );
  --bs-btn-border-color: var(--laranja);
  --bs-btn-hover-bg: linear-gradient(180deg, #ff9b3a 0%, var(--laranja) 100%);
  --bs-btn-hover-border-color: #ff9b3a;
  --bs-btn-active-bg: var(--laranja-2);
  --bs-btn-active-border-color: var(--laranja-2);
  --bs-btn-color: #112018;
  --bs-btn-hover-color: #0e1813;
  border: 0;
  box-shadow: 0 10px 18px rgba(234, 125, 23, 0.18);
}
.btn-secondary {
  --bs-btn-bg: #ffffff;
  --bs-btn-color: var(--verde-escuro);
  --bs-btn-border-color: var(--cinza-claro);
  --bs-btn-hover-bg: #fff7ea;
}

/* ===== MODAIS (brancos, mas premium) ===== */
.modal-content.modal-elevated {
  background: var(--cream-100);
  border: 2px solid #f0e4d4;
  border-radius: 16px;
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.22);
}
.modal-header {
  color: var(--verde-escuro);
  border-bottom: 0;
  position: relative;
  padding-bottom: 0.75rem;
}
.modal-header::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 0;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--laranja), var(--orange-400));
}
.modal-footer.modal-footer-soft {
  background: #faf7f1;
  border-top: 1px solid #efe6d9;
}

/* Lista de opções com “check” */
.modal-list {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0.75rem;
}
.modal-list li {
  position: relative;
  padding: 0.2rem 0 0.2rem 1.6rem;
  color: #4a3f35;
}
.modal-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35rem;
  width: 1rem;
  height: 1rem;
  background: var(--verde-escuro);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='white' d='M6.173 12.727L1.4 7.954l1.886-1.886 2.887 2.887 6.54-6.54 1.886 1.886z'/></svg>")
    center/contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='white' d='M6.173 12.727L1.4 7.954l1.886-1.886 2.887 2.887 6.54-6.54 1.886 1.886z'/></svg>")
    center/contain no-repeat;
}
.pill-price {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: linear-gradient(
    180deg,
    var(--orange-300) 0%,
    var(--orange-400) 100%
  );
  border: 1px solid var(--orange-400);
  font-weight: 800;
  color: #1f2a24;
}
.modal-note {
  font-size: 0.95rem;
  color: #6a5c4f;
  background: #fff;
  border: 1px dashed #ead8bf;
  border-radius: 10px;
  padding: 0.4rem 0.6rem;
  display: inline-block;
}

/* ===== FOOTER ===== */
.footer {
  background: radial-gradient(
      600px 220px at 10% -30%,
      rgba(234, 125, 23, 0.22),
      transparent 60%
    ),
    linear-gradient(180deg, #163a2d 0%, #193a2f 50%, #142c24 100%);
  color: var(--creme);
  padding: 1.8rem 0 1rem;
  border-top: 3px solid var(--laranja);
}
.footer-top {
  display: grid;
  grid-template-columns: 1fr 1.1fr 1fr;
  gap: 1.2rem;
  align-items: start;
}
.footer-heading {
  color: var(--orange-300);
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: 0.6px;
  margin-bottom: 0.6rem;
}
.footer-left .social {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #ffffff10;
  color: #fff;
  border: 1px solid #ffffff20;
  transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.footer-left .social:hover {
  transform: translateY(-2px);
  background: #ffffff22;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.25);
}
.footer-mid address {
  line-height: 1.35;
}

.qr-card {
  margin-left: auto;
  background: #ffffff10;
  border: 1px solid #ffffff25;
  border-radius: 14px;
  padding: 0.75rem 0.9rem;
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25);
  position: relative;
  overflow: hidden;
}
.qr-card::before {
  content: "";
  position: absolute;
  inset: -40%;
  background: conic-gradient(
    from 0deg,
    transparent,
    rgba(255, 255, 255, 0.12),
    transparent 30%,
    transparent 70%,
    rgba(234, 125, 23, 0.25),
    transparent 100%
  );
}
#qrcode {
  width: 120px;
  height: 120px;
  display: grid;
  place-items: center;
  background: #fff;
  border-radius: 10px;
  padding: 8px;
  box-shadow: inset 0 0 0 3px var(--orange-400);
}
.qr-caption {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 700;
  color: #ffe4c0;
  text-wrap: pretty;
  max-width: 220px;
}

/* Separador + direitos */
.footer-sep {
  border-color: #ffffff25 !important;
  margin: 1rem auto 0.6rem;
}
copyright,
.copyright {
  color: #eaeaea;
}

/* ===== Back to top ===== */
.back-to-top {
  position: fixed;
  right: 16px;
  bottom: 16px;
  border-radius: 999px;
  box-shadow: var(--shadow);
  display: none;
}

/* ===== Responsividade ===== */
@media (max-width: 992px) {
  .footer-top {
    grid-template-columns: 1fr;
  }
  .qr-card {
    justify-self: end;
  }
}
@media (max-width: 576px) {
  #qrcode {
    width: 110px;
    height: 110px;
  }
  .qr-caption {
    max-width: 180px;
    font-size: 0.95rem;
  }
}
/* === Botão "Ver mais detalhes" (abre modal) === */
.btn[data-bs-toggle="modal"] {
  --btn-grad-start: var(--laranja); /* #ea7d17 */
  --btn-grad-end: var(--orange-700); /* #d46f10 */
  --btn-text: #112018;

  background: linear-gradient(
    180deg,
    var(--btn-grad-start) 0%,
    var(--btn-grad-end) 100%
  );
  color: var(--btn-text);
  border: 0;
  border-radius: 999px;
  padding: 0.55rem 1rem;
  font-weight: 800;
  letter-spacing: 0.2px;
  box-shadow: 0 10px 18px rgba(234, 125, 23, 0.18);
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease,
    background 0.15s ease;
}

.btn[data-bs-toggle="modal"]:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 26px rgba(234, 125, 23, 0.26);
  filter: saturate(1.02);
  background: linear-gradient(180deg, #ff9b3a 0%, var(--laranja) 100%);
}

.btn[data-bs-toggle="modal"]:active {
  transform: translateY(0);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15) inset,
    0 8px 16px rgba(234, 125, 23, 0.18);
}

.btn[data-bs-toggle="modal"]:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px #ffffff, 0 0 0 6px var(--verde-escuro, #275643);
}

/* Versão “suave” sobre fundos claros (opcional): dentro dos cards */
.card-menu .btn[data-bs-toggle="modal"] {
  background: linear-gradient(
    180deg,
    var(--orange-300) 0%,
    var(--orange-400) 100%
  );
  border: 2px solid var(--orange-400);
  color: #1f2a24;
}
.card-menu .btn[data-bs-toggle="modal"]:hover {
  background: linear-gradient(
    180deg,
    var(--laranja) 0%,
    var(--orange-700) 100%
  );
  border-color: var(--laranja);
  color: #112018;
}