/* ============================================================
   URBANITY SALES SITE — UI KIT styles
   Layout + the 5 signature effects (EVASION grammar, URBANITY skin).
   Every effect DEGRADES to a legible static end-state if JS / the
   observer / 3D fails. Base CSS is always the readable state; the
   scroll engine in data.jsx only enriches.
   ============================================================ */

.site { background: var(--uk-paper); color: var(--uk-ink); overflow-x: clip; }
.site * { box-sizing: border-box; }

/* Reading & content containers */
.wrap { max-width: var(--uk-reading); margin-inline: auto; padding-inline: var(--uk-gutter); }
@media (min-width: 1024px) { .wrap { max-width: var(--uk-content); } }

.section { padding-block: var(--uk-section-y); }
.section-head { display: flex; flex-direction: column; gap: 14px; margin-bottom: var(--uk-space-6); }

/* ---------- HEADER ---------- */
.hdr {
  position: sticky; top: 0; z-index: var(--uk-z-header);
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px var(--uk-gutter);
  background: color-mix(in srgb, var(--uk-paper) 84%, transparent);
  backdrop-filter: saturate(1.1) blur(10px);
  border-bottom: 1px solid var(--uk-hairline);
}
.hdr__brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.hdr__logo { height: 28px; display: block; }
.hdr__word { font-family: var(--font-display); font-weight: 500; letter-spacing: 0.04em; font-size: 18px; color: var(--uk-teal-deep); }
.hdr__cta { display: none; }
@media (min-width: 1024px) { .hdr__cta { display: inline-flex; } }

/* ============================================================
   EFFECT 1 — HERO "FACHADA RESPIRA" (full-bleed 9:16 night render)
   Single full-bleed image, ken-burns breath, scrim ONLY at the base.
   Copy lifts + fades on scroll (driven by the engine).
   ============================================================ */
/* ============================================================
   EFFECT 1 — HERO "MOSAICO" (EVASION fan)
   5 full-height vertical strips, side by side. Center strip =
   night tower = protagonist (z-10, sits over). Strips rest in a
   fan (outer lifted, center anchored) and drift on scroll at
   their own speeds — set by the engine in data.jsx (transform +
   opacity only). The giant URBANITY wordmark sits BEHIND, bleeding
   the edges; eyebrow + CTAs sit OVER, with a scrim only at the base.
   Mobile: only the center strip shows (full-bleed, subtle zoom).
   No-JS / reduced-motion → legible static state.
   ============================================================ */
.hero {
  position: relative; height: 100svh; min-height: 600px;
  display: flex; align-items: flex-end;
  overflow: hidden; background: var(--uk-night);
  isolation: isolate;
}

/* ---- Giant wordmark, behind the mosaic, bleeding the edges ---- */
.hero__wordmark {
  position: absolute; z-index: 1; left: 50%; top: 33%;
  transform: translate(-50%, -50%);
  margin: 0; white-space: nowrap; pointer-events: none; user-select: none;
  font-family: var(--font-display); font-weight: 500;
  letter-spacing: -0.055em; line-height: 1;
  font-size: 25vw;
  color: var(--uk-gold-soft); opacity: 0.6;
  will-change: transform;
}

/* ---- The 5-strip mosaic ---- */
.hero__mosaic {
  position: absolute; inset: 0; z-index: 5;
  display: flex; align-items: flex-end; justify-content: center;
  gap: 10px;
}
.hero__strip {
  position: relative; flex: 0 0 20vw; height: 64vh;
  overflow: hidden; background: var(--uk-night-2);
  will-change: transform, opacity;
}
.hero__strip--center {
  flex-basis: 21.5vw; height: 68vh; z-index: 10;
  box-shadow: 0 36px 90px -28px rgba(0, 0, 0, 0.78);
}
.hero__strip-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; filter: var(--uk-img-filter);
}
/* Pre-entrance hidden state — only armed once JS drives the strips,
   so no-JS keeps the mosaic fully visible. */
.hero--fx .hero__strip { opacity: 0; }

/* scrim only at the base — the sky / fan stays open */
.hero__scrim { position: absolute; inset: 0; z-index: 14; background: var(--uk-scrim-hero); pointer-events: none; }
.hero__copy {
  position: relative; z-index: 20;
  padding: 0 var(--uk-gutter) clamp(48px, 12vh, 110px);
  width: 100%; max-width: var(--uk-content); margin-inline: auto;
  will-change: transform, opacity;
}
.hero__sub { font-family: var(--font-text); font-size: var(--uk-step-1); color: var(--uk-paper-on-dark); opacity: .94; margin: 18px 0 0; max-width: 26ch; line-height: 1.4; }
.hero__auth { font-family: var(--font-text); font-size: var(--uk-step--1); color: var(--uk-gold-soft); letter-spacing: .06em; margin-top: 14px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.hero__proof { font-family: var(--font-text); font-size: 12px; color: var(--uk-ink-on-dark-soft); margin-top: 18px; letter-spacing: .02em; }
.hero__cue {
  position: absolute; z-index: 20; left: 50%; bottom: 18px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-family: var(--font-text); font-size: 10px; letter-spacing: .32em; text-transform: uppercase;
  color: var(--uk-ink-on-dark-soft);
}
.hero__cue i { width: 1px; height: 34px; background: linear-gradient(var(--uk-gold-soft), transparent); animation: cueDrop 2.4s var(--uk-ease-out) infinite; transform-origin: top; }
@keyframes cueDrop { 0% { transform: scaleY(0); opacity: 0; } 35% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1) translateY(10px); opacity: 0; } }

/* ---- MOBILE: fan 3-strip convergindo com desktop — mesma composição vertical. ----
   Laterais: 88svh (bottom-aligned) + JS lift de -80px → gap superior ~17px.
   Centro: 106svh, transborda pelo topo (clipped). Fan visível em toda a altura. */
@media (max-width: 1023.98px) {
  .hero__mosaic { gap: 5px; align-items: flex-end; }
  .hero__strip { display: none; }
  .hero__strip:nth-child(2),
  .hero__strip:nth-child(4) {
    display: block;
    flex: 0 0 22vw;
    height: 88svh;
  }
  .hero__strip--center {
    display: block;
    flex: 1 0 auto;
    height: 106svh;
    z-index: 5;
    box-shadow: 0 28px 90px -20px rgba(0,0,0,0.80);
  }
  .hero__wordmark { font-size: 44vw; opacity: 0.24; }
}
@media (max-width: 1023.98px) and (prefers-reduced-motion: no-preference) {
  .hero__strip--center .hero__strip-img {
    animation: heroZoom 20s var(--uk-ease-soft) infinite alternate;
    will-change: transform;
  }
  .hero__strip:nth-child(2) .hero__strip-img,
  .hero__strip:nth-child(4) .hero__strip-img {
    animation: heroZoom 28s var(--uk-ease-soft) infinite alternate-reverse;
    will-change: transform;
  }
}
@keyframes heroZoom { from { transform: scale(1); } to { transform: scale(1.06); } }

/* ============================================================
   EFFECT 2 — PRISMA "PRISMA DE VENDA" (claim FLIP 3D on scroll)
   Tall section, pinned. Three faces rotate around X (preserve-3d).
   Fallback (no .js-on): faces stack vertically, fully legible.
   ============================================================ */
.prisma { position: relative; height: 300vh; background: var(--uk-paper); }
.prisma__pin {
  position: sticky; top: 0; height: 100svh;
  display: flex; align-items: center;
  perspective: var(--uk-persp); perspective-origin: 50% 45%;
}
.prisma__cube {
  position: relative; width: 100%; max-width: var(--uk-content);
  margin-inline: auto; min-height: 42vh;
  transform-style: preserve-3d;
}
.prisma__face {
  position: absolute; left: var(--uk-gutter); right: var(--uk-gutter); top: 50%;
  transform-origin: center; backface-visibility: hidden; will-change: transform, opacity;
  font-family: var(--font-display); font-weight: 500;
  letter-spacing: var(--uk-track-display); line-height: 0.98;
  font-size: var(--uk-display-prisma); color: var(--uk-ink);
  text-wrap: balance;
}
.prisma__face .accent { color: var(--uk-teal); }
.prisma__count {
  position: absolute; left: var(--uk-gutter); top: 14vh; z-index: 2;
  font-family: var(--font-text); font-size: var(--uk-step--1); font-weight: 500;
  letter-spacing: var(--uk-track-eyebrow); text-transform: uppercase; color: var(--uk-ink-faint);
}
.prisma__count b { color: var(--uk-gold); font-variant-numeric: tabular-nums; font-weight: 500; }
.prisma__sub {
  position: absolute; left: var(--uk-gutter); right: var(--uk-gutter); bottom: 12vh;
  font-family: var(--font-text); font-size: var(--uk-step-1); color: var(--uk-ink-soft); max-width: 34ch;
}
/* Fallback: no JS / reduced-motion → readable stack */
.prisma:not(.js-on) { height: auto; }
.prisma:not(.js-on) .prisma__pin { position: static; height: auto; display: block; padding-block: var(--uk-section-y); perspective: none; }
.prisma:not(.js-on) .prisma__cube { perspective: none; transform: none; min-height: 0; }
.prisma:not(.js-on) .prisma__count { position: static; margin-bottom: var(--uk-space-6); }
.prisma:not(.js-on) .prisma__face { position: static; left: auto; right: auto; top: auto;
  transform: none !important; opacity: 1 !important; margin-bottom: var(--uk-space-6); }
.prisma:not(.js-on) .prisma__sub { position: static; }

/* ============================================================
   EFFECT 3 — MANIFESTO "QUE NÍTIDA" (blur-stagger word reveal, dark)
   Words start blurred/transparent; the engine sets per-word
   opacity+blur as you scroll. Base (no .fx-on) = fully nítido.
   ============================================================ */
.manifesto { background: var(--uk-night); position: relative; overflow: hidden; }
.manifesto__bg { position: absolute; inset: 0; object-fit: cover; width: 100%; height: 100%; opacity: .26; filter: var(--uk-img-filter); }
.manifesto__veil { position: absolute; inset: 0; background: linear-gradient(rgba(12,19,17,.62), rgba(12,19,17,.82)); }
.manifesto__inner { position: relative; z-index: 2; }
.manifesto__text {
  font-family: var(--font-display); font-weight: 500;
  letter-spacing: -0.02em; line-height: 1.16;
  font-size: var(--uk-display-manifesto); color: var(--uk-paper-on-dark);
}
.manifesto__text .w { display: inline-block; }
.manifesto.fx-on .w { will-change: opacity, filter; }
.manifesto__gold { color: var(--uk-gold-soft); }

/* ============================================================
   EFFECT 4 — BENTO "MOSAICO DE LAZER"
   Per-cell stagger reveal (lift + blur) via .fx-stagger; photo
   zooms on hover (desktop). Tap-shrink lives inside BentoTile.
   ============================================================ */
.bento { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; grid-auto-rows: 168px; }
@media (min-width: 1024px) { .bento { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 200px; gap: 12px; } }
.bento__cell { position: relative; min-height: 0; }
.bento__cell > * { height: 100%; }
.bento.fx-stagger > .bento__cell {
  opacity: 0; transform: translate3d(0, 18px, 0); filter: blur(8px);
  transition: opacity var(--uk-dur-mid) var(--uk-ease-out),
              transform var(--uk-dur-mid) var(--uk-ease-out),
              filter var(--uk-dur-mid) var(--uk-ease-out);
}
.bento.fx-stagger > .bento__cell.in { opacity: 1; transform: none; filter: none; }
.bento__cell .uk-img-brand { transition: transform var(--uk-dur-slow) var(--uk-ease-out); }
@media (hover: hover) { .bento__cell:hover .uk-img-brand { transform: scale(1.07); } }

/* ============================================================
   EFFECT 5 — STICKY SCROLL-STACK "DECORADOS QUE EMPILHAM"
   Cards are sticky; the engine drives rise + scale + compress so
   later cards stack over earlier (z-index). Fallback = sticky list.
   ============================================================ */
.stack { position: relative; }
.stack__card { position: sticky; top: 12vh; margin-bottom: clamp(28px, 6vh, 56px); }
.stack.js-on .stack__card { margin-bottom: 0; height: 88vh; display: flex; align-items: center; }
.stack__inner {
  display: grid; grid-template-columns: 1fr; gap: 0;
  width: 100%; max-width: 560px; margin-inline: auto;
  background: var(--uk-paper); border: 1px solid var(--uk-hairline);
  border-radius: var(--uk-radius-lg); overflow: hidden; box-shadow: var(--uk-shadow-3);
  will-change: transform, opacity; transform-origin: center top;
}
@media (min-width: 720px) { .stack__inner { grid-template-columns: 1.1fr 1fr; align-items: stretch; max-width: 760px; } }
.stack__img { aspect-ratio: 4/3; max-height: 56vh; object-fit: cover; width: 100%; filter: var(--uk-img-filter); }
@media (min-width: 720px) { .stack__img { aspect-ratio: auto; height: 100%; max-height: none; } }
.stack__body { padding: var(--uk-space-5); display: flex; flex-direction: column; gap: 14px; justify-content: center; }

/* ---------- Plantas ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  font-family: var(--font-text); font-size: 13px; font-weight: 500; letter-spacing: .04em;
  padding: 8px 16px; border-radius: var(--uk-radius-pill); cursor: pointer;
  border: 1px solid var(--uk-hairline); background: transparent; color: var(--uk-ink-soft);
  transition: background var(--uk-dur-fast) var(--uk-ease-soft), color var(--uk-dur-fast) var(--uk-ease-soft), border-color var(--uk-dur-fast) var(--uk-ease-soft);
}
.chip[aria-pressed="true"] { background: var(--uk-ink); color: var(--uk-paper); border-color: var(--uk-ink); }
.plantas-grid { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: var(--uk-space-6); }
@media (min-width: 720px) { .plantas-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .plantas-grid { grid-template-columns: repeat(3, 1fr); } }
.planta-card { border: 1px solid var(--uk-hairline); border-radius: var(--uk-radius); overflow: hidden; background: var(--uk-paper-2); cursor: zoom-in; transition: box-shadow var(--uk-dur-fast) var(--uk-ease-soft); }
.planta-card:hover { box-shadow: var(--uk-shadow-2); }
.planta-card img { width: 100%; aspect-ratio: 2055/1474; object-fit: cover; display: block; filter: var(--uk-img-filter); }
.planta-card .cap { padding: 10px 14px; font-family: var(--font-text); font-size: 12px; color: var(--uk-ink-soft); display: flex; justify-content: space-between; }

/* Lightbox */
.lbx { position: fixed; inset: 0; z-index: var(--uk-z-overlay); background: rgba(12,19,17,.92);
  display: flex; align-items: center; justify-content: center; padding: 4vw; }
.lbx img { max-width: 100%; max-height: 86vh; border-radius: var(--uk-radius); box-shadow: var(--uk-shadow-3); background: var(--uk-paper); }
.lbx__close { position: absolute; top: 18px; right: 20px; background: none; border: 1px solid var(--uk-hairline-dark);
  color: var(--uk-paper-on-dark); width: 42px; height: 42px; border-radius: 999px; cursor: pointer; font-size: 18px; }
.lbx__cta { position: absolute; bottom: 5vh; left: 50%; transform: translateX(-50%); }

/* ---------- Tipologias grid ---------- */
.tipos { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 720px) { .tipos { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .tipos { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Configurador / dark blocks ---------- */
.darkband { background: var(--uk-night); color: var(--uk-paper-on-dark); }
.darkband .uk-display, .darkband h2 { color: var(--uk-paper-on-dark); }
.cfg { max-width: 560px; margin-inline: auto; background: var(--uk-night-2); border: 1px solid var(--uk-hairline-dark);
  border-radius: var(--uk-radius-lg); padding: var(--uk-space-6); }
.cfg__seg { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 22px; }
.cfg__struct { display: grid; gap: 10px; margin: 20px 0; }
.cfg__struct li { display: flex; gap: 10px; align-items: baseline; font-family: var(--font-text); font-size: 14px; color: var(--uk-paper-on-dark); }
.cfg__struct .dot { width: 5px; height: 5px; border-radius: 999px; background: var(--uk-gold-soft); flex: none; transform: translateY(-2px); }

/* ---------- Corretor ---------- */
.corretor { display: flex; gap: 18px; align-items: center; background: var(--uk-paper-2);
  border: 1px solid var(--uk-hairline); border-radius: var(--uk-radius-lg); padding: var(--uk-space-5); }
.corretor__photo { width: 76px; height: 76px; border-radius: 999px; background: var(--uk-mist); flex: none;
  display: flex; align-items: center; justify-content: center; color: var(--uk-ink-faint); font-size: 11px; text-align: center; overflow: hidden; }

/* ---------- Footer ---------- */
.ftr { background: var(--uk-night); color: var(--uk-ink-on-dark-soft); padding-block: var(--uk-space-8); }
.ftr a { color: var(--uk-paper-on-dark); text-decoration: none; }
.ftr__legal { font-size: 11.5px; line-height: 1.6; color: var(--uk-ink-on-dark-soft); max-width: 70ch; }

/* sticky bar spacer on mobile (host-rendered bar overlays bottom) */
.sticky-spacer { height: 84px; background: var(--uk-paper); }
@media (min-width: 1024px) { .sticky-spacer { display: none; } }
.sticky-host { display: block; }
@media (min-width: 1024px) { .sticky-host { display: none; } }