/* ══════════════════════════════════════════════════
   MONOLITH RESIDENCES — BASE
   Variables · Reset · Typography · Utilities · Buttons
   ══════════════════════════════════════════════════ */

/* ── Reset ── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* ── Variables ── */
:root {
  --bg:          #04090c;
  --bg-mid:      #0e1112;
  --border:      rgba(239,249,252,0.1);
  --border-dark: #e6e6e6;
  --white:       #ffffff;
  --text-soft:   rgba(255,255,255,0.8);
  --overlay-md:  rgba(4,6,10,0.5);
  --overlay-dk:  rgba(4,6,10,0.7);
  --overlay-sm:  rgba(4,6,10,0.56);

  --ff-head: 'AppleSDGothicNeo-SemiBold', 'Clash Display', 'General Sans', sans-serif;
  --ff-body: 'General Sans', system-ui, sans-serif;

  --nav-h: 60px;
}

/* ── Base ── */
html { scroll-behavior: smooth; overflow-x: clip; background: var(--bg); scrollbar-gutter: stable; }

body {
  font-family: var(--ff-body);
  background-color: var(--bg);
  color: var(--white);
  -webkit-font-smoothing: antialiased;
}

img    { display: block; max-width: 100%; }
a      { text-decoration: none; color: inherit; }
button { border: none; background: none; cursor: pointer; font-family: inherit; }
strong { font-weight: 600; }

/* ── Grid wrapper ── */
.gw {
  max-width: 1380px;
  margin: 0 auto;
  padding: 0 60px;
}

/* ── Overlays ── */
.overlay           { position: absolute; inset: 0; }
.overlay-medium    { background: var(--overlay-md); }
.overlay-dark      { background: var(--overlay-dk); }
.overlay-semi      { background: var(--overlay-sm); }
.overlay-viajes    { background: rgba(25,29,25,0.6); }

/* ── Background video ── */
.bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* ── Typography ── */
h1 { transform: scaleY(0.8); transform-origin: center center; }

.subtitle {
  display: block;
  color: var(--text-soft);
  font-family: var(--ff-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 4px;
  text-transform: uppercase;
}

.paragraph-heading {
  font-family: var(--ff-head);
  font-size: clamp(32px, 4.5vw, 52px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--white);
}

.heading {
  font-family: var(--ff-head);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--white);
  margin: 14px 0 24px;
}

.heading-large {
  font-size: clamp(36px, 4.5vw, 52px);
  letter-spacing: -0.01em;
  margin-bottom: 2rem;
}

.body-display {
  color: var(--text-soft);
  font-size: 18px;
  line-height: 1.65em;
}

/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  padding: 14px 28px;
  font-family: var(--ff-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  transition: all 0.22s ease;
}

.btn-glass {
  background: rgba(255,255,255,0.12);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.25);
  backdrop-filter: blur(6px);
}
.btn-glass:hover { background: rgba(255,255,255,0.22); }

.btn-ghost-inv {
  background: transparent;
  color: var(--text-soft);
  border: 1px solid rgba(255,255,255,0.15);
}
.btn-ghost-inv:hover { background: rgba(255,255,255,0.08); }

.outline-btn {
  display: inline-flex;
  align-items: center;
  font-family: var(--ff-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: #fff;
  padding: 14px 36px;
  border: 1px solid rgba(255,255,255,0.22);
  transition: background 0.2s ease;
}
.outline-btn:hover { background: rgba(255,255,255,0.08); }

.text-btn {
  display: inline-flex;
  align-items: center;
  font-family: var(--ff-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: #fff;
  padding: 12px 28px;
  border: 1px solid rgba(255,255,255,0.2);
  margin-top: 8px;
  transition: background 0.2s ease;
}
.text-btn:hover { background: rgba(255,255,255,0.09); }

.cta-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

/* ── Inline link ── */
.inline-link {
  color: rgba(255,255,255,0.55);
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: color 0.2s ease;
}
.inline-link:hover { color: #fff; }

/* ── Scroll-reveal animation ── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.75s cubic-bezier(0.16,1,0.3,1),
              transform 0.75s cubic-bezier(0.16,1,0.3,1);
}
.reveal.visible { opacity: 1; transform: translateY(0); }

.reveal-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.75s cubic-bezier(0.16,1,0.3,1),
              transform 0.75s cubic-bezier(0.16,1,0.3,1);
}
.reveal-right.visible { opacity: 1; transform: translateX(0); }