:root{
      --brand-1:#1e81b5; /* primario */
      --brand-2:#78b3d2; /* secundario */
      --brand-3:#f8f8f8; /* bg suave */
      --brand-4:#ececec; /* base clara */
      --brand-accent:#cd3300; /* CTA */
      --text:#0b1b2b;
    }
    html {scroll-behavior:smooth;}
    body{color:var(--text); background:var(--brand-4);}
    .navbar{background:rgba(255,255,255,.9); backdrop-filter:saturate(160%) blur(6px);}
    .btn-accent{background:var(--brand-accent); color:#fff;}
    .btn-accent:hover{background:#a32700; color:#fff;}
    .btn-outline-accent{border-color:var(--brand-accent); color:var(--brand-accent);}
    .btn-outline-accent:hover{background:var(--brand-accent); color:#fff;}
    .text-brand{color:var(--brand-1)!important;}
    .bg-soft{background:var(--brand-3);}
    .kpi{border-right:1px solid #ddd;}
    .kpi:last-child{border-right:none;}
    .badge-pill{border-radius:2rem;}
    .RemaxLogo-design{height: 2.5rem;}
    /* HERO */
    .letter-spacing-1{ letter-spacing:.12em; }
 
    .hero{
      position:relative; min-height:72vh; display:grid; place-items:center;
      color:#fff;
    }
 
    .hero video {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      z-index: -1;
    }

    .hero-video {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -1;
      overflow: hidden;
    }

    .hero-video iframe {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 100vw;
      height: 56.25vw; /* 16:9 aspect ratio */
      min-height: 100vh;
      min-width: 177.77vh; /* 16:9 aspect ratio */
      transform: translate(-50%, -50%);
      pointer-events: none;
    }
 
    .hero::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(to bottom, rgba(30,129,181,.25), rgba(30,129,181,.15));
      z-index: 0;
    }
    .hero .card{
      background:rgba(11,27,43,.7); border:1px solid rgba(255,255,255,.15); color:#fff;
    }
/* GALLERY */
.gallery img{aspect-ratio: 4/3; object-fit:cover; border-radius:.5rem;}

/* Gallery Modal Styles */
#galleryModal .modal-content {
  background: rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(10px);
}

#galleryModal .modal-dialog {
  max-width: 95vw;
  max-height: 95vh;
}

#galleryModal .modal-body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
}

#galleryModal .modal-body img {
  max-height: 80vh;
  max-width: 90vw;
  object-fit: contain;
  border-radius: 0.5rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

#galleryModal .btn-close {
  filter: invert(1);
  opacity: 0.8;
}

#galleryModal .btn-close:hover {
  opacity: 1;
}

.gallery-image {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.gallery-image:hover {
  transform: scale(1.02);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* AMENITIES ICON LIST */
    .amenity i{font-size:1.25rem; color:var(--brand-1);}
    /* MAP */
    .map-embed{min-height:360px; border:0; width:100%; border-radius:.5rem;}
    /* FOOTER */
    footer{background:#0f2233; color:#dfe9ef;}
    footer a{color:#dfe9ef; text-decoration:none;}
    footer a:hover{opacity:.85;}
    /* Accessibility helpers */
    .focus-ring:focus{outline:3px solid var(--brand-2); outline-offset:2px;}

    /* Unidades / Swiper styles */
    .unidades-section{padding:3.5rem 0;}
    .unidades-swiper .swiper-slide{display:flex;justify-content:center;align-items:start}
    .unidades-swiper .card{max-width:880px}
    .unidades-swiper .card img{height:420px;object-fit:cover;border-radius:.5rem}
    .unidades-thumbs .swiper-slide{width:90px;height:70px;opacity:.6;cursor:pointer;padding:4px}
    .unidades-thumbs .swiper-slide-thumb-active{opacity:1;border:2px solid var(--brand-1);border-radius:.5rem}
    .unidades-thumbs img{width:100%;height:100%;object-fit:cover;border-radius:.375rem}
    .swiper-button-prev, .swiper-button-next{color:var(--brand-1)}
    .swiper-pagination-bullet{background:var(--brand-2)}
    @media (max-width:767px){
      .unidades-swiper .card img{height:260px}
      .unidades-thumbs .swiper-slide{width:72px;height:56px}
      /* KPIs mobile: remove borders and add spacing */
      .kpi{border-right:none; border-bottom:1px solid #ddd; padding-bottom:1rem; margin-bottom:1rem;}
      .kpi:last-child{border-bottom:none; margin-bottom:0; padding-bottom:0;}
      /* Hero adjustments */
      .hero{min-height:85vh;}
      .hero .display-5{font-size:2rem;}
      .hero .lead{font-size:1rem;}
      /* Buttons full width on mobile */
      .hero .btn-lg{width:100%; padding:0.75rem 1rem;}
      /* Gallery images more square on mobile */
      .gallery img{aspect-ratio: 1/1;}
      /* Amenity items better spacing */
      .amenity{padding:0.75rem; text-align:center;}
      /* Navbar brand smaller */
      .RemaxLogo-design{height:2rem;}
      /* Experience cards better padding on mobile */
      .card-body{padding:1.25rem;}
      /* Lifestyle section text alignment */
      #lifestyle h2{font-size:1.5rem;}
      #lifestyle p{font-size:0.95rem; line-height:1.6;}
      /* Location list items better spacing */
      #location ul li{font-size:0.9rem;}
      /* Contact section heading */
      #contacto h2{font-size:1.75rem;}
      /* Form labels and inputs */
      .form-label{font-size:0.9rem;}
      .form-control, .form-select{font-size:0.95rem;}
      /* Footer buttons full width on mobile */
      footer .btn{width:100%; text-align:center;}
      /* Footer social icons */
      footer .bi{font-size:1.5rem;}
      /* Better spacing for footer links */
      footer .small{font-size:0.85rem;}
      /* Navbar collapse better padding */
      .navbar-collapse{padding-top:1rem;}
      /* Section headings */
      section h2{font-size:1.75rem; margin-bottom:1.25rem;}
      /* Better line height for mobile */
      body{line-height:1.6;}
    }
/* Video embed styles */
.unidades-section .ratio { background:#000; }
.video-embed{border:0;width:100%;height:100%;}

/* RE/MAX RAU button - white outline, no hover effects */
.remax-rau-btn {
border-color: #ffffff !important;
color: #000000 !important;
}
    
.remax-rau-btn:hover {
background-color: transparent !important;
border-color: #ffffff !important;
color: #000000 !important;
}

/* ========================================
   INTERSECTION OBSERVER ANIMATIONS
======================================== */

/* Initial hidden states */
.fade-in,
.slide-up,
.slide-down,
.slide-in-left,
.slide-in-right,
.scale-in,
.zoom-in {
  opacity: 0;
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-in {
  opacity: 0;
}

.slide-up {
  transform: translateY(50px);
}

.slide-down {
  transform: translateY(-50px);
}

.slide-in-left {
  transform: translateX(-60px);
}

.slide-in-right {
  transform: translateX(60px);
}

.scale-in {
  transform: scale(0.9);
}

.zoom-in {
  transform: scale(0.85);
}

/* Active/visible states */
.fade-in.animate,
.slide-up.animate,
.slide-down.animate,
.slide-in-left.animate,
.slide-in-right.animate,
.scale-in.animate,
.zoom-in.animate {
  opacity: 1;
  transform: translate(0) scale(1);
}

/* Stagger delays for multiple elements */
.animate-delay-1 { transition-delay: 0.1s; }
.animate-delay-2 { transition-delay: 0.2s; }
.animate-delay-3 { transition-delay: 0.3s; }
.animate-delay-4 { transition-delay: 0.4s; }
.animate-delay-5 { transition-delay: 0.5s; }
.animate-delay-6 { transition-delay: 0.6s; }

/* Smooth animation for cards */
.card-animated {
  opacity: 0;
  transform: translateY(30px) scale(0.96);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.card-animated.animate {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Gallery images animation */
.gallery-item {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.gallery-item.animate {
  opacity: 1;
  transform: scale(1);
}

/* Lifestyle blocks animation */
.lifestyle-block {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

.lifestyle-block.animate {
  opacity: 1;
  transform: translateY(0);
}