/* ═══════════════════════════════════════════════════════════
   VIALEDSA – motion.css
   Cinematic real-estate motion design
   Ken Burns · Parallax layers · Text reveals · Day/Night
   ═══════════════════════════════════════════════════════════ */

/* ─── GLOBAL MOTION VARS ─────────────────────────────────── */
:root {
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-cinematic: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --dur-slow:    1.4s;
  --dur-med:     0.85s;
  --dur-fast:    0.5s;
}

/* ─── SCENE BASE ─────────────────────────────────────────── */
.scene {
  position: relative;
  overflow: hidden;
  width: 100%;
}

/* ═══════════════════════════════════════════════════════════
   HERO CINEMATIC SCENE
   Video background + floating logo + reveal text
   ═══════════════════════════════════════════════════════════ */
#hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 0;
  background: #050a10;
}

/* Video background */
.hero-video-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.hero-video-wrap video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.08);
  animation: heroVideoZoom 20s var(--ease-cinematic) forwards;
}
@keyframes heroVideoZoom {
  0%   { transform: scale(1.08) translateX(0); }
  100% { transform: scale(1.0)  translateX(-1%); }
}

/* Multi-layer overlay */
.hero-overlay-gradient {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to bottom,
      rgba(5,10,16,.65) 0%,
      rgba(5,10,16,.35) 40%,
      rgba(5,10,16,.75) 85%,
      rgba(5,10,16,.95) 100%),
    linear-gradient(to right,
      rgba(5,10,16,.6) 0%,
      transparent 60%);
}

/* Content layer */
.hero-content {
  position: relative;
  z-index: 2;
  max-width: 860px;
  text-align: center;
  padding: 8rem 2rem 6rem;
}

/* Hero logo animation */
.hero-logo-wrap {
  margin-bottom: 2rem;
  animation: fadeSlideDown 1s var(--ease-out) 0.3s both;
}
.hero-logo {
  height: 72px;
  width: auto;
  filter: brightness(0) invert(1);
  margin: 0 auto;
  display: block;
  drop-shadow: 0 4px 24px rgba(0,0,0,.5);
}

/* Badge */
.hero-badge {
  animation: fadeSlideUp 0.9s var(--ease-out) 0.6s both;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: rgba(201,168,76,.18);
  border: 1px solid rgba(201,168,76,.4);
  color: var(--c-accent);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: .45rem 1.2rem;
  border-radius: 50px;
  margin-bottom: 1.75rem;
  backdrop-filter: blur(8px);
}

/* Hero title — word by word reveal */
.hero-title {
  font-family: var(--font-serif);
  font-size: clamp(2.2rem, 5.5vw, 4.2rem);
  font-weight: 900;
  color: var(--c-white);
  line-height: 1.1;
  margin-bottom: 1.75rem;
  animation: fadeSlideUp 1s var(--ease-out) 0.85s both;
}
.hero-accent { color: var(--c-accent); }

/* Hero subtitle */
.hero-subtitle {
  font-size: clamp(1rem, 2vw, 1.2rem);
  color: rgba(255,255,255,.75);
  line-height: 1.75;
  margin-bottom: 2.5rem;
  animation: fadeSlideUp 1s var(--ease-out) 1.1s both;
}
.hero-subtitle strong { color: var(--c-white); }

/* CTAs */
.hero-ctas {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 2.5rem;
  animation: fadeSlideUp 1s var(--ease-out) 1.3s both;
}

/* Trust items */
.hero-trust {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  flex-wrap: wrap;
  animation: fadeSlideUp 1s var(--ease-out) 1.5s both;
}
.trust-item {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .83rem;
  color: rgba(255,255,255,.65);
}
.trust-item i { color: var(--c-accent); }

/* Scroll indicator */
.hero-scroll-indicator {
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  color: rgba(255,255,255,.4);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  z-index: 2;
  animation: scrollBounce 2.2s ease-in-out infinite 2s;
}
@keyframes scrollBounce {
  0%, 100% { transform: translateX(-50%) translateY(0); opacity: .4; }
  50%       { transform: translateX(-50%) translateY(8px); opacity: .7; }
}

/* ═══════════════════════════════════════════════════════════
   SMART BAR
   ═══════════════════════════════════════════════════════════ */
.smart-bar {
  position: relative;
  overflow: hidden;
}
.smart-bar::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    transparent 0%, rgba(255,255,255,.08) 50%, transparent 100%);
  animation: shimmer 3s ease-in-out infinite;
}
@keyframes shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* ═══════════════════════════════════════════════════════════
   PARALLAX SCENE – DESARROLLO (el gran plano)
   ═══════════════════════════════════════════════════════════ */
.scene-desarrollo {
  position: relative;
  overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════
   CINEMATIC HOUSE SCENE
   Day/Night parallax layers
   ═══════════════════════════════════════════════════════════ */
.house-scene {
  position: relative;
  width: 100%;
  height: 92vh;
  min-height: 640px;
  overflow: hidden;
  background: #0d1830;
}

/* Sky layer – full photo background, moves slowest */
.house-layer-sky {
  position: absolute;
  inset: -8% -5%;
  will-change: transform;
  transition: opacity 1.2s ease;
  z-index: 0;
  overflow: hidden;
}
.house-layer-sky .sky-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
  transition: opacity 1.2s ease;
}
.house-layer-sky .sky-photo-night {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.house-scene.is-night .house-layer-sky .sky-photo       { opacity: 0; }
.house-scene.is-night .house-layer-sky .sky-photo-night { opacity: 1; }

/* Stars layer (night only) */
.house-layer-stars {
  position: absolute;
  inset: -10% -5%;
  z-index: 1;
  opacity: 0;
  transition: opacity 1.2s ease;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.9) 1px, transparent 1px),
    radial-gradient(circle, rgba(255,255,255,.6) 1px, transparent 1px),
    radial-gradient(circle, rgba(255,255,255,.4) 1px, transparent 1px);
  background-size: 200px 200px, 150px 150px, 100px 100px;
  background-position: 0 0, 50px 80px, 120px 40px;
}
.house-layer-stars.visible { opacity: 1; }

/* Ground / overlay layer – darkens bottom for cinematic depth */
.house-layer-ground {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 55%;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(5,10,20,.0) 30%,
    rgba(5,10,20,.25) 70%,
    rgba(5,10,20,.55) 100%);
  will-change: transform;
  z-index: 2;
  pointer-events: none;
  transition: background 1.2s ease;
}
.house-scene.is-night .house-layer-ground {
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(2,5,15,.1) 30%,
    rgba(2,5,15,.45) 70%,
    rgba(2,5,15,.75) 100%);
}

/* House cutout – stretched full width, bottom-anchored */
.house-layer-facade {
  position: absolute;
  bottom: 0;
  left: -5%;
  right: -5%;
  width: 110%;
  z-index: 3;
  will-change: transform;
  filter: drop-shadow(0 -4px 40px rgba(0,0,0,.25));
  transition: filter 1.2s ease;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.house-layer-facade img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  object-position: center bottom;
  transition: opacity 1.2s ease;
}
.house-layer-facade .facade-day  { opacity: 1; position: relative; width: 100%; }
.house-layer-facade .facade-night {
  position: absolute;
  bottom: 0;
  left: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
}
/* Night switch */
.house-scene.is-night .facade-day  { opacity: 0; }
.house-scene.is-night .facade-night { opacity: 1; }
.house-scene.is-night .house-layer-sky { background: linear-gradient(180deg,#020818 0%,#0a1628 40%,#0d1f3e 70%,#162847 100%); }
.house-scene.is-night .house-layer-ground { background: linear-gradient(180deg,transparent 0%,rgba(30,35,50,.5) 40%,#1e2332 100%); }
.house-scene.is-night .house-layer-stars { opacity: 1; }
.house-scene.is-night .house-layer-facade { filter: drop-shadow(0 20px 80px rgba(201,168,76,.25)) drop-shadow(0 0 40px rgba(255,180,60,.15)); }

/* Foreground bushes/plants – moves fastest (closest) */
.house-layer-fg {
  position: absolute;
  bottom: 0;
  left: -5%;
  right: -5%;
  height: 20%;
  z-index: 4;
  will-change: transform;
  background:
    radial-gradient(ellipse 200px 80px at 12% 85%, rgba(34,85,34,.5) 0%, transparent 70%),
    radial-gradient(ellipse 150px 60px at 88% 85%, rgba(28,72,28,.4) 0%, transparent 70%),
    radial-gradient(ellipse 100px 50px at 50% 95%, rgba(40,95,40,.35) 0%, transparent 70%);
  pointer-events: none;
}

/* House scene text overlay */
.house-scene-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 6;
  padding: 3rem 3rem 2.5rem;
  background: linear-gradient(to top,
    rgba(13,17,23,.95) 0%,
    rgba(13,17,23,.6) 60%,
    transparent 100%);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
}
.house-scene-info {
  flex: 1;
}
.house-scene-label {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-accent);
  margin-bottom: .5rem;
  display: block;
}
.house-scene-title {
  font-family: var(--font-serif);
  font-size: clamp(1.4rem, 3vw, 2.2rem);
  font-weight: 900;
  color: var(--c-white);
  line-height: 1.15;
  margin-bottom: .75rem;
}
.house-scene-desc {
  font-size: .9rem;
  color: rgba(255,255,255,.65);
  line-height: 1.6;
  max-width: 420px;
}

/* Day/Night toggle */
.day-night-toggle {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .65rem;
  flex-shrink: 0;
}
.toggle-label {
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
}
.toggle-switch {
  width: 60px;
  height: 30px;
  background: rgba(255,255,255,.15);
  border-radius: 50px;
  border: 1.5px solid rgba(255,255,255,.25);
  cursor: pointer;
  position: relative;
  transition: background .4s ease, border-color .4s ease;
  backdrop-filter: blur(8px);
}
.toggle-switch::after {
  content: '☀️';
  position: absolute;
  top: 50%;
  left: 4px;
  transform: translateY(-50%);
  font-size: .9rem;
  transition: all .4s var(--ease-out);
  line-height: 1;
}
.is-night .toggle-switch {
  background: rgba(201,168,76,.25);
  border-color: rgba(201,168,76,.5);
}
.is-night .toggle-switch::after {
  content: '🌙';
  left: calc(100% - 28px);
}

/* ═══════════════════════════════════════════════════════════
   FLOOR PLAN SCENE – Ken Burns + flip reveal
   ═══════════════════════════════════════════════════════════ */
.floorplan-scene {
  position: relative;
  overflow: hidden;
  background: #0d1117;
  padding: 5rem 0;
}

/* 3D card flip container */
.floorplan-flipper {
  perspective: 1200px;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
}
.floorplan-card {
  position: relative;
  width: 100%;
  transform-style: preserve-3d;
  transition: transform 0.9s var(--ease-out);
  border-radius: 16px;
  cursor: pointer;
}
.floorplan-card.flipped { transform: rotateY(180deg); }

.floorplan-face {
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  backface-visibility: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,.6);
}
.floorplan-back {
  position: absolute;
  inset: 0;
  transform: rotateY(180deg);
}

.floorplan-face img {
  width: 100%;
  display: block;
  transition: transform 12s var(--ease-cinematic);
}
.floorplan-face:hover img {
  transform: scale(1.04) translateX(-1%);
}

/* Plan label badges */
.plan-badge {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  background: rgba(13,17,23,.85);
  border: 1px solid rgba(201,168,76,.4);
  color: var(--c-accent);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .4rem .9rem;
  border-radius: 50px;
  backdrop-filter: blur(8px);
  z-index: 5;
}
.flip-hint {
  position: absolute;
  bottom: 1.25rem;
  right: 1.25rem;
  background: rgba(13,17,23,.8);
  border: 1px solid rgba(255,255,255,.15);
  color: rgba(255,255,255,.6);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .1em;
  padding: .4rem .9rem;
  border-radius: 50px;
  backdrop-filter: blur(8px);
  z-index: 5;
  display: flex;
  align-items: center;
  gap: .4rem;
  animation: pulse 2.5s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: .6; transform: scale(1); }
  50%       { opacity: 1;  transform: scale(1.03); }
}

/* ═══════════════════════════════════════════════════════════
   SUBDIVISION PARALLAX SCENE
   ═══════════════════════════════════════════════════════════ */
.subdivision-scene {
  position: relative;
  overflow: hidden;
}
.subdivision-plano {
  transition: transform 0.1s linear;
  will-change: transform;
}
.subdivision-plano img {
  display: block;
  width: 100%;
  border-radius: 16px;
  box-shadow: 0 40px 100px rgba(0,0,0,.5);
  transition: transform 14s var(--ease-cinematic);
}
.subdivision-plano:hover img {
  transform: scale(1.03) translateX(-1.5%);
}

/* ═══════════════════════════════════════════════════════════
   TEXT REVEAL ANIMATIONS
   ═══════════════════════════════════════════════════════════ */

/* Fade + slide from bottom */
@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeSlideDown {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeSlideLeft {
  from { opacity: 0; transform: translateX(32px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes fadeSlideRight {
  from { opacity: 0; transform: translateX(-32px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.93); }
  to   { opacity: 1; transform: scale(1); }
}

/* Clip-path text reveal (curtain wipe) */
@keyframes clipRevealUp {
  from { clip-path: inset(100% 0 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}

/* Scroll-triggered reveal classes */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
.reveal.from-left  { transform: translateX(-32px); }
.reveal.from-right { transform: translateX(32px); }
.reveal.scale-in   { transform: scale(0.93); }
.reveal.clip-up    { clip-path: inset(100% 0 0 0); transition: clip-path .8s var(--ease-out), opacity .8s var(--ease-out); }

.reveal.visible {
  opacity: 1;
  transform: translateY(0) translateX(0) scale(1);
  clip-path: inset(0 0 0 0);
}

/* Stagger delays */
.reveal-d1 { transition-delay: .1s; }
.reveal-d2 { transition-delay: .2s; }
.reveal-d3 { transition-delay: .3s; }
.reveal-d4 { transition-delay: .4s; }
.reveal-d5 { transition-delay: .5s; }
.reveal-d6 { transition-delay: .6s; }

/* ═══════════════════════════════════════════════════════════
   SECTION TRANSITIONS – Diagonal wipe dividers
   ═══════════════════════════════════════════════════════════ */
.section-divider {
  position: relative;
  height: 80px;
  overflow: hidden;
  margin-top: -1px;
}
.section-divider svg {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* ═══════════════════════════════════════════════════════════
   3D TILT CARDS
   ═══════════════════════════════════════════════════════════ */
.tilt-card {
  transform-style: preserve-3d;
  transition: transform 0.15s ease, box-shadow 0.3s ease;
  will-change: transform;
}
.tilt-card:hover {
  box-shadow: 0 30px 70px rgba(0,0,0,.35) !important;
}
.tilt-card .tilt-shine {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(255,255,255,.08) 0%,
    transparent 70%);
  pointer-events: none;
  z-index: 10;
  opacity: 0;
  transition: opacity .3s ease;
}
.tilt-card:hover .tilt-shine { opacity: 1; }

/* ═══════════════════════════════════════════════════════════
   KEN BURNS – static images
   ═══════════════════════════════════════════════════════════ */
.ken-burns {
  overflow: hidden;
  position: relative;
}
.ken-burns img,
.ken-burns .kb-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: kenBurns 18s var(--ease-cinematic) infinite alternate;
  transform-origin: center center;
}
@keyframes kenBurns {
  0%   { transform: scale(1.08) translate(0px, 0px); }
  33%  { transform: scale(1.04) translate(-12px, -6px); }
  66%  { transform: scale(1.06) translate(8px, -8px); }
  100% { transform: scale(1.0)  translate(-5px, 4px); }
}
.ken-burns-2 img { animation: kenBurns2 20s var(--ease-cinematic) infinite alternate; }
@keyframes kenBurns2 {
  0%   { transform: scale(1.0) translate(8px, 4px); }
  50%  { transform: scale(1.06) translate(-8px, -5px); }
  100% { transform: scale(1.03) translate(4px, -8px); }
}

/* ═══════════════════════════════════════════════════════════
   COUNTER ANIMATION
   ═══════════════════════════════════════════════════════════ */
.numero-big {
  display: inline-block;
  transition: transform .3s ease;
}
.numero-item:hover .numero-big {
  transform: scale(1.08);
  color: var(--c-accent-lt);
}

/* ═══════════════════════════════════════════════════════════
   PLANO LEYENDA – animated dots
   ═══════════════════════════════════════════════════════════ */
.leyenda-dot {
  position: relative;
}
.leyenda-dot::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 4px;
  animation: dotPulse 2s ease-in-out infinite;
}
.leyenda-item:nth-child(1) .leyenda-dot::after { box-shadow: 0 0 0 0 rgba(232,80,26,.6); animation-name: dotPulseOrange; }
.leyenda-item:nth-child(2) .leyenda-dot::after { box-shadow: 0 0 0 0 rgba(61,186,78,.6); animation-name: dotPulseGreen; }
@keyframes dotPulseOrange {
  0%   { box-shadow: 0 0 0 0 rgba(232,80,26,.6); }
  70%  { box-shadow: 0 0 0 8px rgba(232,80,26,0); }
  100% { box-shadow: 0 0 0 0 rgba(232,80,26,0); }
}
@keyframes dotPulseGreen {
  0%   { box-shadow: 0 0 0 0 rgba(61,186,78,.6); }
  70%  { box-shadow: 0 0 0 8px rgba(61,186,78,0); }
  100% { box-shadow: 0 0 0 0 rgba(61,186,78,0); }
}

/* ═══════════════════════════════════════════════════════════
   SECTION ENTRANCE ANIMATIONS (scroll-triggered)
   ═══════════════════════════════════════════════════════════ */
.section-dark  .section-title,
.section-dark  .section-desc,
.section-dark  .section-label { }

/* Animated underline on section labels */
.section-label {
  position: relative;
  display: inline-block;
}
.section-label::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 1.5px;
  background: var(--c-gold-lt);
  transition: width .6s var(--ease-out) .3s;
}
.reveal.visible .section-label::after,
.aos-animated .section-label::after { width: 100%; }

/* ═══════════════════════════════════════════════════════════
   FAQ – smooth hover glow
   ═══════════════════════════════════════════════════════════ */
.faq-item {
  transition: border-color .3s ease, box-shadow .3s ease;
}
.faq-item:hover {
  box-shadow: 0 4px 24px rgba(107,138,176,.1);
}

/* ═══════════════════════════════════════════════════════════
   LOTE CARDS – enhanced tilt + glow
   ═══════════════════════════════════════════════════════════ */
.lote-card {
  transform-style: preserve-3d;
}
.lote-featured {
  animation: featuredGlow 3s ease-in-out infinite;
}
@keyframes featuredGlow {
  0%, 100% { box-shadow: 0 8px 32px rgba(201,168,76,.18); }
  50%       { box-shadow: 0 12px 48px rgba(201,168,76,.32); }
}

/* ═══════════════════════════════════════════════════════════
   WHATSAPP FLOAT – attention pulse
   ═══════════════════════════════════════════════════════════ */
.whatsapp-float {
  animation: waPulse 3s ease-in-out infinite 3s;
}
@keyframes waPulse {
  0%, 100% { box-shadow: 0 4px 20px rgba(37,211,102,.45); }
  50%       { box-shadow: 0 4px 32px rgba(37,211,102,.7), 0 0 0 8px rgba(37,211,102,.12); }
}

/* ═══════════════════════════════════════════════════════════
   NAVBAR – glass morph on scroll
   ═══════════════════════════════════════════════════════════ */
#navbar.scrolled {
  background: rgba(13,17,23,.92) !important;
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
}

/* ─── FLOORPLAN SPECS ────────────────────────────────────── */
.floorplan-specs {
  margin-top: 2.5rem;
}
.specs-grid {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}
.spec-item {
  display: flex;
  align-items: center;
  gap: .6rem;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 50px;
  padding: .6rem 1.2rem;
  color: rgba(255,255,255,.75);
  font-size: .85rem;
  font-weight: 500;
  transition: all .3s ease;
}
.spec-item:hover {
  background: rgba(201,168,76,.12);
  border-color: rgba(201,168,76,.3);
  color: var(--c-accent);
  transform: translateY(-2px);
}
.spec-item i { color: var(--c-accent); font-size: .9rem; }

/* ═══════════════════════════════════════════════════════════
   MOBILE ADJUSTMENTS
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .house-scene { height: 70vh; }
  .house-layer-facade { left: -2%; right: -2%; width: 104%; }
  .house-scene-content { flex-direction: column; align-items: flex-start; padding: 2rem 1.5rem; }
  .day-night-toggle { flex-direction: row; align-items: center; }
  .floorplan-flipper { padding: 0 1rem; }
  .hero-content { padding: 7rem 1.5rem 5rem; }
}
@media (max-width: 480px) {
  .house-scene { height: 60vh; }
  .house-layer-facade { width: 100%; bottom: 18%; }
  .house-scene-title { font-size: 1.4rem; }
}