/* Lara International Spa — call-to-redeem conversion layer */
:root {
  --lo-black: #0a0908;
  --lo-charcoal: #1c1a18;
  --lo-gold: #c2a578;
  --lo-gold-soft: #e9e1d3;
  --lo-ivory: #fdfbf7;
  --lo-cream: #f3ebe1;
  --lo-burgundy: #5a2a30;
  --lo-muted: #827f79;
  --lo-serif: "Playfair Display", Georgia, serif;
  --lo-sans: "Outfit", system-ui, -apple-system, sans-serif;
}

html.lo-lock, html.lo-lock body { overflow: hidden; }

.lo-section, .lo-modal, .lo-fab-offer, .lo-fab-call { font-family: var(--lo-sans); box-sizing: border-box; }
.lo-section *, .lo-modal *, .lo-fab-offer *, .lo-fab-call * { box-sizing: border-box; }

/* ---------- buttons ---------- */
.lo-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  width: 100%; min-height: 52px; padding: .8rem 1.2rem; border: 0; cursor: pointer;
  font: 600 12px/1.2 var(--lo-sans); letter-spacing: .14em; text-transform: uppercase;
  text-decoration: none; transition: transform .15s ease, background .2s ease, box-shadow .2s ease;
}
.lo-btn:active { transform: scale(.98); }
.lo-btn-call { background: var(--lo-gold); color: var(--lo-black); }
.lo-btn-call:hover { background: #d4b98c; }
.lo-btn-gold {
  background: linear-gradient(135deg, #d9bf8f, var(--lo-gold) 55%, #a8895b);
  color: var(--lo-black); box-shadow: 0 10px 30px -10px rgba(194,165,120,.7);
}
.lo-pulse { animation: lo-pulse 1.8s infinite; }
@keyframes lo-pulse {
  0% { box-shadow: 0 0 0 0 rgba(194,165,120,.65); }
  70% { box-shadow: 0 0 0 14px rgba(194,165,120,0); }
  100% { box-shadow: 0 0 0 0 rgba(194,165,120,0); }
}

/* ---------- section ---------- */
.lo-section {
  background: radial-gradient(ellipse at top, #2a2420 0%, var(--lo-charcoal) 55%, var(--lo-black) 100%);
  color: var(--lo-ivory); padding: 4.5rem 1.25rem; scroll-margin-top: 6rem;
}
.lo-inner { max-width: 1180px; margin: 0 auto; }

.lo-badge {
  display: inline-flex; align-items: center; gap: .5rem; padding: .4rem .8rem;
  border: 1px solid rgba(194,165,120,.5); color: var(--lo-gold);
  font: 600 10px/1 var(--lo-sans); letter-spacing: .2em; text-transform: uppercase;
}
.lo-dot { width: 7px; height: 7px; border-radius: 50%; background: #e0524a; animation: lo-blink 1.2s infinite; }
@keyframes lo-blink { 50% { opacity: .25; } }

.lo-flash {
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 2.5rem; align-items: center;
  padding: 2.5rem; border: 1px solid rgba(194,165,120,.35);
  background: linear-gradient(135deg, rgba(90,42,48,.55), rgba(10,9,8,.4));
}
.lo-h2 {
  margin: 1rem 0 .5rem; font: 400 clamp(2.6rem, 7vw, 4.5rem)/1 var(--lo-serif);
  color: var(--lo-gold);
}
.lo-sub { margin: 0; font-size: 17px; font-weight: 300; line-height: 1.5; color: var(--lo-cream); }
.lo-note { margin: 1rem 0 0; font-size: 13px; color: rgba(243,235,225,.6); }
.lo-ends { margin: 0 0 .6rem; text-align: center; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: rgba(243,235,225,.7); }

/* ---------- timer ---------- */
.lo-timer { display: flex; justify-content: center; align-items: flex-start; gap: .4rem; margin-bottom: 1.2rem; }
.lo-timer i { font: 400 28px/56px var(--lo-serif); color: var(--lo-gold); font-style: normal; }
.lo-t { display: flex; flex-direction: column; align-items: center; gap: .3rem; }
.lo-t b {
  display: grid; place-items: center; width: 64px; height: 56px;
  background: var(--lo-black); border: 1px solid rgba(194,165,120,.45);
  font: 500 28px/1 var(--lo-serif); color: var(--lo-ivory); font-variant-numeric: tabular-nums;
}
.lo-t span { font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: rgba(243,235,225,.55); }

/* ---------- reveal ---------- */
.lo-reveal { display: flex; flex-direction: column; gap: .75rem; }
.lo-code {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: .3rem;
  padding: .9rem; border: 1.5px dashed var(--lo-gold); background: rgba(194,165,120,.08);
}
.lo-code.is-revealed { cursor: copy; }
.lo-code-label { font-size: 9px; letter-spacing: .22em; text-transform: uppercase; color: rgba(243,235,225,.6); }
.lo-code-val { font: 600 24px/1 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .12em; color: var(--lo-gold); }
.lo-code:not(.is-revealed) .lo-code-val { filter: blur(1.5px); opacity: .7; }
.lo-code[data-copied]::after {
  content: attr(data-copied); position: absolute; top: -10px; right: 10px;
  padding: 2px 8px; background: var(--lo-gold); color: var(--lo-black); font-size: 10px; font-weight: 600;
}
.lo-pop { animation: lo-pop .45s ease; }
@keyframes lo-pop { 0% { transform: scale(.92); } 60% { transform: scale(1.05); } 100% { transform: scale(1); } }
.lo-after { display: flex; flex-direction: column; gap: .5rem; }
.lo-after[hidden], .lo-btn[hidden] { display: none !important; }
.lo-hint { margin: 0; text-align: center; font-size: 12px; color: rgba(243,235,225,.65); }

/* ---------- offer listing ---------- */
.lo-head { text-align: center; margin: 4rem auto 2rem; max-width: 640px; }
.lo-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .25em; text-transform: uppercase; color: var(--lo-gold); }
.lo-h3 { margin: .7rem 0; font: 400 clamp(1.7rem, 4vw, 2.4rem)/1.15 var(--lo-serif); color: var(--lo-ivory); }
.lo-h3 em { color: var(--lo-gold); font-style: italic; }
.lo-lead { margin: 0; font-size: 15px; font-weight: 300; line-height: 1.6; color: rgba(243,235,225,.7); }

.lo-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.lo-card {
  position: relative; display: flex; flex-direction: column; padding: 1.6rem 1.3rem 1.3rem;
  background: rgba(253,251,247,.04); border: 1px solid rgba(194,165,120,.25);
}
.lo-card.is-featured { background: linear-gradient(160deg, rgba(194,165,120,.2), rgba(90,42,48,.35)); border-color: var(--lo-gold); }
.lo-tag {
  align-self: flex-start; padding: .3rem .6rem; background: var(--lo-gold); color: var(--lo-black);
  font-size: 9px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
}
.lo-disc { margin-top: 1rem; font: 500 1.7rem/1.1 var(--lo-serif); color: var(--lo-gold); }
.lo-card-title { margin: .4rem 0 .5rem; font: 400 1.2rem/1.25 var(--lo-serif); color: var(--lo-ivory); }
.lo-card-desc { flex: 1; margin: 0 0 1rem; font-size: 13.5px; font-weight: 300; line-height: 1.55; color: rgba(243,235,225,.72); }
.lo-price { margin: 0 0 .9rem; font-size: 12px; color: rgba(243,235,225,.6); }
.lo-price b { color: var(--lo-ivory); font-weight: 600; }
.lo-fine { margin: 1.5rem 0 0; text-align: center; font-size: 11px; color: rgba(243,235,225,.45); }

/* ---------- popup ---------- */
.lo-modal {
  position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 1rem;
  background: rgba(10,9,8,.72); backdrop-filter: blur(4px); animation: lo-fade .25s ease;
}
.lo-modal[hidden] { display: none; }
@keyframes lo-fade { from { opacity: 0; } }
.lo-modal-card {
  position: relative; width: 100%; max-width: 420px; max-height: calc(100dvh - 2rem); overflow-y: auto;
  padding: 2rem 1.5rem 1.25rem; color: var(--lo-ivory);
  background: linear-gradient(170deg, #2a2420, var(--lo-charcoal) 60%, var(--lo-black));
  border: 1px solid var(--lo-gold); box-shadow: 0 30px 80px -20px rgba(0,0,0,.8);
  animation: lo-rise .3s ease;
}
@keyframes lo-rise { from { transform: translateY(20px); opacity: 0; } }
.lo-modal-top { text-align: center; margin-bottom: 1.2rem; }
.lo-modal-top .lo-sub { font-size: 14px; }
.lo-modal .lo-t b { width: 56px; height: 50px; font-size: 24px; }
.lo-modal .lo-timer i { line-height: 50px; }
.lo-close {
  position: absolute; top: .4rem; right: .6rem; width: 40px; height: 40px; border: 0; background: none;
  color: rgba(243,235,225,.7); font-size: 28px; line-height: 1; cursor: pointer;
}
.lo-skip {
  display: block; width: 100%; margin-top: .75rem; padding: .5rem; border: 0; background: none;
  color: rgba(243,235,225,.45); font: 400 12px var(--lo-sans); text-decoration: underline; cursor: pointer;
}

/* ---------- floating ---------- */
.lo-fab-offer {
  position: fixed; right: 1rem; bottom: calc(84px + env(safe-area-inset-bottom)); z-index: 44;
  display: inline-flex; align-items: center; gap: .45rem; padding: .7rem 1rem; border: 0; cursor: pointer;
  background: linear-gradient(135deg, #d9bf8f, var(--lo-gold)); color: var(--lo-black);
  font: 700 11px/1 var(--lo-sans); letter-spacing: .12em; text-transform: uppercase;
  box-shadow: 0 10px 30px -8px rgba(0,0,0,.5); animation: lo-pulse 2.2s infinite;
}

@media (min-width: 768px) {
  .lo-section { padding: 6rem 2rem; }
  .lo-fab-offer { bottom: 6rem; right: 1.5rem; }
}

@media (max-width: 1024px) { .lo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .lo-flash { grid-template-columns: 1fr; gap: 1.6rem; padding: 1.6rem 1.2rem; text-align: center; }
  .lo-section { padding: 3rem 1rem; }
  .lo-head { margin-top: 3rem; }
}
@media (max-width: 520px) {
  .lo-grid { grid-template-columns: 1fr; }
  .lo-t b { width: 56px; height: 50px; font-size: 24px; }
  .lo-timer i { line-height: 50px; }
}

/* existing WhatsApp offer buttons are replaced by call buttons */
a.lo-hide-wa { display: none !important; }
.lo-inline { margin-top: .5rem; }

@media (prefers-reduced-motion: reduce) {
  .lo-pulse, .lo-fab-offer, .lo-dot, .lo-pop, .lo-modal, .lo-modal-card { animation: none !important; }
}

/* keep content clear of the fixed mobile CTA bar */
@media (max-width: 767px) { body { padding-bottom: calc(76px + env(safe-area-inset-bottom)); } }

/* ---------- fixed mobile CTA bar ---------- */
.lo-mbar { display: none; }
@media (max-width: 767px) {
  .lo-mbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    padding-bottom: env(safe-area-inset-bottom); background: #2b2622;
    box-shadow: 0 -10px 30px -12px rgba(0,0,0,.45);
  }
  .lo-mbar-btn {
    flex: 1 1 0; min-width: 0; height: 62px; display: flex; align-items: center; justify-content: center; gap: .5rem;
    font: 700 13px/1 var(--lo-sans, sans-serif); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; white-space: nowrap;
  }
  .lo-mbar-dir { background: linear-gradient(135deg, #e3cd9f, #c9a96b 55%, #b8955a); color: #1c1a18; }
  .lo-mbar-wa { background: #3f8a55; color: #fff; }
  .lo-mbar-call { background: #2b2622; color: #fff; }
  /* replace the old floating pill and the bundle's own bar with this one */
  .lo-fab-offer { display: none !important; }
  div.fixed.bottom-0.left-0.right-0.md\:hidden { display: none !important; }
}