/* ─── TOKENS ────────────────────────────────────────────── */
    :root {
      --lago:    #1B4F72;   /* azul laguna profundo */
      --lago-lt: #2E86C1;   /* azul cielo boyacense */
      --tierra:  #6B3A2A;   /* tierra arcillosa */
      --musgo:   #3D5A3E;   /* verde páramo */
      --musgo-lt:#5A7A3A;   /* verde hoja */
      --crema:   #F7F3EE;   /* niebla amanecer */
      --stone:   #E8E0D6;   /* piedra arenisca */
      --ink:     #1A1A1A;
      --muted:   #6B6560;
      --white:   #FFFFFF;
      --radius:  8px;
      --nav-h:   68px;
    }

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

    html { scroll-behavior: smooth; }

    body {
      font-family: 'Inter', sans-serif;
      background: var(--crema);
      color: var(--ink);
      overflow-x: hidden;
    }

    /* ─── NAV ───────────────────────────────────────────────── */
    nav {
      position: fixed; top: 0; left: 0; right: 0;
      height: var(--nav-h);
      display: flex; align-items: center; justify-content: space-between;
      padding: 0 2rem;
      background: rgba(27,79,114,0.92);
      backdrop-filter: blur(12px);
      z-index: 100;
      transition: background .3s;
    }
    nav.scrolled { background: rgba(26,26,26,0.97); }

    .nav-brand {
      display: flex; align-items: center; gap: .6rem;
      text-decoration: none; color: var(--white);
    }
    .nav-brand .logo-mark {
      width: 36px; height: 36px;
      background: var(--lago-lt);
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: .75rem; font-weight: 700; color: var(--white);
      letter-spacing: .5px;
    }

    .logo-img {
      width: 80%;
      height: 80%;
      object-fit: contain;
    }

    .nav-brand span { font-family: 'Playfair Display', serif; font-size: 1rem; font-weight: 700; line-height: 1.1; }
    .nav-brand small { font-size: .68rem; font-weight: 300; opacity: .75; display: block; }

    .nav-links {
      display: flex; gap: 1.6rem; list-style: none;
    }
    .nav-links a {
      text-decoration: none; color: rgba(255,255,255,.85);
      font-size: .82rem; font-weight: 500; letter-spacing: .02em;
      transition: color .2s;
    }
    .nav-links a:hover { color: var(--white); }

    .nav-cta {
      display: flex; gap: .7rem; align-items: center;
    }
    .btn-outline-nav {
      padding: .42rem 1rem; border: 1.5px solid rgba(255,255,255,.5);
      color: var(--white); text-decoration: none; border-radius: var(--radius);
      font-size: .8rem; font-weight: 500; transition: all .2s;
    }
    .btn-outline-nav:hover { background: rgba(255,255,255,.1); border-color: var(--white); }
    .btn-solid-nav {
      padding: .42rem 1rem; background: var(--lago-lt);
      color: var(--white); text-decoration: none; border-radius: var(--radius);
      font-size: .8rem; font-weight: 600; transition: background .2s;
    }
    .btn-solid-nav:hover { background: var(--lago); }

    .hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; }
    .hamburger span { width: 24px; height: 2px; background: var(--white); border-radius: 2px; transition: .3s; }

    /* ─── HERO ──────────────────────────────────────────────── */
    .hero {
      position: relative;
      min-height: 100vh;
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      text-align: center;
      overflow: hidden;
      background: linear-gradient(160deg, #0d2e47 0%, #1B4F72 40%, #3D5A3E 100%);
    }

    /* Animated water ripple background */
    .hero-bg {
      position: absolute; inset: 0;
      background:
        radial-gradient(ellipse 80% 60% at 50% 80%, rgba(46,134,193,.35) 0%, transparent 60%),
        radial-gradient(ellipse 50% 40% at 20% 30%, rgba(61,90,62,.4) 0%, transparent 55%),
        radial-gradient(ellipse 60% 50% at 80% 20%, rgba(27,79,114,.5) 0%, transparent 60%);
      animation: drift 12s ease-in-out infinite alternate;
    }
    @keyframes drift {
      0%   { transform: scale(1) translate(0,0); opacity: .8; }
      100% { transform: scale(1.06) translate(-15px, 8px); opacity: 1; }
    }

    /* Floating water lines */
    .hero-waves {
      position: absolute; bottom: 0; left: 0; right: 0;
      height: 200px; overflow: hidden;
    }
    .hero-waves svg { width: 100%; height: 100%; }

    .hero-eyebrow {
      position: relative; z-index: 2;
      font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
      color: rgba(255,255,255,.65);
      background: rgba(255,255,255,.08);
      border: 1px solid rgba(255,255,255,.18);
      padding: .35rem 1rem; border-radius: 20px;
      margin-bottom: 1.4rem;
    }
    .hero h1 {
      position: relative; z-index: 2;
      font-family: 'DM Serif Display', serif;
      font-size: clamp(3rem, 8vw, 6.5rem);
      color: var(--white);
      line-height: 1.0;
      margin-bottom: 1rem;
    }
    .hero h1 em {
      font-style: italic;
      color: #7EC8E3;
    }
    .hero-sub {
      position: relative; z-index: 2;
      font-size: clamp(.9rem, 2vw, 1.15rem);
      color: rgba(255,255,255,.8);
      max-width: 540px;
      line-height: 1.7;
      margin-bottom: 2.2rem;
      font-weight: 300;
    }
    .hero-btns {
      position: relative; z-index: 2;
      display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center;
    }
    .btn-primary {
      padding: .85rem 2rem; background: var(--white); color: var(--lago);
      text-decoration: none; border-radius: var(--radius);
      font-weight: 700; font-size: .92rem; letter-spacing: .02em;
      transition: transform .2s, box-shadow .2s;
      box-shadow: 0 4px 20px rgba(0,0,0,.25);
    }
    .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(0,0,0,.3); }
    .btn-secondary {
      padding: .85rem 2rem; border: 2px solid rgba(255,255,255,.55); color: var(--white);
      text-decoration: none; border-radius: var(--radius);
      font-weight: 600; font-size: .92rem;
      transition: background .2s, border-color .2s;
    }
    .btn-secondary:hover { background: rgba(255,255,255,.12); border-color: var(--white); }

    .hero-scroll {
      position: absolute; bottom: 3.5rem; left: 50%; transform: translateX(-50%);
      z-index: 2; display: flex; flex-direction: column; align-items: center;
      gap: .5rem; color: rgba(255,255,255,.5); font-size: .72rem; letter-spacing: .1em;
      text-transform: uppercase;
    }
    .scroll-line {
      width: 1px; height: 48px;
      background: linear-gradient(to bottom, rgba(255,255,255,.6), transparent);
      animation: scrollPulse 2s ease-in-out infinite;
    }
    @keyframes scrollPulse {
      0%, 100% { opacity: .5; transform: scaleY(1); }
      50% { opacity: 1; transform: scaleY(.5); }
    }

    /* ─── STATS BAR ─────────────────────────────────────────── */
    .stats-bar {
      background: var(--lago);
      display: flex; justify-content: center; flex-wrap: wrap; gap: 0;
    }
    .stat {
      flex: 1; min-width: 140px; max-width: 240px;
      padding: 1.4rem 1.5rem; text-align: center;
      border-right: 1px solid rgba(255,255,255,.12);
      color: var(--white);
    }
    .stat:last-child { border-right: none; }
    .stat-num {
      font-family: 'Playfair Display', serif;
      font-size: 2rem; font-weight: 700; display: block;
    }
    .stat-lbl { font-size: .72rem; font-weight: 400; opacity: .75; text-transform: uppercase; letter-spacing: .08em; }

    /* ─── SECTION LAYOUT ────────────────────────────────────── */
    section { padding: 5rem 2rem; }
    .section-inner { max-width: 1200px; margin: 0 auto; }
    .section-header { margin-bottom: 2.8rem; }
    .section-eyebrow {
      font-size: .72rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase;
      color: var(--lago-lt); margin-bottom: .5rem;
    }
    .section-title {
      font-family: 'Playfair Display', serif;
      font-size: clamp(1.6rem, 4vw, 2.4rem); font-weight: 700;
      color: var(--ink); line-height: 1.15;
    }
    .section-link {
      margin-left: auto;
      font-size: .85rem; font-weight: 600; color: var(--lago-lt);
      text-decoration: none; letter-spacing: .02em;
      transition: gap .2s;
      display: flex; align-items: center; gap: .3rem;
    }
    .section-link:hover { text-decoration: underline; }
    .section-top { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }

    /* ─── CARDS GRID ────────────────────────────────────────── */
    .cards-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
      gap: 1.4rem;
    }

    .card {
      background: var(--white);
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 2px 12px rgba(0,0,0,.07);
      transition: transform .25s, box-shadow .25s;
      cursor: pointer;
      text-decoration: none; color: inherit;
      display: flex; flex-direction: column;
    }
    .card:hover { transform: translateY(-4px); box-shadow: 0 10px 32px rgba(0,0,0,.13); }

    .card-img {
      width: 100%; aspect-ratio: 4/3; object-fit: cover;
      background: var(--stone);
      display: flex; align-items: center; justify-content: center;
      font-size: 2.5rem;
    }
    .card-img img { width: 100%; height: 100%; object-fit: cover; }

    .card-body { padding: 1.1rem 1.2rem 1.4rem; flex: 1; display: flex; flex-direction: column; }
    .card-tag {
      font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
      color: var(--lago-lt); margin-bottom: .4rem;
    }
    .card-title { font-family: 'Playfair Display', serif; font-size: 1.05rem; font-weight: 700; margin-bottom: .5rem; line-height: 1.3; }
    .card-desc { font-size: .84rem; color: var(--muted); line-height: 1.6; flex: 1; }
    .card-footer {
      padding: .8rem 1.2rem; border-top: 1px solid var(--stone);
      display: flex; align-items: center; justify-content: space-between;
      font-size: .78rem; color: var(--muted);
    }
    .badge {
      font-size: .68rem; font-weight: 600; padding: .2rem .6rem;
      border-radius: 20px; text-transform: uppercase; letter-spacing: .06em;
    }
    .badge-open  { background: #D5F0D8; color: #2A6B30; }
    .badge-free  { background: #D6E8F8; color: #1B4F72; }
    .badge-new   { background: #FDE8D0; color: #7B3F10; }

    /* ─── FEATURED HERO CARD (Laguna) ───────────────────────── */
    .feature-card {
      background: var(--lago);
      border-radius: 16px; overflow: hidden;
      display: grid; grid-template-columns: 1fr 1fr;
      min-height: 380px; margin-bottom: 3rem;
      box-shadow: 0 8px 40px rgba(27,79,114,.25);
    }
    .feature-card-body {
      padding: 3rem; display: flex; flex-direction: column; justify-content: center;
      color: var(--white);
    }
    .feature-card-body .badge { background: rgba(255,255,255,.15); color: var(--white); margin-bottom: 1rem; display: inline-block; }
    .feature-card-body h2 { font-family: 'DM Serif Display', serif; font-size: 2.2rem; margin-bottom: 1rem; line-height: 1.15; }
    .feature-card-body p { font-size: .95rem; opacity: .85; line-height: 1.7; margin-bottom: 1.5rem; }
    .feature-card-img {
      background: linear-gradient(135deg, #1a6b8a 0%, #2E86C1 50%, #1B4F72 100%);
      position: relative; overflow: hidden;
      display: flex; align-items: center; justify-content: center;
      font-size: 8rem;
    }
    .feature-card-img::after {
      content: '';
      position: absolute; inset: 0;
      background: radial-gradient(ellipse at center, rgba(126,200,227,.35) 0%, transparent 70%);
      animation: ripple 4s ease-in-out infinite;
    }
    @keyframes ripple { 0%,100%{transform:scale(1);opacity:.6} 50%{transform:scale(1.1);opacity:1} }

    /* ─── RUTAS ─────────────────────────────────────────────── */
    .rutas-grid {
      display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1.4rem;
    }
    .ruta-card {
      background: var(--white); border-radius: 12px; padding: 1.6rem;
      display: flex; gap: 1.2rem; align-items: flex-start;
      box-shadow: 0 2px 12px rgba(0,0,0,.07);
      transition: transform .25s, box-shadow .25s; cursor: pointer;
      text-decoration: none; color: inherit;
    }
    .ruta-card:hover { transform: translateY(-3px); box-shadow: 0 8px 28px rgba(0,0,0,.12); }
    .ruta-icon {
      width: 52px; height: 52px; border-radius: 12px; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center; font-size: 1.5rem;
    }
    .ruta-icon-lago  { background: #D6E8F8; }
    .ruta-icon-monte { background: #D5F0D8; }
    .ruta-icon-alma  { background: #FDE8D0; }
    .ruta-meta { font-size: .76rem; color: var(--muted); margin-top: .4rem; }
    .ruta-meta span + span::before { content: ' · '; }

    /* ─── NOTICIAS ──────────────────────────────────────────── */
    .noticias-list { display: flex; flex-direction: column; gap: 1rem; }
    .noticia-item {
      background: var(--white); border-radius: 10px; padding: 1.3rem 1.5rem;
      display: flex; gap: 1.4rem; align-items: center;
      box-shadow: 0 2px 8px rgba(0,0,0,.05);
      transition: box-shadow .2s; cursor: pointer; text-decoration: none; color: inherit;
    }
    .noticia-item:hover { box-shadow: 0 6px 20px rgba(0,0,0,.1); }
    .noticia-date {
      min-width: 52px; text-align: center;
      font-family: 'Playfair Display', serif;
    }
    .noticia-date .day { font-size: 1.6rem; font-weight: 700; color: var(--lago); display: block; line-height: 1; }
    .noticia-date .month { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
    .noticia-content h4 { font-size: .95rem; font-weight: 600; margin-bottom: .2rem; }
    .noticia-content p { font-size: .82rem; color: var(--muted); line-height: 1.5; }

    /* ─── EVENTOS ───────────────────────────────────────────── */
    .eventos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap: 1.4rem; }
    .evento-card {
      background: var(--white); border-radius: 12px; overflow: hidden;
      box-shadow: 0 2px 12px rgba(0,0,0,.07); text-decoration: none; color: inherit;
      transition: transform .25s, box-shadow .25s;
    }
    .evento-card:hover { transform: translateY(-3px); box-shadow: 0 8px 28px rgba(0,0,0,.12); }
    .evento-banner {
      height: 130px; display: flex; align-items: center; justify-content: center;
      font-size: 3.5rem;
    }
    .evento-body { padding: 1.1rem 1.2rem 1.4rem; }
    .evento-fecha { font-size: .76rem; color: var(--lago-lt); font-weight: 600; margin-bottom: .4rem; text-transform: uppercase; letter-spacing: .06em; }
    .evento-body h4 { font-family: 'Playfair Display', serif; font-size: 1.05rem; font-weight: 700; margin-bottom: .4rem; }
    .evento-body p { font-size: .83rem; color: var(--muted); line-height: 1.55; }

    /* ─── GASTRONOMIA ───────────────────────────────────────── */
    .gastro-section { background: var(--lago); }
    .gastro-section .section-eyebrow { color: #7EC8E3; }
    .gastro-section .section-title { color: var(--white); }
    .gastro-section .section-link { color: #7EC8E3; }
    .gastro-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px,1fr)); gap: 1.2rem; margin-top: 2.5rem; }
    .gastro-card {
      background: rgba(255,255,255,.09);
      border: 1px solid rgba(255,255,255,.15);
      border-radius: 12px; padding: 1.5rem;
      color: var(--white); text-decoration: none;
      transition: background .2s, transform .25s;
    }
    .gastro-card:hover { background: rgba(255,255,255,.16); transform: translateY(-3px); }
    .gastro-card .emoji { font-size: 2.2rem; margin-bottom: .8rem; display: block; }
    .gastro-card h4 { font-family: 'Playfair Display', serif; font-size: 1.05rem; margin-bottom: .4rem; }
    .gastro-card p { font-size: .82rem; opacity: .8; line-height: 1.55; }

    /* ─── COMO LLEGAR ───────────────────────────────────────── */
    .llegar-section { background: var(--stone); }
    .llegar-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 3rem; align-items: center; }
    .llegar-options { display: flex; flex-direction: column; gap: 1rem; }
    .llegar-item {
      background: var(--white); border-radius: 10px; padding: 1.2rem 1.4rem;
      display: flex; gap: 1rem; align-items: center;
      box-shadow: 0 2px 8px rgba(0,0,0,.05);
    }
    .llegar-item .icon { font-size: 1.8rem; flex-shrink: 0; }
    .llegar-item h5 { font-size: .92rem; font-weight: 600; margin-bottom: .15rem; }
    .llegar-item p { font-size: .8rem; color: var(--muted); line-height: 1.5; }
    .map-placeholder {
      background: linear-gradient(135deg, #c8d8e8 0%, #a8c8d8 100%);
      border-radius: 12px; height: 320px; display: flex; align-items: center;
      justify-content: center; flex-direction: column; gap: .8rem;
      font-size: 3.5rem;
      box-shadow: 0 4px 20px rgba(27,79,114,.15);
    }
    .map-placeholder p { font-size: .9rem; color: var(--lago); font-weight: 600; margin: 0; }

    /* ─── HOTELES ───────────────────────────────────────────── */
    .hotel-card {
      background: var(--white); border-radius: 14px; overflow: hidden;
      box-shadow: 0 2px 14px rgba(0,0,0,.08);
      transition: transform .25s, box-shadow .25s;
      text-decoration: none; color: inherit; display: flex; flex-direction: column;
    }
    .hotel-card:hover { transform: translateY(-4px); box-shadow: 0 12px 36px rgba(0,0,0,.13); }

    .hotel-img  {
    height:220px;
    background:linear-gradient(135deg,#1B4F72,#2E86C1);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:70px;
    position:relative;
    }

   /* .hotel-img {
      height: 180px; 
      display: flex; 
      align-items: center; 
      justify-content: center;
      font-size: 4rem; 
      position: relative;
    }
*/
    .hotel-estrellas {
      position: absolute; bottom: .7rem; left: 1rem;
      background: rgba(0,0,0,.55); color: #FFD700;
      font-size: .78rem; padding: .2rem .6rem; border-radius: 20px; letter-spacing: .06em;
    }
    .hotel-body { padding: 1.1rem 1.3rem 1rem; flex: 1; display: flex; flex-direction: column; }
    .hotel-tipo { font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--musgo-lt); margin-bottom: .35rem; }
    .hotel-body h4 { font-family: 'Playfair Display', serif; font-size: 1.08rem; font-weight: 700; margin-bottom: .4rem; }
    .hotel-body p { font-size: .83rem; color: var(--muted); line-height: 1.55; flex: 1; }
    .hotel-footer {
      padding: .85rem 1.3rem; border-top: 1px solid var(--stone);
      display: flex; align-items: center; justify-content: space-between;
    }
    .hotel-precio { font-size: .82rem; color: var(--muted); }
    .hotel-precio strong { font-size: 1rem; color: var(--ink); font-weight: 700; }
    .hotel-amenities { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .6rem; }
    .amenity {
      font-size: .68rem; background: var(--stone); padding: .15rem .55rem;
      border-radius: 20px; color: var(--muted); font-weight: 500;
    }
    .hotel-btn {
      display: inline-block; padding: .42rem 1rem;
      background: var(--lago); color: var(--white);
      text-decoration: none; border-radius: var(--radius);
      font-size: .78rem; font-weight: 600; transition: background .2s;
    }
    .hotel-btn:hover { background: var(--lago-lt); }

    /* ─── PROPIEDADES ────────────────────────────────────────── */
    .prop-section { background: var(--crema); }
    .prop-filters {
      display: flex; gap: .7rem; flex-wrap: wrap; margin-bottom: 2rem;
    }
    .filter-btn {
      padding: .45rem 1.1rem; border: 1.5px solid var(--stone);
      background: var(--white); border-radius: 20px;
      font-size: .8rem; font-weight: 500; cursor: pointer;
      transition: all .2s; color: var(--ink);
    }
    .filter-btn:hover, .filter-btn.active {
      background: var(--lago); border-color: var(--lago); color: var(--white);
    }
    .prop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px,1fr)); gap: 1.5rem; }
    .prop-card {
      background: var(--white); border-radius: 14px; overflow: hidden;
      box-shadow: 0 2px 14px rgba(0,0,0,.08);
      transition: transform .25s, box-shadow .25s;
      text-decoration: none; color: inherit;
    }
    .prop-card:hover { transform: translateY(-4px); box-shadow: 0 12px 36px rgba(0,0,0,.13); }
    .prop-img {
      height: 200px; display: flex; align-items: center; justify-content: center;
      font-size: 4rem; position: relative;
    }



.prop-card.compact{
  background:#fff;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 4px 16px rgba(0,0,0,.08);
  transition:.25s;
  display:flex;
  flex-direction:column;
}

.prop-card.compact:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 30px rgba(0,0,0,.14);
}

.prop-card.compact .prop-img{
  height:150px;
  font-size:3rem;
}

.prop-content{
  padding:1rem 1.2rem;
}

.prop-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:1rem;
}

.prop-header h4{
  margin:.25rem 0;
  font-size:1rem;
  line-height:1.3;
}

.prop-price{
  font-weight:700;
  color:var(--lago);
  font-size:1.15rem;
  white-space:nowrap;
}

.prop-ubicacion{
  margin:.5rem 0 .8rem;
  color:var(--muted);
  font-size:.82rem;
}

.prop-specs{
  display:flex;
  gap:.5rem;
  flex-wrap:wrap;
}

.prop-specs span{
  background:#f3f5f7;
  padding:.3rem .6rem;
  border-radius:20px;
  font-size:.75rem;
}

.prop-actions{
  margin-top:1rem;
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.prop-negociable{
  font-size:.75rem;
  color:#666;
}

.prop-contacto{
  border:none;
  background:var(--musgo);
  color:#fff;
  padding:.55rem 1rem;
  border-radius:8px;
  font-weight:600;
  cursor:pointer;
}

.prop-img {
    position: relative;
    height: 220px;
    overflow: hidden;
    border-radius: 14px 14px 0 0;
}

.prop-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


    .prop-tag-img {
      position: absolute; top: .8rem; left: .8rem;
      font-size: .7rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
      padding: .25rem .75rem; border-radius: 20px;
    }
    .prop-tag-venta   { background: #1B4F72; color: #fff; }
    .prop-tag-arriendo { background: #3D5A3E; color: #fff; }
    .prop-tag-nuevo   { background: #C0392B; color: #fff; }
    .prop-body { padding: 1.2rem 1.4rem 1rem; }
    .prop-tipo { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--tierra); margin-bottom: .35rem; }
    .prop-body h4 { font-family: 'Playfair Display', serif; font-size: 1.08rem; font-weight: 700; margin-bottom: .3rem; line-height: 1.25; }
    .prop-ubicacion { font-size: .8rem; color: var(--muted); margin-bottom: .8rem; }
    .prop-specs {
      display: flex; gap: 1rem; flex-wrap: wrap;
      font-size: .78rem; color: var(--muted); margin-bottom: .8rem;
    }
    .prop-specs span { display: flex; align-items: center; gap: .25rem; }
    .prop-footer {
      padding: .85rem 1.4rem; border-top: 1px solid var(--stone);
      display: flex; align-items: center; justify-content: space-between;
    }
    .prop-precio { font-family: 'Playfair Display', serif; font-size: 1.15rem; font-weight: 700; color: var(--lago); }
    .prop-precio small { font-family: 'Inter', sans-serif; font-size: .72rem; font-weight: 400; color: var(--muted); display: block; line-height: 1; }
    .prop-contacto {
      display: inline-block; padding: .42rem 1rem;
      background: var(--musgo); color: var(--white);
      text-decoration: none; border-radius: var(--radius);
      font-size: .78rem; font-weight: 600; transition: background .2s;
    }
    .prop-contacto:hover { background: var(--musgo-lt); }
    .prop-cta-banner {
      background: linear-gradient(135deg, var(--musgo) 0%, var(--musgo-lt) 100%);
      border-radius: 14px; padding: 2.5rem; margin-top: 2rem;
      display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1.5rem;
      color: var(--white);
    }
    .prop-cta-banner h4 { font-family: 'Playfair Display', serif; font-size: 1.4rem; margin-bottom: .4rem; }
    .prop-cta-banner p { font-size: .88rem; opacity: .88; max-width: 480px; line-height: 1.6; }
    .btn-cta-banner {
      display: inline-block; padding: .85rem 2rem;
      background: var(--white); color: var(--musgo);
      text-decoration: none; border-radius: var(--radius);
      font-weight: 700; font-size: .9rem; white-space: nowrap;
      transition: transform .2s, box-shadow .2s;
      box-shadow: 0 4px 16px rgba(0,0,0,.2);
    }
    .btn-cta-banner:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.25); }

/* ----- Mapa Interactivo ------*/

.map-container{
    position:relative;
    min-height:430px;
    border-radius:24px;
    overflow:hidden;
    box-shadow:0 10px 30px rgba(0,0,0,.12);
    background:#fff;
}

.map-container iframe{
    width:100%;
    height:100%;
    min-height:430px;
    display:block;
}

.btn-ruta{
    position:absolute;
    bottom:20px;
    right:20px;
    background:#1B4F72;
    color:#fff;
    text-decoration:none;
    padding:12px 20px;
    border-radius:12px;
    font-weight:600;
    box-shadow:0 4px 12px rgba(0,0,0,.2);
    transition:.3s;
}

.btn-ruta:hover{
    background:#154360;
    transform:translateY(-2px);
}




    /* ─── FOOTER ────────────────────────────────────────────── */
    footer {
      background: #0d1f2e; color: rgba(255,255,255,.75);
      padding: 3.5rem 2rem 2rem;
    }
    .footer-inner { max-width: 1200px; margin: 0 auto; }
    .footer-grid {
      display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 3rem;
      margin-bottom: 2.5rem;
    }
    .footer-brand .logo-mark {
      width: 40px; height: 40px; border-radius: 50%;
      background: var(--lago-lt);
      display: flex; align-items: center; justify-content: center;
      font-size: .8rem; font-weight: 700; color: var(--white);
      margin-bottom: .8rem;
    }
    .footer-brand h3 { font-family: 'Playfair Display', serif; color: var(--white); font-size: 1.1rem; margin-bottom: .5rem; }
    .footer-brand p { font-size: .83rem; line-height: 1.65; max-width: 280px; }
    footer h5 { color: var(--white); font-size: .82rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 1rem; }
    footer ul { list-style: none; display: flex; flex-direction: column; gap: .55rem; }
    footer ul a { text-decoration: none; color: rgba(255,255,255,.65); font-size: .84rem; transition: color .2s; }
    footer ul a:hover { color: var(--white); }
    .footer-bottom {
      border-top: 1px solid rgba(255,255,255,.1); padding-top: 1.5rem;
      display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .8rem;
      font-size: .78rem;
    }
    .footer-bottom a { color: rgba(255,255,255,.55); text-decoration: none; }
    .footer-bottom a:hover { color: var(--white); }

    /* ─── MOBILE NAV BOTTOM ──────────────────────────────────── */
    .mobile-nav {
      display: none;
      position: fixed; bottom: 0; left: 0; right: 0;
      background: rgba(13,31,46,.96);
      backdrop-filter: blur(12px);
      border-top: 1px solid rgba(255,255,255,.1);
      z-index: 99;
      padding: .5rem 0 max(.5rem, env(safe-area-inset-bottom));
    }
    .mobile-nav ul { display: flex; justify-content: space-around; list-style: none; }
    .mobile-nav a {
      display: flex; flex-direction: column; align-items: center; gap: .2rem;
      text-decoration: none; color: rgba(255,255,255,.6);
      font-size: .62rem; font-weight: 500; text-transform: uppercase;
      letter-spacing: .05em; padding: .3rem .8rem;
      transition: color .2s;
    }
    .mobile-nav a:hover, .mobile-nav a.active { color: #7EC8E3; }
    .mobile-nav .mn-icon { font-size: 1.2rem; }

    /* ─── RESPONSIVE ─────────────────────────────────────────── */
    @media (max-width: 900px) {
      .nav-links, .nav-cta { display: none; }
      .hamburger { display: flex; }
      .feature-card { grid-template-columns: 1fr; }
      .feature-card-img { height: 200px; font-size: 5rem; }
      .llegar-grid { grid-template-columns: 1fr; }
      .footer-grid { grid-template-columns: 1fr 1fr; }
      .mobile-nav { display: block; }
      body { padding-bottom: 70px; }
      section { padding: 3.5rem 1.2rem; }
    }
    @media (max-width: 600px) {
      .cards-grid { grid-template-columns: 1fr; }
      .footer-grid { grid-template-columns: 1fr; }
      .stats-bar { flex-direction: row; }
      .stat { min-width: 120px; }
    }

    /* ─── MOBILE MENU OVERLAY ───────────────────────────────── */
    .mobile-menu {
      display: none;
      position: fixed; inset: 0;
      background: rgba(13,31,46,.97);
      z-index: 200; flex-direction: column;
      align-items: center; justify-content: center; gap: 1.8rem;
    }
    .mobile-menu.open { display: flex; }
    .mobile-menu a {
      color: var(--white); text-decoration: none;
      font-family: 'Playfair Display', serif; font-size: 1.6rem;
      font-weight: 700; opacity: .9; transition: opacity .2s;
    }
    .mobile-menu a:hover { opacity: 1; }
    .mobile-menu-close {
      position: absolute; top: 1.5rem; right: 1.5rem;
      background: none; border: none; color: var(--white);
      font-size: 1.8rem; cursor: pointer; opacity: .75;
    }
    .mobile-menu-close:hover { opacity: 1; }

    @media (prefers-reduced-motion: reduce) {
      .hero-bg, .hero-waves, .feature-card-img::after, .scroll-line { animation: none; }
    }