.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid rgba(220, 229, 234, 0.78);
  backdrop-filter: blur(18px);
}

.detail-nav {
  min-height: 81px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.detail-brand {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #0f3b63;
  font-family: Cinzel, "Libre Bodoni", Georgia, serif;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
}

.detail-brand-mark {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  flex: 0 0 44px;
  overflow: hidden;
  border: 2px solid #c8a35d;
  border-radius: 50%;
}

.detail-brand-mark img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.detail-brand-pipe {
  width: 1.5px;
  height: 44px;
  flex: 0 0 1.5px;
  background: #c5a880;
}

.detail-brand-text {
  position: relative;
  width: 190px;
  display: inline-flex;
  align-items: center;
  flex-direction: column;
  padding-bottom: 12px;
  white-space: nowrap;
}

.detail-brand-text::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 2px;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, #c5a880 22%, #c5a880 78%, transparent);
}

.detail-brand-main {
  color: #0b2240;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 6px;
  text-indent: 6px;
}

.detail-brand-accent {
  margin-top: 4px;
  color: #c5a880;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 7px;
  text-indent: 7px;
}

.detail-nav-links,
.detail-nav-actions {
  display: flex;
  align-items: center;
}

.detail-nav-links {
  min-height: 0;
  justify-content: flex-start;
  gap: 26px;
  color: #29485d;
  font-size: 13px;
  font-weight: 700;
}

.detail-nav-links a:hover { color: #1b8a6b; }
.detail-nav-actions { gap: 12px; }
.detail-language { color: #29485d; font-size: 13px; font-weight: 700; }

.detail-consult-btn {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 22px;
  border-radius: 8px;
  background: #1b8a6b;
  color: #fff !important;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}

.detail-consult-btn:hover { background: #12654f; }

.wa-float {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 999;
  width: 60px;
  height: 60px;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 50%;
  background: #25d366;
  box-shadow: 0 6px 22px rgba(37, 211, 102, 0.48);
  animation: wa-pulse 2.2s ease-in-out infinite;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease;
}

.wa-float:hover {
  transform: scale(1.12);
  box-shadow: 0 10px 32px rgba(37, 211, 102, 0.6);
}

.wa-float svg { width: 32px; height: 32px; fill: #fff; }

@keyframes wa-pulse {
  0%, 100% { box-shadow: 0 6px 22px rgba(37, 211, 102, 0.48); }
  50% { box-shadow: 0 6px 22px rgba(37, 211, 102, 0.48), 0 0 0 18px rgba(37, 211, 102, 0); }
}

@media (max-width: 900px) {
  .detail-nav-links { display: none; }
}

@media (max-width: 680px) {
  .detail-nav { min-height: 72px; }
  .detail-brand-pipe,
  .detail-brand-text,
  .detail-language { display: none; }
  .detail-brand-mark { width: 42px; height: 42px; flex-basis: 42px; }
  .detail-consult-btn { min-height: 44px; padding: 0 14px; font-size: 12px; }
  .wa-float { right: 20px; bottom: 20px; width: 52px; height: 52px; }
  .wa-float svg { width: 28px; height: 28px; }
}


/* Premium navigation and concierge treatment-page finish */
.topbar {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.97), rgba(250, 248, 243, 0.94) 52%, rgba(255, 255, 255, 0.97));
  border-bottom-color: rgba(197, 168, 128, 0.42);
  box-shadow: 0 10px 35px rgba(11, 34, 64, 0.07);
}

.topbar::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 4%, rgba(197, 168, 128, 0.2) 25%, rgba(197, 168, 128, 0.75) 50%, rgba(197, 168, 128, 0.2) 75%, transparent 96%);
  pointer-events: none;
}

.detail-brand-mark {
  border-color: #c8a35d;
  background: radial-gradient(circle, #fff 56%, #f4ead8 100%);
  box-shadow: 0 0 0 3px #fff, 0 0 0 4px rgba(197, 168, 128, 0.42), 0 8px 22px rgba(11, 34, 64, 0.12);
}

.detail-brand-text::after {
  height: 7px;
  bottom: 0;
  background:
    linear-gradient(90deg, transparent, #c5a880 25%, transparent 25.5%, transparent 74.5%, #c5a880 75%, transparent),
    linear-gradient(135deg, transparent 42%, #c5a880 43% 57%, transparent 58%) center / 9px 9px no-repeat;
}

.detail-nav-links a {
  position: relative;
  padding: 31px 0 29px;
  transition: color 0.25s ease;
}

.detail-nav-links a::after {
  content: "";
  position: absolute;
  right: 50%;
  bottom: 21px;
  left: 50%;
  height: 1px;
  background: linear-gradient(90deg, #c5a880, #1b8a6b);
  transition: right 0.28s ease, left 0.28s ease;
}

.detail-nav-links a:hover::after { right: 0; left: 0; }

.detail-language {
  padding-right: 13px;
  border-right: 1px solid rgba(197, 168, 128, 0.5);
  letter-spacing: 0.12em;
}

.detail-consult-btn {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(220, 196, 147, 0.74);
  border-radius: 7px;
  background: linear-gradient(135deg, #0f5e4b, #1b8a6b 58%, #12654f);
  box-shadow: 0 10px 25px rgba(18, 101, 79, 0.2), inset 0 1px rgba(255, 255, 255, 0.2);
  letter-spacing: 0.025em;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.detail-consult-btn::before {
  content: "";
  position: absolute;
  top: -70%;
  left: -35%;
  width: 26px;
  height: 240%;
  background: rgba(255, 255, 255, 0.2);
  transform: rotate(24deg);
  transition: left 0.55s ease;
}

.detail-consult-btn:hover {
  background: linear-gradient(135deg, #0b493b, #16795e);
  box-shadow: 0 13px 30px rgba(18, 101, 79, 0.3);
  transform: translateY(-2px);
}

.detail-consult-btn:hover::before { left: 120%; }

.wa-float {
  border: 1px solid rgba(234, 216, 184, 0.95);
  background: linear-gradient(145deg, #2bdd70, #19aa50);
  box-shadow: 0 0 0 4px #fff, 0 0 0 5px rgba(197, 168, 128, 0.72), 0 12px 32px rgba(17, 112, 58, 0.34);
}

.wa-float::before {
  content: "WhatsApp Concierge";
  position: absolute;
  right: 74px;
  width: max-content;
  padding: 10px 14px;
  border: 1px solid rgba(197, 168, 128, 0.52);
  border-radius: 5px;
  background: rgba(11, 34, 64, 0.96);
  color: #f2dfb8;
  font-family: Cinzel, "Libre Bodoni", Georgia, serif;
  font-size: 11px;
  letter-spacing: 0.08em;
  opacity: 0;
  pointer-events: none;
  transform: translateX(8px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.wa-float:hover {
  box-shadow: 0 0 0 4px #fff, 0 0 0 5px rgba(197, 168, 128, 0.9), 0 15px 38px rgba(17, 112, 58, 0.46);
}

.wa-float:hover::before { opacity: 1; transform: translateX(0); }

@keyframes wa-pulse {
  0%, 100% { box-shadow: 0 0 0 4px #fff, 0 0 0 5px rgba(197, 168, 128, 0.72), 0 12px 32px rgba(17, 112, 58, 0.34); }
  50% { box-shadow: 0 0 0 4px #fff, 0 0 0 5px rgba(197, 168, 128, 0.84), 0 12px 32px rgba(17, 112, 58, 0.34), 0 0 0 18px rgba(37, 211, 102, 0); }
}

@media (max-width: 680px) {
  .topbar { box-shadow: 0 7px 24px rgba(11, 34, 64, 0.08); }
  .detail-brand-mark { box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(197, 168, 128, 0.42); }
  .detail-consult-btn { letter-spacing: 0; }
  .wa-float::before { display: none; }
}