/* =========================================================
   Casa page — green theme + hero
   ========================================================= */

body.theme-green {
  --gold:        #8cbd3e;
  --gold-bar-2:  #7fae35;
  --gold-deep:   #7fb23a;
  --gold-deep-2: #6b9c2e;
  --gold-text:   #84bb3c;
  --gold-soft:   #cfe2a0;
  --cream:       #eef4e2;
  --cream-2:     #dde9c4;
  --cream-3:     #e7f0d6;
  background: var(--cream);
}
body.theme-green .site-footer {
  --gold-deep: #a98f4d;
  --gold-text: #b3974c;
  --gold-soft: #d8cba6;
  --cream-3:   #efe7d8;
}

/* ---------- HERO ---------- */
.casa-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 70px 0 110px;
  background: linear-gradient(180deg, #eef4e2 0%, #e9f0d9 60%, #e6efd5 100%);
}
.casa-hero .big-circle {
  position: absolute;
  z-index: -1;
  right: -120px; top: 20px;
  width: 580px; height: 580px;
  border-radius: 50%;
  background: rgba(140,189,62,0.18);
}
.casa-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.04fr 1fr;
  gap: 66px;
  align-items: center;
}
.casa-photo {
  width: 100%;
  border-radius: 26px;
  overflow: hidden;
  aspect-ratio: 1.78 / 1;
  box-shadow: 0 40px 84px -34px rgba(60,75,25,.45);
  background: #dde9c4;
}
.casa-photo img { width: 100%; height: 100%; object-fit: contain; object-position: center; will-change: transform; }

.casa-copy { position: relative; z-index: 2; }
.casa-icon { width: 80px; height: 80px; margin-bottom: 22px; }
.casa-icon img { width: 100%; height: 100%; object-fit: contain; }
.casa-icon .ph { background: transparent !important; }
.casa-copy h1 {
  font-size: clamp(40px, 5vw, 70px);
  line-height: 1.02;
  letter-spacing: -.015em;
}
.casa-copy h1 .accent {
  color: var(--gold-text);
  display: inline-block;
  text-decoration: underline;
  text-decoration-thickness: 4px;
  text-underline-offset: 10px;
  text-decoration-color: rgba(132,187,60,.55);
}
.casa-copy .lead {
  margin: 26px 0 0;
  font-size: clamp(17px, 1.5vw, 21px);
  color: var(--ink-2);
  max-width: 560px;
}

@media (max-width: 900px) {
  .casa-hero { padding: 48px 0 80px; }
  .casa-grid { grid-template-columns: 1fr; gap: 40px; }
  .casa-copy .lead { max-width: none; }
  .casa-hero .big-circle { width: 360px; height: 360px; right: -130px; }
}

/* ---------- GALERÍA ---------- */
.casa-gallery {
  padding: 10px 0 100px;
  background: linear-gradient(180deg, #e6efd5 0%, #eef4e2 100%);
}
.gallery-row {
  display: flex;
  gap: 22px;
  justify-content: center;
  align-items: center;
}
.g-item {
  margin: 0;
  height: clamp(240px, 33vw, 460px);
  flex: 0 0 auto;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 26px 54px -28px rgba(60,75,25,.5);
  transition: transform .45s cubic-bezier(.2,.7,.3,1), box-shadow .45s ease;
  position: relative;
  z-index: 1;
}
.g-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.g-vert { aspect-ratio: 0.56; }
.g-wide { aspect-ratio: 1.33; }
.g-item:hover {
  transform: scale(1.07);
  box-shadow: 0 40px 80px -26px rgba(60,75,25,.6);
  z-index: 2;
}
@media (max-width: 760px) {
  .gallery-row {
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 10px;
    -webkit-overflow-scrolling: touch;
  }
  .g-item { height: 300px; }
}

/* ---------- SUEÑO ---------- */
.sueno-section {
  padding: 80px 0 100px;
  background: linear-gradient(180deg, #eef4e2 0%, #e6efd5 100%);
}
.sueno-title {
  font-size: clamp(24px, 3.5vw, 42px);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  max-width: 760px;
  margin: 0 auto 56px;
  color: #1a1a1a;
}
.sueno-scroll {
  overflow: hidden;
  padding: 10px 0 30px;
}
.sueno-track {
  display: flex;
  gap: 24px;
  width: max-content;
  animation: scroll-left 35s linear infinite;
}
.sueno-track:hover {
  animation-play-state: paused;
}
@keyframes scroll-left {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.sueno-item {
  margin: 0;
  width: clamp(280px, 30vw, 420px);
  height: clamp(200px, 22vw, 300px);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 20px 50px -20px rgba(60,75,25,.4);
  flex-shrink: 0;
  transition: transform .4s cubic-bezier(.2,.7,.3,1), box-shadow .4s ease;
}
.sueno-item:hover {
  transform: scale(1.04);
  box-shadow: 0 30px 60px -18px rgba(60,75,25,.55);
}
.sueno-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
/* ---------- VEN Y CONÓCENOS ---------- */
.ven-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 100px 0;
  text-align: center;
}
.ven-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.ven-bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
}
.ven-overlay {
  position: absolute;
  inset: 0;
  background: rgba(120, 180, 50, 0.72);
}
.ven-inner {
  position: relative;
  z-index: 1;
  color: white;
}
.ven-heart {
  width: 48px; height: 48px;
  margin-bottom: 20px;
}
.ven-inner h2 {
  font-size: clamp(32px, 5vw, 58px);
  font-weight: 700;
  margin-bottom: 16px;
  color: white;
}
.ven-inner p {
  font-size: clamp(16px, 1.8vw, 22px);
  color: rgba(255,255,255,0.9);
  max-width: 680px;
  margin: 0 auto 36px;
}
.btn-ven {
  display: inline-block;
  background: white;
  color: #7fb23a;
  font-weight: 700;
  font-size: 18px;
  padding: 16px 44px;
  border-radius: 100px;
  text-decoration: none;
  transition: transform .3s ease, box-shadow .3s ease;
  box-shadow: 0 8px 30px rgba(0,0,0,0.15);
}
.btn-ven:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.2);
}

/* ---------- ENCUÉNTRANOS ---------- */
.encuentranos-section {
  padding: 80px 0 100px;
  background: white;
}
.encuentranos-title {
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 700;
  text-align: center;
  margin-bottom: 12px;
  color: var(--ink);
}
.encuentranos-sub {
  text-align: center;
  font-size: clamp(16px, 1.5vw, 20px);
  color: var(--ink-2);
  max-width: 600px;
  margin: 0 auto 40px;
}
.mapa-wrap {
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 20px 60px -20px rgba(0,0,0,0.2);
}
.maps-btn-wrap {
  text-align: center;
  margin-top: 28px;
}
.btn-maps {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--gold-deep);
  color: white;
  font-weight: 700;
  font-size: 17px;
  padding: 16px 36px;
  border-radius: 100px;
  text-decoration: none;
  transition: transform .3s ease, box-shadow .3s ease;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}
.btn-maps svg { width: 20px; height: 20px; }
.btn-maps:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(0,0,0,0.2);
}