{"id":4257,"date":"2026-03-09T13:48:04","date_gmt":"2026-03-09T18:48:04","guid":{"rendered":"https:\/\/stayritmo.com\/?page_id=4257"},"modified":"2026-08-31T12:59:32","modified_gmt":"2026-08-31T17:59:32","slug":"la-suite","status":"publish","type":"page","link":"https:\/\/stayritmo.com\/es\/the-suite\/","title":{"rendered":"La Suite"},"content":{"rendered":"\n<style>\n\n\/* ============================================================\n   RITMO CARTAGENA \u2014 Design System\n   A Modern Caribbean Oasis in El Laguito, Cartagena\n   ============================================================ *\/\n\n\/* --- Google Fonts --- *\/\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Cormorant:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Montserrat:wght@300;400;500;600;700&display=swap');\n\n\/* --- CSS Custom Properties --- *\/\n:root {\n  \/* Colors \u2014 Ritmo Red + Caribbean Gold + Sandy Beach *\/\n  --color-primary: #FF2236;\n  --color-primary-light: #FF4D5E;\n  --color-primary-dark: #D91A2B;\n  --color-secondary: #C87E22;\n  --color-secondary-light: #EBA92C;\n  --color-cta: #C87E22;\n  --color-cta-hover: #A86A1B;\n  --color-cta-light: #EBA92C;\n  --color-accent: #EBA92C;\n  --color-sand: #EBDEC5;\n  --color-sand-light: #F5F0E3;\n  --color-bg: #FFFDF8;\n  --color-bg-warm: #F5F0E3;\n  --color-bg-section: #EBDEC5;\n  --color-text: #2C1810;\n  --color-text-muted: #6B5744;\n  --color-text-light: #8C7A68;\n  --color-white: #FFFFFF;\n  --color-border: #DDD2BD;\n  --color-border-light: #EBDEC5;\n\n  \/* Typography *\/\n  --font-heading: 'Cormorant', Georgia, 'Times New Roman', serif;\n  --font-body: 'Montserrat', 'Segoe UI', Tahoma, sans-serif;\n\n  \/* Font Sizes \u2014 Fluid Scale *\/\n  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.8125rem);\n  --text-sm: clamp(0.8125rem, 0.75rem + 0.3vw, 0.875rem);\n  --text-base: clamp(0.9375rem, 0.875rem + 0.3vw, 1rem);\n  --text-lg: clamp(1.0625rem, 0.95rem + 0.5vw, 1.125rem);\n  --text-xl: clamp(1.1875rem, 1rem + 0.75vw, 1.3125rem);\n  --text-2xl: clamp(1.4375rem, 1.15rem + 1.2vw, 1.6875rem);\n  --text-3xl: clamp(1.75rem, 1.35rem + 1.7vw, 2.125rem);\n  --text-4xl: clamp(2.125rem, 1.5rem + 2.5vw, 2.8125rem);\n  --text-5xl: clamp(2.625rem, 1.75rem + 3.5vw, 3.75rem);\n  --text-6xl: clamp(3.25rem, 2rem + 5vw, 5rem);\n\n  \/* Font Weights *\/\n  --weight-light: 300;\n  --weight-normal: 400;\n  --weight-medium: 500;\n  --weight-semibold: 600;\n  --weight-bold: 700;\n\n  \/* Line Heights *\/\n  --leading-tight: 1.15;\n  --leading-snug: 1.3;\n  --leading-normal: 1.6;\n  --leading-relaxed: 1.75;\n\n  \/* Letter Spacing *\/\n  --tracking-tight: -0.02em;\n  --tracking-normal: 0;\n  --tracking-wide: 0.05em;\n  --tracking-wider: 0.1em;\n  --tracking-widest: 0.2em;\n\n  \/* Spacing Scale *\/\n  --space-xs: 0.25rem;\n  --space-sm: 0.5rem;\n  --space-md: 1rem;\n  --space-lg: 1.5rem;\n  --space-xl: 2rem;\n  --space-2xl: 3rem;\n  --space-3xl: 4rem;\n  --space-4xl: 6rem;\n  --space-5xl: 8rem;\n\n  \/* Layout *\/\n  --max-width: 1280px;\n  --max-width-narrow: 960px;\n  --max-width-text: 720px;\n  --nav-height: 80px;\n  --border-radius: 8px;\n  --border-radius-lg: 16px;\n  --border-radius-xl: 24px;\n\n  \/* Shadows *\/\n  --shadow-sm: 0 1px 3px rgba(44, 24, 16, 0.06);\n  --shadow-md: 0 4px 12px rgba(44, 24, 16, 0.08);\n  --shadow-lg: 0 8px 30px rgba(44, 24, 16, 0.1);\n  --shadow-xl: 0 16px 50px rgba(44, 24, 16, 0.12);\n  --shadow-gold: 0 4px 20px rgba(200, 126, 34, 0.25);\n  --shadow-red: 0 4px 20px rgba(255, 34, 54, 0.2);\n\n  \/* Transitions *\/\n  --transition-fast: 150ms ease;\n  --transition-base: 250ms ease;\n  --transition-slow: 400ms ease;\n}\n\n\/* --- Base Resets --- *\/\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n}\n\nhtml {\n  scroll-behavior: smooth;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\nbody {\n  font-family: var(--font-body);\n  font-size: var(--text-base);\n  font-weight: var(--weight-normal);\n  line-height: var(--leading-normal);\n  color: var(--color-text);\n  background-color: var(--color-bg);\n}\n\n\/* --- Typography --- *\/\nh1, h2, h3, h4, h5, h6 {\n  font-family: var(--font-heading);\n  font-weight: var(--weight-semibold);\n  line-height: var(--leading-tight);\n  color: var(--color-primary);\n}\n\nh1 { font-size: var(--text-5xl); letter-spacing: var(--tracking-tight); }\nh2 { font-size: var(--text-4xl); }\nh3 { font-size: var(--text-3xl); }\nh4 { font-size: var(--text-2xl); }\nh5 { font-size: var(--text-xl); }\nh6 { font-size: var(--text-lg); }\n\np {\n  margin-bottom: var(--space-md);\n  max-width: 70ch;\n}\n\n.text-muted { color: var(--color-text-muted); }\n.text-light { color: var(--color-text-light); }\n.text-gold { color: var(--color-cta); }\n.text-white { color: var(--color-white); }\n\n.eyebrow {\n  font-family: var(--font-body);\n  font-size: var(--text-xs);\n  font-weight: var(--weight-semibold);\n  letter-spacing: var(--tracking-widest);\n  text-transform: uppercase;\n  color: var(--color-cta);\n  margin-bottom: var(--space-sm);\n}\n\n\/* --- Buttons --- *\/\n.btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--space-sm);\n  font-family: var(--font-body);\n  font-size: var(--text-sm);\n  font-weight: var(--weight-semibold);\n  letter-spacing: var(--tracking-wide);\n  text-transform: uppercase;\n  text-decoration: none;\n  padding: 0.875rem 2rem;\n  border: 2px solid transparent;\n  border-radius: var(--border-radius);\n  cursor: pointer;\n  transition: all var(--transition-base);\n  min-height: 48px;\n}\n\n.btn-primary {\n  background: var(--color-cta);\n  color: var(--color-white);\n  border-color: var(--color-cta);\n}\n.btn-primary:hover {\n  background: var(--color-cta-hover);\n  color: var(--color-white);\n  border-color: var(--color-cta-hover);\n  box-shadow: var(--shadow-gold);\n}\n\n.btn-outline {\n  background: transparent;\n  color: var(--color-white);\n  border-color: var(--color-white);\n}\n.btn-outline:hover {\n  background: var(--color-white);\n  color: var(--color-primary);\n}\n\n.btn-outline-dark {\n  background: transparent;\n  color: var(--color-primary);\n  border-color: var(--color-primary);\n}\n.btn-outline-dark:hover {\n  background: var(--color-primary);\n  color: var(--color-white);\n}\n\n.btn-ghost {\n  background: transparent;\n  color: var(--color-cta);\n  border-color: transparent;\n  padding: 0.5rem 1rem;\n}\n.btn-ghost:hover {\n  color: var(--color-cta-hover);\n}\n\n\/* --- Layout Utilities --- *\/\n.container {\n  width: 100%;\n  max-width: var(--max-width);\n  margin: 0 auto;\n  padding: 0 var(--space-xl);\n}\n\n.container-narrow {\n  max-width: var(--max-width-narrow);\n}\n\n.section {\n  padding: var(--space-5xl) 0;\n}\n\n.section-sm {\n  padding: var(--space-3xl) 0;\n}\n\n\/* --- Grid --- *\/\n.grid {\n  display: grid;\n  gap: var(--space-xl);\n}\n.grid-2 { grid-template-columns: repeat(2, 1fr); }\n.grid-3 { grid-template-columns: repeat(3, 1fr); }\n.grid-4 { grid-template-columns: repeat(4, 1fr); }\n\n@media (max-width: 1024px) {\n  .grid-4 { grid-template-columns: repeat(2, 1fr); }\n  .grid-3 { grid-template-columns: repeat(2, 1fr); }\n}\n@media (max-width: 640px) {\n  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }\n}\n\n\/* --- Card --- *\/\n.card {\n  background: var(--color-white);\n  border-radius: var(--border-radius-lg);\n  overflow: hidden;\n  box-shadow: var(--shadow-sm);\n  transition: all var(--transition-base);\n  cursor: pointer;\n}\n.card:hover {\n  box-shadow: var(--shadow-lg);\n  transform: translateY(-4px);\n}\n.card-body {\n  padding: var(--space-lg);\n}\n\n\/* --- Gold Divider --- *\/\n.divider-gold {\n  width: 60px;\n  height: 2px;\n  background: var(--color-cta);\n  margin: var(--space-md) 0;\n}\n\n.divider-gold-center {\n  margin-left: auto;\n  margin-right: auto;\n}\n\n\/* --- Star Rating --- *\/\n.stars {\n  display: inline-flex;\n  gap: 2px;\n  color: var(--color-cta);\n}\n\n\/* --- Accessibility --- *\/\n@media (prefers-reduced-motion: reduce) {\n  *, *::before, *::after {\n    animation-duration: 0.01ms !important;\n    animation-iteration-count: 1 !important;\n    transition-duration: 0.01ms !important;\n  }\n  html { scroll-behavior: auto; }\n}\n\n\/* --- Focus States --- *\/\n:focus-visible {\n  outline: 2px solid var(--color-cta);\n  outline-offset: 2px;\n}\n\n\/* --- Selection --- *\/\n::selection {\n  background: var(--color-primary);\n  color: var(--color-white);\n}\n\n\/* --- Dark Section (replaces old navy) --- *\/\n.dark-section {\n  background: #2C1810;\n  color: rgba(255, 255, 255, 0.9);\n}\n.dark-section h2, .dark-section h3, .dark-section h4 {\n  color: var(--color-white);\n}\n\n\n\n    \/* ============================================================\n       SUITE PAGE \u2014 Ritmo Cartagena\n       ============================================================ *\/\n\n    \/* --- Navigation --- *\/\n    .nav {\n      position: fixed;\n      top: 1rem;\n      left: 1rem;\n      right: 1rem;\n      z-index: 50;\n      background: rgba(255, 255, 255, 0.05);\n      backdrop-filter: blur(20px);\n      -webkit-backdrop-filter: blur(20px);\n      border-radius: var(--border-radius-xl);\n      border: 1px solid rgba(255, 255, 255, 0.15);\n      transition: all var(--transition-slow);\n      padding: 0 var(--space-xl);\n    }\n\n    .nav.scrolled {\n      top: 0;\n      left: 0;\n      right: 0;\n      background: rgba(255, 255, 255, 0.97);\n      backdrop-filter: blur(12px);\n      border-radius: 0;\n      border-color: var(--color-border);\n      box-shadow: var(--shadow-md);\n    }\n\n    .nav-inner {\n      max-width: var(--max-width);\n      margin: 0 auto;\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      height: var(--nav-height);\n    }\n\n    .nav-logo {\n      display: inline-flex;\n      align-items: center;\n      text-decoration: none;\n    }\n\n    .nav-logo img {\n      height: 30px;\n      width: auto;\n      filter: brightness(0) invert(1);\n      transition: filter var(--transition-base);\n    }\n\n    .nav.scrolled .nav-logo img {\n      filter: none;\n    }\n\n    .nav-links {\n      display: flex;\n      align-items: center;\n      gap: var(--space-xl);\n      list-style: none;\n    }\n\n    .nav-links a {\n      font-family: var(--font-body);\n      font-size: var(--text-sm);\n      font-weight: var(--weight-medium);\n      color: rgba(255, 255, 255, 0.9);\n      text-decoration: none;\n      letter-spacing: var(--tracking-wide);\n      text-transform: uppercase;\n      transition: color var(--transition-fast);\n      cursor: pointer;\n    }\n\n    .nav-links a:hover {\n      color: var(--color-cta);\n    }\n\n    .nav.scrolled .nav-links a {\n      color: var(--color-text);\n    }\n\n    .nav.scrolled .nav-links a:hover {\n      color: var(--color-cta);\n    }\n\n    .nav-links a.active,\n    .nav.scrolled .nav-links a.active {\n      color: var(--color-cta) !important;\n    }\n\n    .nav-cta {\n      padding: 0.625rem 1.5rem !important;\n      background: var(--color-cta) !important;\n      color: var(--color-white) !important;\n      border-radius: var(--border-radius) !important;\n      font-weight: var(--weight-semibold) !important;\n      text-transform: uppercase !important;\n      letter-spacing: var(--tracking-wide) !important;\n      font-size: var(--text-xs) !important;\n      transition: all var(--transition-base) !important;\n      cursor: pointer;\n    }\n\n    .nav-cta:hover {\n      background: var(--color-cta-hover) !important;\n      box-shadow: var(--shadow-gold) !important;\n    }\n\n    \/* Mobile menu toggle *\/\n    .nav-toggle {\n      display: none;\n      flex-direction: column;\n      gap: 5px;\n      cursor: pointer;\n      background: none;\n      border: none;\n      padding: 4px;\n    }\n\n    .nav-toggle span {\n      width: 24px;\n      height: 2px;\n      background: var(--color-white);\n      transition: all var(--transition-base);\n    }\n\n    .nav.scrolled .nav-toggle span {\n      background: var(--color-text);\n    }\n\n    @media (max-width: 1024px) {\n      .nav-toggle { display: flex; }\n      .nav-links {\n        display: none;\n        position: absolute;\n        top: calc(var(--nav-height) + 0.5rem);\n        left: 0;\n        right: 0;\n        background: var(--color-white);\n        flex-direction: column;\n        padding: var(--space-xl);\n        border-radius: 0 0 var(--border-radius-lg) var(--border-radius-lg);\n        box-shadow: var(--shadow-lg);\n      }\n      .nav-links.open { display: flex; }\n      .nav-links a { color: var(--color-text) !important; }\n    }\n\n    \/* --- Suite Hero --- *\/\n    .suite-hero {\n      position: relative;\n      min-height: 70vh;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      overflow: hidden;\n    }\n\n    .suite-hero-bg {\n      position: absolute;\n      inset: 0;\n      background:\n        linear-gradient(180deg,\n          rgba(15, 23, 42, 0.35) 0%,\n          rgba(15, 23, 42, 0.15) 40%,\n          rgba(15, 23, 42, 0.55) 100%),\n        url('https:\/\/stayritmo.com\/wp-content\/uploads\/2026\/03\/Ritmo-Bedroom.webp')\n        center\/cover no-repeat;\n    }\n\n    .suite-hero-content {\n      position: relative;\n      z-index: 1;\n      text-align: center;\n      max-width: 800px;\n      padding: var(--space-xl);\n    }\n\n    .suite-hero .hero-badge {\n      display: inline-flex;\n      align-items: center;\n      gap: var(--space-sm);\n      background: rgba(255, 255, 255, 0.12);\n      backdrop-filter: blur(12px);\n      border: 1px solid rgba(255, 255, 255, 0.2);\n      padding: 0.5rem 1.25rem;\n      border-radius: 100px;\n      margin-bottom: var(--space-xl);\n    }\n\n    .suite-hero .hero-badge .stars svg {\n      width: 14px;\n      height: 14px;\n      fill: var(--color-cta);\n    }\n\n    .suite-hero .hero-badge span {\n      font-family: var(--font-body);\n      font-size: var(--text-sm);\n      font-weight: var(--weight-medium);\n      color: var(--color-white);\n    }\n\n    .suite-hero h1 {\n      font-size: var(--text-6xl);\n      color: var(--color-white);\n      margin-bottom: var(--space-lg);\n      font-weight: var(--weight-normal);\n    }\n\n    .suite-hero h1 em {\n      font-style: italic;\n      color: var(--color-cta-light);\n    }\n\n    .suite-hero-subtitle {\n      font-size: var(--text-lg);\n      color: rgba(255, 255, 255, 0.85);\n      font-weight: var(--weight-light);\n      line-height: var(--leading-relaxed);\n      max-width: 560px;\n      margin: 0 auto var(--space-2xl);\n    }\n\n    \/* --- Photo Gallery --- *\/\n    .gallery-section {\n      background: var(--color-bg);\n    }\n\n    .gallery-header {\n      text-align: center;\n      margin-bottom: var(--space-3xl);\n    }\n\n    .photo-gallery {\n      display: grid;\n      grid-template-columns: repeat(4, 1fr);\n      grid-template-rows: 280px 280px;\n      gap: var(--space-md);\n      border-radius: var(--border-radius-lg);\n      overflow: hidden;\n    }\n\n    .photo-gallery-item {\n      background-size: cover;\n      background-position: center;\n      cursor: pointer;\n      position: relative;\n      overflow: hidden;\n      transition: all var(--transition-base);\n    }\n\n    .photo-gallery-item::after {\n      content: '';\n      position: absolute;\n      inset: 0;\n      background: rgba(44, 24, 16, 0);\n      transition: background var(--transition-base);\n    }\n\n    .photo-gallery-item:hover::after {\n      background: rgba(44, 24, 16, 0.15);\n    }\n\n    .photo-gallery-item:hover {\n      transform: scale(1.02);\n      z-index: 1;\n    }\n\n    .photo-gallery-item .photo-zoom {\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%) scale(0.8);\n      z-index: 2;\n      width: 48px;\n      height: 48px;\n      background: rgba(255, 255, 255, 0.9);\n      border-radius: 50%;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      opacity: 0;\n      transition: all var(--transition-base);\n      color: var(--color-primary);\n    }\n\n    .photo-gallery-item:hover .photo-zoom {\n      opacity: 1;\n      transform: translate(-50%, -50%) scale(1);\n    }\n\n    .photo-gallery-item .photo-zoom svg {\n      width: 22px;\n      height: 22px;\n    }\n\n    \/* Large featured photo *\/\n    .photo-gallery-item:first-child {\n      grid-column: 1 \/ 3;\n      grid-row: 1 \/ 2;\n    }\n\n    .photo-gallery-item:nth-child(5) {\n      grid-column: 3 \/ 5;\n      grid-row: 2 \/ 3;\n    }\n\n    @media (max-width: 1024px) {\n      .photo-gallery {\n        grid-template-columns: repeat(2, 1fr);\n        grid-template-rows: repeat(4, 220px);\n      }\n      .photo-gallery-item:first-child {\n        grid-column: 1 \/ 3;\n        grid-row: 1 \/ 2;\n      }\n      .photo-gallery-item:nth-child(5) {\n        grid-column: 1 \/ 3;\n        grid-row: 4 \/ 5;\n      }\n    }\n\n    @media (max-width: 640px) {\n      .photo-gallery {\n        grid-template-columns: 1fr;\n        grid-template-rows: repeat(8, 220px);\n      }\n      .photo-gallery-item:first-child,\n      .photo-gallery-item:nth-child(5) {\n        grid-column: 1;\n        grid-row: auto;\n      }\n      .photo-gallery-item:nth-child(9) {\n        grid-column: 1;\n      }\n    }\n\n    \/* --- Lightbox --- *\/\n    .lightbox {\n      display: none;\n      position: fixed;\n      inset: 0;\n      z-index: 100;\n      background: rgba(26, 14, 8, 0.95);\n      backdrop-filter: blur(8px);\n      align-items: center;\n      justify-content: center;\n      padding: var(--space-xl);\n    }\n\n    .lightbox.active {\n      display: flex;\n    }\n\n    .lightbox-img {\n      max-width: 90vw;\n      max-height: 85vh;\n      border-radius: var(--border-radius-lg);\n      object-fit: contain;\n      box-shadow: var(--shadow-xl);\n    }\n\n    .lightbox-close {\n      position: absolute;\n      top: var(--space-xl);\n      right: var(--space-xl);\n      width: 48px;\n      height: 48px;\n      background: rgba(255, 255, 255, 0.1);\n      border: 1px solid rgba(255, 255, 255, 0.2);\n      border-radius: 50%;\n      color: var(--color-white);\n      cursor: pointer;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      transition: all var(--transition-base);\n    }\n\n    .lightbox-close:hover {\n      background: rgba(255, 255, 255, 0.2);\n    }\n\n    .lightbox-close svg {\n      width: 24px;\n      height: 24px;\n    }\n\n    .lightbox-nav {\n      position: absolute;\n      top: 50%;\n      transform: translateY(-50%);\n      width: 48px;\n      height: 48px;\n      background: rgba(255, 255, 255, 0.1);\n      border: 1px solid rgba(255, 255, 255, 0.2);\n      border-radius: 50%;\n      color: var(--color-white);\n      cursor: pointer;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      transition: all var(--transition-base);\n    }\n\n    .lightbox-nav:hover {\n      background: rgba(255, 255, 255, 0.2);\n    }\n\n    .lightbox-nav svg {\n      width: 24px;\n      height: 24px;\n    }\n\n    .lightbox-prev {\n      left: var(--space-xl);\n    }\n\n    .lightbox-next {\n      right: var(--space-xl);\n    }\n\n    .lightbox-counter {\n      position: absolute;\n      bottom: var(--space-xl);\n      left: 50%;\n      transform: translateX(-50%);\n      color: rgba(255, 255, 255, 0.7);\n      font-family: var(--font-body);\n      font-size: var(--text-sm);\n      font-weight: var(--weight-medium);\n    }\n\n    \/* --- Room Details --- *\/\n    .room-details {\n      background: var(--color-sand-light);\n    }\n\n    .room-details-header {\n      text-align: center;\n      margin-bottom: var(--space-3xl);\n    }\n\n    .room-highlights {\n      display: flex;\n      justify-content: center;\n      flex-wrap: wrap;\n      gap: var(--space-2xl);\n    }\n\n    .room-highlight {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      gap: var(--space-md);\n      text-align: center;\n      min-width: 160px;\n    }\n\n    .room-highlight-icon {\n      width: 72px;\n      height: 72px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      background: #2C1810;\n      border-radius: var(--border-radius-lg);\n      color: var(--color-cta);\n      transition: all var(--transition-base);\n    }\n\n    .room-highlight-icon svg {\n      width: 32px;\n      height: 32px;\n    }\n\n    .room-highlight:hover .room-highlight-icon {\n      transform: translateY(-4px);\n      box-shadow: var(--shadow-lg);\n    }\n\n    .room-highlight-label {\n      font-family: var(--font-body);\n      font-size: var(--text-base);\n      font-weight: var(--weight-semibold);\n      color: var(--color-primary);\n    }\n\n    .room-highlight-sub {\n      font-size: var(--text-sm);\n      color: var(--color-text-muted);\n      margin-top: calc(-1 * var(--space-sm));\n    }\n\n    \/* --- Amenities Section --- *\/\n    .amenities-section {\n      background: #FFFFFF;\n    }\n\n    .amenities-header {\n      text-align: center;\n      margin-bottom: var(--space-3xl);\n    }\n\n    .amenity-category {\n      background: var(--color-white);\n      border-radius: var(--border-radius-lg);\n      padding: var(--space-2xl);\n      box-shadow: var(--shadow-sm);\n      border: 1px solid var(--color-border-light);\n      transition: all var(--transition-base);\n    }\n\n    .amenity-category:hover {\n      box-shadow: var(--shadow-md);\n    }\n\n    .amenity-category-header {\n      display: flex;\n      align-items: center;\n      gap: var(--space-md);\n      margin-bottom: var(--space-lg);\n    }\n\n    .amenity-category-icon {\n      width: 44px;\n      height: 44px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      background: linear-gradient(135deg, #2C1810, #4A3228);\n      border-radius: var(--border-radius);\n      color: var(--color-cta);\n      flex-shrink: 0;\n    }\n\n    .amenity-category-icon svg {\n      width: 22px;\n      height: 22px;\n    }\n\n    .amenity-category-title {\n      font-family: var(--font-heading);\n      font-size: var(--text-xl);\n      color: var(--color-primary);\n      font-weight: var(--weight-semibold);\n    }\n\n    .amenity-list {\n      list-style: none;\n      display: flex;\n      flex-direction: column;\n      gap: var(--space-md);\n    }\n\n    .amenity-list li {\n      display: flex;\n      align-items: center;\n      gap: var(--space-md);\n      font-size: var(--text-sm);\n      color: var(--color-text-muted);\n    }\n\n    .amenity-list li svg {\n      width: 20px;\n      height: 20px;\n      color: var(--color-cta);\n      flex-shrink: 0;\n    }\n\n    \/* --- House Rules --- *\/\n    .house-rules {\n      background: var(--color-sand-light);\n    }\n\n    .house-rules-header {\n      text-align: center;\n      margin-bottom: var(--space-3xl);\n    }\n\n    .rules-grid {\n      display: grid;\n      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n      gap: var(--space-lg);\n      max-width: var(--max-width-narrow);\n      margin: 0 auto;\n    }\n\n    .rule-card {\n      background: var(--color-white);\n      border-radius: var(--border-radius-lg);\n      padding: var(--space-xl);\n      text-align: center;\n      box-shadow: var(--shadow-sm);\n      border: 1px solid var(--color-border-light);\n      transition: all var(--transition-base);\n    }\n\n    .rule-card:hover {\n      box-shadow: var(--shadow-md);\n      transform: translateY(-2px);\n    }\n\n    .rule-icon {\n      width: 52px;\n      height: 52px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      margin: 0 auto var(--space-md);\n      background: #2C1810;\n      border-radius: 50%;\n      color: var(--color-cta);\n    }\n\n    .rule-icon svg {\n      width: 24px;\n      height: 24px;\n    }\n\n    .rule-label {\n      font-family: var(--font-body);\n      font-size: var(--text-sm);\n      font-weight: var(--weight-semibold);\n      color: var(--color-primary);\n      margin-bottom: var(--space-xs);\n    }\n\n    .rule-detail {\n      font-size: var(--text-xs);\n      color: var(--color-text-muted);\n      margin: 0;\n    }\n\n    \/* --- Final CTA --- *\/\n    .final-cta {\n      position: relative;\n      padding: var(--space-5xl) 0;\n      text-align: center;\n      overflow: hidden;\n    }\n\n    .final-cta-bg {\n      position: absolute;\n      inset: 0;\n      background:\n        linear-gradient(180deg,\n          rgba(18, 71, 32, 0.88) 0%,\n          rgba(18, 71, 32, 0.92) 100%),\n        url('https:\/\/images.unsplash.com\/photo-1583531172005-814194af01e1?w=1920&q=80')\n        center\/cover no-repeat;\n    }\n\n    .final-cta .container {\n      position: relative;\n      z-index: 1;\n    }\n\n    .final-cta h2 {\n      color: var(--color-white);\n      margin-bottom: var(--space-md);\n    }\n\n    .final-cta p {\n      color: rgba(255, 255, 255, 0.8);\n      font-size: var(--text-lg);\n      max-width: 560px;\n      margin: 0 auto var(--space-2xl);\n    }\n\n    .final-cta .btn-outline:hover {\n      background: var(--color-white);\n      color: #124720;\n    }\n\n    .hero-actions {\n      display: flex;\n      gap: var(--space-md);\n      justify-content: center;\n      flex-wrap: wrap;\n    }\n\n    .btn-primary:hover {\n      color: var(--color-white);\n    }\n\n    \/* --- Footer --- *\/\n    .footer {\n      background: var(--color-sand, #EBDEC5);\n      color: var(--color-text, #2C1810);\n      padding: var(--space-4xl) 0 var(--space-xl);\n    }\n\n    .footer-grid {\n      display: grid;\n      grid-template-columns: 2fr 1fr 1fr 1fr;\n      gap: var(--space-2xl);\n      margin-bottom: var(--space-3xl);\n    }\n\n    .footer-brand .nav-logo {\n      display: inline-flex;\n      align-items: center;\n      margin-bottom: var(--space-md);\n    }\n\n    .footer .nav-logo img {\n      height: 25px;\n      filter: none;\n    }\n\n    .footer-brand p {\n      font-size: var(--text-sm);\n      line-height: var(--leading-relaxed);\n      color: var(--color-text-muted);\n      max-width: 300px;\n    }\n\n    .footer-col h5 {\n      font-family: var(--font-body);\n      font-size: var(--text-xs);\n      font-weight: var(--weight-semibold);\n      letter-spacing: var(--tracking-widest);\n      text-transform: uppercase;\n      color: #124720;\n      margin-bottom: var(--space-lg);\n    }\n\n    .footer-col ul {\n      list-style: none;\n      display: flex;\n      flex-direction: column;\n      gap: var(--space-sm);\n    }\n\n    .footer-col a {\n      font-size: var(--text-sm);\n      color: var(--color-text-muted);\n      text-decoration: none;\n      transition: color var(--transition-fast);\n      cursor: pointer;\n    }\n\n    .footer-col a:hover {\n      color: var(--color-primary);\n    }\n\n    .footer-bottom {\n      border-top: 1px solid var(--color-border);\n      padding-top: var(--space-xl);\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      flex-wrap: wrap;\n      gap: var(--space-md);\n    }\n\n    .footer-bottom p {\n      font-size: var(--text-xs);\n      color: var(--color-text-light);\n      margin: 0;\n    }\n\n    .footer-legal {\n      width: 100%;\n      display: flex;\n      flex-wrap: wrap;\n      gap: var(--space-sm);\n      margin-top: var(--space-sm);\n    }\n\n    .footer-legal a {\n      font-size: var(--text-xs);\n      color: var(--color-text-light);\n      text-decoration: none;\n      transition: color var(--transition-fast);\n    }\n\n    .footer-legal a:hover {\n      color: var(--color-primary);\n    }\n\n    .footer-legal span {\n      font-size: var(--text-xs);\n      color: var(--color-text-light);\n      opacity: 0.5;\n    }\n\n    .footer-social {\n      display: flex;\n      gap: var(--space-md);\n    }\n\n    .footer-social a {\n      width: 40px;\n      height: 40px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      border-radius: 50%;\n      border: 1px solid var(--color-border);\n      color: var(--color-text-muted);\n      transition: all var(--transition-base);\n      cursor: pointer;\n    }\n\n    .footer-social a:hover {\n      border-color: #124720;\n      color: #124720;\n      background: rgba(18, 71, 32, 0.08);\n    }\n\n    .footer-social svg {\n      width: 18px;\n      height: 18px;\n    }\n\n    @media (max-width: 768px) {\n      .footer-grid {\n        grid-template-columns: 1fr 1fr;\n      }\n    }\n    @media (max-width: 480px) {\n      .footer-grid {\n        grid-template-columns: 1fr;\n      }\n    }\n\n\n  \n<\/style>\n\n\n\n<!-- ==================== NAVIGATION ==================== -->\n  <nav class=\"nav\" id=\"navbar\">\n    <div class=\"nav-inner\">\n      <a href=\"https:\/\/stayritmo.com\/\" class=\"nav-logo\"><img decoding=\"async\" src=\"https:\/\/stayritmo.com\/wp-content\/uploads\/2025\/08\/Ritmo-Horizontal.webp\" alt=\"Ritmo Cartagena\" loading=\"lazy\"><\/a>\n      <ul class=\"nav-links\" id=\"navLinks\">\n        <li><a href=\"\/suite\/\" class=\"active\">The Suite<\/a><\/li>\n        <li style=\"display:none\"><a href=\"\/things-to-do\/\">Things to Do<\/a><\/li>\n        <li><a href=\"\/cartagena-guide\/\">Cartagena<\/a><\/li>\n        <li><a href=\"\/reviews\/\">Reviews<\/a><\/li>\n        <li><a href=\"\/about\/\">About<\/a><\/li>\n        <li><a href=\"\/contact\/\">Contact<\/a><\/li>\n        <li><a href=\"\/book\/\" class=\"nav-cta\">Book Now<\/a><\/li>\n      <\/ul>\n      <button class=\"nav-toggle\" id=\"navToggle\" aria-label=\"Toggle navigation\">\n        <span><\/span><span><\/span><span><\/span>\n      <\/button>\n    <\/div>\n  <\/nav>\n\n  <!-- ==================== SUITE HERO ==================== -->\n  <section class=\"suite-hero\">\n    <div class=\"suite-hero-bg\" role=\"img\" aria-label=\"Luxury modern suite with lagoon view\"><\/div>\n    <div class=\"suite-hero-content\">\n      <div class=\"hero-badge\">\n        <div class=\"stars\">\n          <svg viewBox=\"0 0 20 20\"><path d=\"M10 1l2.39 4.84 5.34.78-3.87 3.77.91 5.32L10 13.28l-4.77 2.43.91-5.32L2.27 6.62l5.34-.78L10 1z\"\/><\/svg>\n          <svg viewBox=\"0 0 20 20\"><path d=\"M10 1l2.39 4.84 5.34.78-3.87 3.77.91 5.32L10 13.28l-4.77 2.43.91-5.32L2.27 6.62l5.34-.78L10 1z\"\/><\/svg>\n          <svg viewBox=\"0 0 20 20\"><path d=\"M10 1l2.39 4.84 5.34.78-3.87 3.77.91 5.32L10 13.28l-4.77 2.43.91-5.32L2.27 6.62l5.34-.78L10 1z\"\/><\/svg>\n          <svg viewBox=\"0 0 20 20\"><path d=\"M10 1l2.39 4.84 5.34.78-3.87 3.77.91 5.32L10 13.28l-4.77 2.43.91-5.32L2.27 6.62l5.34-.78L10 1z\"\/><\/svg>\n          <svg viewBox=\"0 0 20 20\"><path d=\"M10 1l2.39 4.84 5.34.78-3.87 3.77.91 5.32L10 13.28l-4.77 2.43.91-5.32L2.27 6.62l5.34-.78L10 1z\"\/><\/svg>\n        <\/div>\n        <span>4.95 stars &vert; 100+ reviews<\/span>\n      <\/div>\n      <h1>The <em>Suite<\/em><\/h1>\n      <p class=\"suite-hero-subtitle\">A thoughtfully designed modern retreat with premium amenities, lagoon views, and everything you need for the perfect Cartagena getaway.<\/p>\n      <div class=\"hero-actions\">\n        <a href=\"https:\/\/booking.stayritmo.com\/en\/availability\" target=\"_blank\" rel=\"noopener noreferrer nofollow\" class=\"btn btn-primary\">Check Availability<\/a>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- ==================== PHOTO GALLERY ==================== -->\n  <section class=\"gallery-section section\">\n    <div class=\"container\">\n      <div class=\"gallery-header\">\n        <p class=\"eyebrow\">Gallery<\/p>\n        <h2>Explore the Space<\/h2>\n        <div class=\"divider-gold divider-gold-center\"><\/div>\n      <\/div>\n\n      <div class=\"photo-gallery\">\n        <!-- Photo 1: Living room wide shot (LARGE) -->\n        <div class=\"photo-gallery-item\" data-index=\"0\"\n             style=\"background-image:url('https:\/\/stayritmo.com\/wp-content\/uploads\/2026\/03\/Ritmo-Living-Room-2-scaled.webp')\"\n             role=\"img\" aria-label=\"Living room with 70-inch TV and city views\">\n          <div class=\"photo-zoom\">\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"11\" cy=\"11\" r=\"8\"\/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"\/><line x1=\"11\" y1=\"8\" x2=\"11\" y2=\"14\"\/><line x1=\"8\" y1=\"11\" x2=\"14\" y2=\"11\"\/><\/svg>\n          <\/div>\n        <\/div>\n        <!-- Photo 2: Bedroom with city view -->\n        <div class=\"photo-gallery-item\" data-index=\"1\"\n             style=\"background-image:url('https:\/\/stayritmo.com\/wp-content\/uploads\/2026\/03\/Ritmo-Bedroom-CityView-scaled.webp')\"\n             role=\"img\" aria-label=\"King bedroom with city view and smart TV\">\n          <div class=\"photo-zoom\">\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"11\" cy=\"11\" r=\"8\"\/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"\/><line x1=\"11\" y1=\"8\" x2=\"11\" y2=\"14\"\/><line x1=\"8\" y1=\"11\" x2=\"14\" y2=\"11\"\/><\/svg>\n          <\/div>\n        <\/div>\n        <!-- Photo 3: Kitchen -->\n        <div class=\"photo-gallery-item\" data-index=\"2\"\n             style=\"background-image:url('https:\/\/stayritmo.com\/wp-content\/uploads\/2026\/03\/Ritmo-Kitchen-scaled.webp')\"\n             role=\"img\" aria-label=\"Modern kitchen with island and bar seating\">\n          <div class=\"photo-zoom\">\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"11\" cy=\"11\" r=\"8\"\/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"\/><line x1=\"11\" y1=\"8\" x2=\"11\" y2=\"14\"\/><line x1=\"8\" y1=\"11\" x2=\"14\" y2=\"11\"\/><\/svg>\n          <\/div>\n        <\/div>\n        <!-- Photo 4: Balcony lagoon view -->\n        <div class=\"photo-gallery-item\" data-index=\"3\"\n             style=\"background-image:url('https:\/\/stayritmo.com\/wp-content\/uploads\/2026\/03\/Ritmo-Balcony-View-scaled.webp')\"\n             role=\"img\" aria-label=\"Balcony with lagoon and city skyline panorama\">\n          <div class=\"photo-zoom\">\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"11\" cy=\"11\" r=\"8\"\/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"\/><line x1=\"11\" y1=\"8\" x2=\"11\" y2=\"14\"\/><line x1=\"8\" y1=\"11\" x2=\"14\" y2=\"11\"\/><\/svg>\n          <\/div>\n        <\/div>\n        <!-- Photo 5: Bedroom headboard (LARGE) -->\n        <div class=\"photo-gallery-item\" data-index=\"4\"\n             style=\"background-image:url('https:\/\/stayritmo.com\/wp-content\/uploads\/2026\/03\/Ritmo-Bedroom-Headboard-scaled.webp')\"\n             role=\"img\" aria-label=\"King bed with pendant lights and en-suite bathroom\">\n          <div class=\"photo-zoom\">\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"11\" cy=\"11\" r=\"8\"\/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"\/><line x1=\"11\" y1=\"8\" x2=\"11\" y2=\"14\"\/><line x1=\"8\" y1=\"11\" x2=\"14\" y2=\"11\"\/><\/svg>\n          <\/div>\n        <\/div>\n        <!-- Photo 6: Bathroom -->\n        <div class=\"photo-gallery-item\" data-index=\"5\"\n             style=\"background-image:url('https:\/\/stayritmo.com\/wp-content\/uploads\/2026\/03\/Ritmo-Bathroom-scaled.webp')\"\n             role=\"img\" aria-label=\"Modern bathroom with rain shower\">\n          <div class=\"photo-zoom\">\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"11\" cy=\"11\" r=\"8\"\/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"\/><line x1=\"11\" y1=\"8\" x2=\"11\" y2=\"14\"\/><line x1=\"8\" y1=\"11\" x2=\"14\" y2=\"11\"\/><\/svg>\n          <\/div>\n        <\/div>\n        <!-- Photo 7: Rooftop pool -->\n        <div class=\"photo-gallery-item\" data-index=\"6\"\n             style=\"background-image:url('https:\/\/stayritmo.com\/wp-content\/uploads\/2026\/03\/Ritmo-Rooftop-Pool-scaled.webp')\"\n             role=\"img\" aria-label=\"Rooftop pool with city skyline views\">\n          <div class=\"photo-zoom\">\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"11\" cy=\"11\" r=\"8\"\/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"\/><line x1=\"11\" y1=\"8\" x2=\"11\" y2=\"14\"\/><line x1=\"8\" y1=\"11\" x2=\"14\" y2=\"11\"\/><\/svg>\n          <\/div>\n        <\/div>\n        <!-- Photo 8: Building exterior -->\n        <div class=\"photo-gallery-item\" data-index=\"7\"\n             style=\"background-image:url('https:\/\/stayritmo.com\/wp-content\/uploads\/2026\/03\/Ritmo-Building-Exterior-scaled.webp')\"\n             role=\"img\" aria-label=\"Edificio Marina del Rey exterior\">\n          <div class=\"photo-zoom\">\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"11\" cy=\"11\" r=\"8\"\/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"\/><line x1=\"11\" y1=\"8\" x2=\"11\" y2=\"14\"\/><line x1=\"8\" y1=\"11\" x2=\"14\" y2=\"11\"\/><\/svg>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- Lightbox Overlay -->\n  <div class=\"lightbox\" id=\"lightbox\">\n    <button class=\"lightbox-close\" id=\"lightboxClose\" aria-label=\"Close gallery\">\n      <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"\/><line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"\/><\/svg>\n    <\/button>\n    <button class=\"lightbox-nav lightbox-prev\" id=\"lightboxPrev\" aria-label=\"Previous photo\">\n      <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"15 18 9 12 15 6\"\/><\/svg>\n    <\/button>\n    <img decoding=\"async\" class=\"lightbox-img\" id=\"lightboxImg\" src=\"\" alt=\"Suite photo\">\n    <button class=\"lightbox-nav lightbox-next\" id=\"lightboxNext\" aria-label=\"Next photo\">\n      <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"9 18 15 12 9 6\"\/><\/svg>\n    <\/button>\n    <div class=\"lightbox-counter\" id=\"lightboxCounter\"><\/div>\n  <\/div>\n\n  <!-- ==================== VIRTUAL TOUR ==================== -->\n  <section class=\"virtual-tour section\" style=\"background:var(--color-sand-light);padding:var(--space-4xl) 0;\">\n    <div class=\"container\">\n      <div style=\"text-align:center;margin-bottom:var(--space-xl);\">\n        <p class=\"eyebrow\">Virtual Tour<\/p>\n        <h2>Walk Through the Suite<\/h2>\n        <div class=\"divider-gold divider-gold-center\"><\/div>\n      <\/div>\n      <div style=\"max-width:960px;margin:0 auto;border-radius:var(--border-radius-lg);overflow:hidden;box-shadow:var(--shadow-lg);\">\n        <script src=\"https:\/\/teliportme.com\/js\/embed.js\" data-teliportme=\"https:\/\/teliportme.com\/embed\/tour\/2d3a0d88\" data-height=\"540\" data-width=\"960\"><\/script>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <div style=\"height:2px;background:#FFFFFF;\"><\/div>\n\n  <!-- ==================== ROOM DETAILS ==================== -->\n  <section class=\"room-details section\">\n    <div class=\"container\">\n      <div class=\"room-details-header\">\n        <p class=\"eyebrow\">At a Glance<\/p>\n        <h2>Room Highlights<\/h2>\n        <div class=\"divider-gold divider-gold-center\"><\/div>\n      <\/div>\n\n      <div class=\"room-highlights\">\n        <!-- King Adjustable Bed -->\n        <div class=\"room-highlight\">\n          <div class=\"room-highlight-icon\">\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M2 4v16\"\/><path d=\"M2 8h18a2 2 0 0 1 2 2v10\"\/><path d=\"M2 17h20\"\/><path d=\"M6 8v9\"\/><\/svg>\n          <\/div>\n          <span class=\"room-highlight-label\">King Adjustable Bed<\/span>\n          <span class=\"room-highlight-sub\">Premium mattress with adjustable base<\/span>\n        <\/div>\n        <!-- Sleeps 4 -->\n        <div class=\"room-highlight\">\n          <div class=\"room-highlight-icon\">\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2\"\/><circle cx=\"9\" cy=\"7\" r=\"4\"\/><path d=\"M23 21v-2a4 4 0 0 0-3-3.87\"\/><path d=\"M16 3.13a4 4 0 0 1 0 7.75\"\/><\/svg>\n          <\/div>\n          <span class=\"room-highlight-label\">Sleeps 4<\/span>\n          <span class=\"room-highlight-sub\">Comfortable for up to four guests<\/span>\n        <\/div>\n        <!-- Sofa Bed -->\n        <div class=\"room-highlight\">\n          <div class=\"room-highlight-icon\">\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 9V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v3\"\/><path d=\"M2 11v5a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-5a2 2 0 0 0-4 0v2H6v-2a2 2 0 0 0-4 0z\"\/><path d=\"M4 18v2\"\/><path d=\"M20 18v2\"\/><\/svg>\n          <\/div>\n          <span class=\"room-highlight-label\">Sofa Bed<\/span>\n          <span class=\"room-highlight-sub\">Pull-out sofa for extra sleeping<\/span>\n        <\/div>\n        <!-- Lagoon View Balcony -->\n        <div class=\"room-highlight\">\n          <div class=\"room-highlight-icon\">\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M2 22 16 8\"\/><path d=\"M3.47 12.53 5 11l1.53 1.53\"\/><path d=\"M7.58 16.58 9.1 15l1.52 1.58\"\/><path d=\"M22 22H2\"\/><path d=\"M19.8 22a3 3 0 0 0-.8-2l-4-4\"\/><path d=\"M17 10c.7-.7 1.69-1 2.5-1a2.5 2.5 0 0 1 2.5 2.5c0 .81-.3 1.8-1 2.5\"\/><path d=\"M14 6c.7-.7 1.69-1 2.5-1A2.5 2.5 0 0 1 19 7.5c0 .81-.3 1.8-1 2.5\"\/><\/svg>\n          <\/div>\n          <span class=\"room-highlight-label\">Lagoon View Balcony<\/span>\n          <span class=\"room-highlight-sub\">Private balcony overlooking the lagoon<\/span>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- ==================== AMENITIES ==================== -->\n  <section class=\"amenities-section section\">\n    <div class=\"container\">\n      <div class=\"amenities-header\">\n        <p class=\"eyebrow\">Everything You Need<\/p>\n        <h2>Amenities<\/h2>\n        <div class=\"divider-gold divider-gold-center\"><\/div>\n      <\/div>\n\n      <div class=\"grid grid-4\">\n        <!-- Bedroom & Bath -->\n        <div class=\"amenity-category\">\n          <div class=\"amenity-category-header\">\n            <div class=\"amenity-category-icon\">\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M2 4v16\"\/><path d=\"M2 8h18a2 2 0 0 1 2 2v10\"\/><path d=\"M2 17h20\"\/><path d=\"M6 8v9\"\/><\/svg>\n            <\/div>\n            <h4 class=\"amenity-category-title\">Bedroom &amp; Bath<\/h4>\n          <\/div>\n          <ul class=\"amenity-list\">\n            <li>\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg>\n              King adjustable bed\n            <\/li>\n            <li>\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg>\n              Premium linens &amp; pillows\n            <\/li>\n            <li>\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg>\n              Sofa bed\n            <\/li>\n            <li>\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg>\n              Fresh towels provided\n            <\/li>\n          <\/ul>\n        <\/div>\n\n        <!-- Kitchen -->\n        <div class=\"amenity-category\">\n          <div class=\"amenity-category-header\">\n            <div class=\"amenity-category-icon\">\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M3 2v7c0 1.1.9 2 2 2h4a2 2 0 0 0 2-2V2\"\/><path d=\"M7 2v20\"\/><path d=\"M21 15V2v0a5 5 0 0 0-5 5v6c0 1.1.9 2 2 2h3zm0 0v7\"\/><\/svg>\n            <\/div>\n            <h4 class=\"amenity-category-title\">Kitchen<\/h4>\n          <\/div>\n          <ul class=\"amenity-list\">\n            <li>\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg>\n              Kitchenette\n            <\/li>\n            <li>\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg>\n              Coffee maker\n            <\/li>\n            <li>\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg>\n              Cookware &amp; utensils\n            <\/li>\n            <li>\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg>\n              Refrigerator\n            <\/li>\n          <\/ul>\n        <\/div>\n\n        <!-- Living -->\n        <div class=\"amenity-category\">\n          <div class=\"amenity-category-header\">\n            <div class=\"amenity-category-icon\">\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"2\" y=\"7\" width=\"20\" height=\"15\" rx=\"2\" ry=\"2\"\/><polyline points=\"17 2 12 7 7 2\"\/><\/svg>\n            <\/div>\n            <h4 class=\"amenity-category-title\">Living<\/h4>\n          <\/div>\n          <ul class=\"amenity-list\">\n            <li>\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg>\n              Smart TV\n            <\/li>\n            <li>\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg>\n              High-speed WiFi\n            <\/li>\n            <li>\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg>\n              Air conditioning\n            <\/li>\n            <li>\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg>\n              Balcony with lagoon view\n            <\/li>\n          <\/ul>\n        <\/div>\n\n        <!-- Building -->\n        <div class=\"amenity-category\">\n          <div class=\"amenity-category-header\">\n            <div class=\"amenity-category-icon\">\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"4\" y=\"2\" width=\"16\" height=\"20\" rx=\"2\" ry=\"2\"\/><path d=\"M9 22v-4h6v4\"\/><path d=\"M8 6h.01\"\/><path d=\"M16 6h.01\"\/><path d=\"M12 6h.01\"\/><path d=\"M12 10h.01\"\/><path d=\"M12 14h.01\"\/><path d=\"M16 10h.01\"\/><path d=\"M16 14h.01\"\/><path d=\"M8 10h.01\"\/><path d=\"M8 14h.01\"\/><\/svg>\n            <\/div>\n            <h4 class=\"amenity-category-title\">Building<\/h4>\n          <\/div>\n          <ul class=\"amenity-list\">\n            <li>\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg>\n              Rooftop pool\n            <\/li>\n            <li>\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg>\n              Elevator\n            <\/li>\n            <li>\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg>\n              Washer\/dryer in unit\n            <\/li>\n            <li>\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg>\n              Secure parking\n            <\/li>\n          <\/ul>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- ==================== HOUSE RULES ==================== -->\n  <section class=\"house-rules section\">\n    <div class=\"container\">\n      <div class=\"house-rules-header\">\n        <p class=\"eyebrow\">Good to Know<\/p>\n        <h2>House Rules<\/h2>\n        <div class=\"divider-gold divider-gold-center\"><\/div>\n      <\/div>\n\n      <div class=\"rules-grid\">\n        <!-- Check-in -->\n        <div class=\"rule-card\">\n          <div class=\"rule-icon\">\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4\"\/><polyline points=\"10 17 15 12 10 7\"\/><line x1=\"15\" y1=\"12\" x2=\"3\" y2=\"12\"\/><\/svg>\n          <\/div>\n          <div class=\"rule-label\">Check-in<\/div>\n          <p class=\"rule-detail\">3:00 PM<\/p>\n        <\/div>\n        <!-- Check-out -->\n        <div class=\"rule-card\">\n          <div class=\"rule-icon\">\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4\"\/><polyline points=\"16 17 21 12 16 7\"\/><line x1=\"21\" y1=\"12\" x2=\"9\" y2=\"12\"\/><\/svg>\n          <\/div>\n          <div class=\"rule-label\">Check-out<\/div>\n          <p class=\"rule-detail\">11:00 AM<\/p>\n        <\/div>\n        <!-- No Smoking -->\n        <div class=\"rule-card\">\n          <div class=\"rule-icon\">\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><line x1=\"4.93\" y1=\"4.93\" x2=\"19.07\" y2=\"19.07\"\/><\/svg>\n          <\/div>\n          <div class=\"rule-label\">No Smoking<\/div>\n          <p class=\"rule-detail\">Smoke-free property<\/p>\n        <\/div>\n        <!-- No Parties -->\n        <div class=\"rule-card\">\n          <div class=\"rule-icon\">\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3z\"\/><path d=\"M19 10v2a7 7 0 0 1-14 0v-2\"\/><line x1=\"12\" y1=\"19\" x2=\"12\" y2=\"23\"\/><line x1=\"8\" y1=\"23\" x2=\"16\" y2=\"23\"\/><\/svg>\n          <\/div>\n          <div class=\"rule-label\">No Parties<\/div>\n          <p class=\"rule-detail\">Quiet hours after 10 PM<\/p>\n        <\/div>\n        <!-- Max Guests -->\n        <div class=\"rule-card\">\n          <div class=\"rule-icon\">\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2\"\/><circle cx=\"9\" cy=\"7\" r=\"4\"\/><path d=\"M23 21v-2a4 4 0 0 0-3-3.87\"\/><path d=\"M16 3.13a4 4 0 0 1 0 7.75\"\/><\/svg>\n          <\/div>\n          <div class=\"rule-label\">Max 4 Guests<\/div>\n          <p class=\"rule-detail\">Maximum occupancy<\/p>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- ==================== FINAL CTA ==================== -->\n  <section class=\"final-cta\">\n    <div class=\"final-cta-bg\" role=\"img\" aria-label=\"Cartagena sunset over the lagoon\"><\/div>\n    <div class=\"container\">\n      <p class=\"eyebrow\" style=\"color:var(--color-cta-light);\">Ready to Book?<\/p>\n      <h2>Your Caribbean Escape Awaits<\/h2>\n      <p>Book direct for a personal experience, attentive hosts, and a seamless check-in experience.<\/p>\n      <div class=\"hero-actions\">\n        <a href=\"\/book\/\" class=\"btn btn-primary\">Book Now<\/a>\n        <a href=\"https:\/\/booking.stayritmo.com\/en\/availability\" target=\"_blank\" rel=\"noopener noreferrer nofollow\" class=\"btn btn-outline\">Check Availability<\/a>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- ==================== FOOTER ==================== -->\n  <footer class=\"footer\">\n    <div class=\"container\">\n      <div class=\"footer-grid\">\n        <div class=\"footer-brand\">\n          <a href=\"https:\/\/stayritmo.com\/\" class=\"nav-logo\"><img decoding=\"async\" src=\"https:\/\/stayritmo.com\/wp-content\/uploads\/2025\/08\/Ritmo-Horizontal.webp\" alt=\"Ritmo Cartagena\" loading=\"lazy\"><\/a>\n          <p>A modern Caribbean oasis in El Laguito, Cartagena. Your stylish home away from home on Colombia&#8217;s Caribbean coast.<\/p>\n        <\/div>\n        <div class=\"footer-col\">\n          <h5>Explore<\/h5>\n          <ul>\n            <li><a href=\"\/suite\/\">The Suite<\/a><\/li>\n            <li style=\"display:none\"><a href=\"\/things-to-do\/\">Things to Do<\/a><\/li>\n            <li><a href=\"\/cartagena-guide\/\">Cartagena Guide<\/a><\/li>\n            <li><a href=\"\/reviews\/\">Guest Reviews<\/a><\/li>\n            <li><a href=\"\/blog\/\">Blog<\/a><\/li>\n          <\/ul>\n        <\/div>\n        <div class=\"footer-col\">\n          <h5>Info<\/h5>\n          <ul>\n            <li><a href=\"\/about\/\">About Us<\/a><\/li>\n            <li><a href=\"\/faq\/\">FAQ<\/a><\/li>\n            <li><a href=\"\/contact\/\">Contact<\/a><\/li>\n            <li><a href=\"\/partners\/\">Become a Partner<\/a><\/li>\n          <\/ul>\n        <\/div>\n        <div class=\"footer-col\">\n          <h5>Book<\/h5>\n          <ul>\n            <li><a href=\"\/book\/\">Book Direct<\/a><\/li>\n            <li><a href=\"https:\/\/airbnb.com\/h\/ritmo\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">Airbnb<\/a><\/li>\n          <\/ul>\n        <\/div>\n      <\/div>\n      <div class=\"footer-bottom\">\n        <p>&copy; <script>document.write(new Date().getFullYear())<\/script> Ritmo Cartagena<\/p>\n        <div class=\"footer-social\">\n          <a href=\"https:\/\/www.instagram.com\/ritmocartagena\/\" aria-label=\"Instagram\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"2\" y=\"2\" width=\"20\" height=\"20\" rx=\"5\" ry=\"5\"\/><path d=\"M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z\"\/><line x1=\"17.5\" y1=\"6.5\" x2=\"17.51\" y2=\"6.5\"\/><\/svg>\n          <\/a>\n          <a href=\"https:\/\/www.facebook.com\/ritmocartagena\/\" aria-label=\"Facebook\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z\"\/><\/svg>\n          <\/a>\n          <a href=\"https:\/\/x.com\/ritmo_cartagena\" aria-label=\"X\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\n            <svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z\"\/><\/svg>\n          <\/a>\n        <\/div>\n        <div class=\"footer-legal\">\n          <a href=\"\/terms\/\">Terms of Service<\/a>\n          <span>&middot;<\/span>\n          <a href=\"\/privacy\/\">Privacy Policy<\/a>\n          <span>&middot;<\/span>\n          <a href=\"\/cookie-policy\/\">Cookie Policy<\/a>\n          <span>&middot;<\/span>\n          <a href=\"\/acceptable-use\/\">Acceptable Use<\/a>\n          <span>&middot;<\/span>\n          <a href=\"\/cancellation-policy\/\">Cancellation Policy<\/a>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/footer>\n\n  <!-- ==================== SCRIPTS ==================== -->\n  <script>\n    \/\/ Navbar scroll effect\n    const navbar = document.getElementById('navbar');\n    window.addEventListener('scroll', () => {\n      navbar.classList.toggle('scrolled', window.scrollY > 60);\n    });\n\n    \/\/ Mobile menu toggle\n    const navToggle = document.getElementById('navToggle');\n    const navLinks = document.getElementById('navLinks');\n    navToggle.addEventListener('click', () => {\n      navLinks.classList.toggle('open');\n    });\n\n    \/\/ Close mobile menu on link click\n    navLinks.querySelectorAll('a').forEach(link => {\n      link.addEventListener('click', () => {\n        navLinks.classList.remove('open');\n      });\n    });\n\n    \/\/ --- Lightbox Gallery ---\n    const galleryImages = [\n      'https:\/\/stayritmo.com\/wp-content\/uploads\/2026\/03\/Ritmo-Living-Room-2-scaled.webp',\n      'https:\/\/stayritmo.com\/wp-content\/uploads\/2026\/03\/Ritmo-Bedroom-CityView-scaled.webp',\n      'https:\/\/stayritmo.com\/wp-content\/uploads\/2026\/03\/Ritmo-Kitchen-scaled.webp',\n      'https:\/\/stayritmo.com\/wp-content\/uploads\/2026\/03\/Ritmo-Balcony-View-scaled.webp',\n      'https:\/\/stayritmo.com\/wp-content\/uploads\/2026\/03\/Ritmo-Bedroom-Headboard-scaled.webp',\n      'https:\/\/stayritmo.com\/wp-content\/uploads\/2026\/03\/Ritmo-Bathroom-scaled.webp',\n      'https:\/\/stayritmo.com\/wp-content\/uploads\/2026\/03\/Ritmo-Rooftop-Pool-scaled.webp',\n      'https:\/\/stayritmo.com\/wp-content\/uploads\/2026\/03\/Ritmo-Building-Exterior-scaled.webp',\n      'https:\/\/stayritmo.com\/wp-content\/uploads\/2026\/03\/Ritmo-Floor-Plan.webp',\n      'https:\/\/stayritmo.com\/wp-content\/uploads\/2026\/03\/Ritmo-Kitchen-Angle2-scaled.webp',\n      'https:\/\/stayritmo.com\/wp-content\/uploads\/2026\/03\/Ritmo-Sofa-Closeup-scaled.webp',\n      'https:\/\/stayritmo.com\/wp-content\/uploads\/2026\/03\/Ritmo-Bedroom-Angle2-scaled.webp',\n      'https:\/\/stayritmo.com\/wp-content\/uploads\/2026\/03\/Ritmo-Guest-Bath-scaled.webp'\n    ];\n\n    const galleryLabels = [\n      'Living room with 70-inch TV and city views',\n      'King bedroom with city view and smart TV',\n      'Modern kitchen with island and bar seating',\n      'Balcony with lagoon and city skyline panorama',\n      'King bed with pendant lights and en-suite bathroom',\n      'Modern bathroom with rain shower',\n      'Rooftop pool with city skyline views',\n      'Edificio Marina del Rey exterior',\n      'Suite floor plan layout',\n      'Kitchen open to living area',\n      'Leather sofa with Cartagena artwork',\n      'Bedroom with workspace and smart TV',\n      'Guest bathroom with washer and dryer'\n    ];\n\n    let currentIndex = 0;\n    const lightbox = document.getElementById('lightbox');\n    const lightboxImg = document.getElementById('lightboxImg');\n    const lightboxCounter = document.getElementById('lightboxCounter');\n\n    function openLightbox(index) {\n      currentIndex = index;\n      updateLightbox();\n      lightbox.classList.add('active');\n      document.body.style.overflow = 'hidden';\n    }\n\n    function closeLightbox() {\n      lightbox.classList.remove('active');\n      document.body.style.overflow = '';\n    }\n\n    function updateLightbox() {\n      lightboxImg.src = galleryImages[currentIndex];\n      lightboxImg.alt = galleryLabels[currentIndex];\n      lightboxCounter.textContent = (currentIndex + 1) + ' \/ ' + galleryImages.length;\n    }\n\n    function nextPhoto() {\n      currentIndex = (currentIndex + 1) % galleryImages.length;\n      updateLightbox();\n    }\n\n    function prevPhoto() {\n      currentIndex = (currentIndex - 1 + galleryImages.length) % galleryImages.length;\n      updateLightbox();\n    }\n\n    \/\/ Gallery item click\n    document.querySelectorAll('.photo-gallery-item').forEach(item => {\n      item.addEventListener('click', () => {\n        openLightbox(parseInt(item.dataset.index));\n      });\n    });\n\n    \/\/ Lightbox controls\n    document.getElementById('lightboxClose').addEventListener('click', closeLightbox);\n    document.getElementById('lightboxNext').addEventListener('click', nextPhoto);\n    document.getElementById('lightboxPrev').addEventListener('click', prevPhoto);\n\n    \/\/ Close on background click\n    lightbox.addEventListener('click', (e) => {\n      if (e.target === lightbox) closeLightbox();\n    });\n\n    \/\/ Keyboard navigation\n    document.addEventListener('keydown', (e) => {\n      if (!lightbox.classList.contains('active')) return;\n      if (e.key === 'Escape') closeLightbox();\n      if (e.key === 'ArrowRight') nextPhoto();\n      if (e.key === 'ArrowLeft') prevPhoto();\n    });\n\n    \/\/ --- Scroll Reveal Animation ---\n    const observer = new IntersectionObserver((entries) => {\n      entries.forEach(entry => {\n        if (entry.isIntersecting) {\n          entry.target.style.opacity = '1';\n          entry.target.style.transform = 'translateY(0)';\n        }\n      });\n    }, { threshold: 0.1 });\n\n    document.querySelectorAll('.room-highlight, .amenity-category, .rule-card, .photo-gallery-item').forEach(el => {\n      el.style.opacity = '0';\n      el.style.transform = 'translateY(20px)';\n      el.style.transition = 'opacity 0.6s ease, transform 0.6s ease';\n      observer.observe(el);\n    });\n\n  <\/script>\n","protected":false},"excerpt":{"rendered":"<p>The Suite Things to Do Cartagena Reviews About Contact Book Now 4.95 stars &vert; 100+ reviews The Suite A thoughtfully designed modern retreat with premium amenities, lagoon views, and everything you need for the perfect Cartagena getaway. Check Availability Gallery Explore the Space Virtual Tour Walk Through the Suite At a Glance Room Highlights King [&hellip;]<\/p>\n","protected":false},"author":4,"featured_media":0,"parent":0,"menu_order":4,"comment_status":"closed","ping_status":"closed","template":"ritmo-canvas","meta":{"footnotes":""},"class_list":["post-4257","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/stayritmo.com\/es\/wp-json\/wp\/v2\/pages\/4257","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/stayritmo.com\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/stayritmo.com\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/stayritmo.com\/es\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/stayritmo.com\/es\/wp-json\/wp\/v2\/comments?post=4257"}],"version-history":[{"count":11,"href":"https:\/\/stayritmo.com\/es\/wp-json\/wp\/v2\/pages\/4257\/revisions"}],"predecessor-version":[{"id":4905,"href":"https:\/\/stayritmo.com\/es\/wp-json\/wp\/v2\/pages\/4257\/revisions\/4905"}],"wp:attachment":[{"href":"https:\/\/stayritmo.com\/es\/wp-json\/wp\/v2\/media?parent=4257"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}