<!DOCTYPE html>
<html lang="es">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Martha Masabanda | Asesoría Legal &amp; Bienes Raíces</title>
  <meta name="description"
    content="Asesoría legal y bienes raíces en Ecuador: compra, venta, alquiler y administración de inmuebles con respaldo jurídico.">

  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link
    href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300..900&family=Work+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap"
    rel="stylesheet">

  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>

  <style>
    /* ============================================================
   DESIGN TOKENS
   ============================================================ */
    :root {
      /* Fondo dominante: crema/blanco. El dorado es el acento principal.
     El negro se reserva como color subdominante (header, hero, footer, CTA final). */
      --bg-void: #faf6ea;
      --bg-panel: #ffffff;
      --bg-panel-2: #f1e6cb;
      --bg-panel-3: #171310;

      --gold-100: #f3e3b0;
      --gold-300: #e5c877;
      --gold-400: #d9b25c;
      --gold-600: #b8892e;
      --gold-800: #8a6a26;
      --gold-900: #5c4519;
      --gold-ink: #9c7423;
      /* dorado con contraste suficiente sobre fondos claros */

      --stone-100: #18130c;
      --stone-200: #2f2717;
      --stone-400: #6b5c40;
      --stone-600: #7d6f52;
      --stone-700: #4a4030;
      --stone-800: #2a2117;

      --ok: #4c7a48;
      --warn: #a56f1f;
      --danger: #9c3f29;

      --line: rgba(184, 137, 46, .28);
      --line-strong: rgba(184, 137, 46, .5);

      --font-display: 'Fraunces', serif;
      --font-body: 'Work Sans', sans-serif;
      --font-mono: 'IBM Plex Mono', monospace;

      --container: 1180px;
      --radius: 2px;

      --ease-out: cubic-bezier(.22, .9, .32, 1);
    }

    *,
    *::before,
    *::after {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    @media (prefers-reduced-motion: reduce) {
      html {
        scroll-behavior: auto;
      }
    }

    body {
      margin: 0;
      background: var(--bg-void);
      color: var(--stone-200);
      font-family: var(--font-body);
      font-size: 16px;
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
    }

    img {
      max-width: 100%;
      display: block;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    button {
      font-family: inherit;
      cursor: pointer;
    }

    h1,
    h2,
    h3,
    h4 {
      font-family: var(--font-display);
      font-weight: 600;
      margin: 0;
      color: var(--stone-100);
      letter-spacing: -.01em;
    }

    p {
      margin: 0;
    }

    ul {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    ::selection {
      background: var(--gold-600);
      color: #171310;
    }

    :focus-visible {
      outline: 2px solid var(--gold-300);
      outline-offset: 3px;
    }

    .container {
      max-width: var(--container);
      margin: 0 auto;
      padding: 0 28px;
    }

    .eyebrow {
      font-family: var(--font-mono);
      font-size: 12px;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: var(--gold-ink);
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .eyebrow::before {
      content: '';
      width: 22px;
      height: 1px;
      background: var(--gold-ink);
      display: inline-block;
    }

    .gold-text {
      background: linear-gradient(115deg, var(--gold-100) 10%, var(--gold-400) 45%, var(--gold-800) 90%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .gold-text-ink {
      background: linear-gradient(115deg, var(--gold-ink) 10%, var(--gold-800) 55%, var(--gold-900) 95%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 14px 26px;
      font-family: var(--font-mono);
      font-size: 13px;
      letter-spacing: .06em;
      text-transform: uppercase;
      border-radius: var(--radius);
      border: 1px solid transparent;
      transition: transform .35s var(--ease-out), background .3s, border-color .3s, color .3s;
      white-space: nowrap;
    }

    .btn:hover {
      transform: translateY(-2px);
    }

    .btn-primary {
      background: linear-gradient(120deg, var(--gold-300), var(--gold-600));
      color: #1a1408;
      font-weight: 600;
    }

    .btn-primary:hover {
      box-shadow: 0 10px 30px -10px rgba(217, 178, 92, .55);
    }

    .btn-ghost {
      background: transparent;
      border-color: var(--line-strong);
      color: var(--stone-200);
    }

    .btn-ghost:hover {
      border-color: var(--gold-400);
      color: var(--gold-300);
    }

    .btn-small {
      padding: 9px 16px;
      font-size: 11px;
    }

    .btn-danger {
      border-color: rgba(181, 87, 63, .5);
      color: #d99a86;
    }

    .btn-danger:hover {
      border-color: var(--danger);
      background: rgba(181, 87, 63, .12);
    }

    .btn:disabled {
      opacity: .4;
      cursor: not-allowed;
      transform: none;
    }

    /* ============================================================
   CADASTRAL DIVIDER (signature element)
   A surveyor's boundary line: draws itself in on scroll,
   with tick marks + coordinate-style labels. Used between
   major sections instead of a plain hairline — it stands in
   for the "seguridad jurídica" / titled-land idea the whole
   brand is built on.
   ============================================================ */
    .survey-divider {
      position: relative;
      width: 100%;
      height: 34px;
      overflow: hidden;
    }

    .survey-divider svg {
      width: 100%;
      height: 100%;
      display: block;
    }

    .survey-divider .survey-path {
      fill: none;
      stroke: var(--gold-600);
      stroke-width: 1;
      stroke-dasharray: 2000;
      stroke-dashoffset: 2000;
    }

    .survey-divider .survey-tick {
      stroke: var(--gold-800);
      stroke-width: 1;
      opacity: 0;
    }

    .survey-divider text {
      font-family: var(--font-mono);
      font-size: 9px;
      fill: var(--stone-600);
      letter-spacing: .05em;
      opacity: 0;
    }

    /* ============================================================
   HEADER
   ============================================================ */
    header.site-header {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 200;
      padding: 18px 0;
      background: transparent;
      border-bottom: 1px solid transparent;
      transition: background .4s var(--ease-out), border-color .4s, padding .3s;
      --stone-100: #f7f3e9;
      --stone-200: #ede7d9;
      --stone-400: #a89f8c;
      --stone-600: #8b8272;
      --stone-700: #c9c0ad;
      --bg-panel: #171310;
      --gold-ink: #d9b25c;
    }

    header.site-header.scrolled {
      background: rgba(11, 10, 8, .86);
      backdrop-filter: blur(10px);
      border-bottom-color: var(--line);
      padding: 12px 0;
    }

    .header-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .brand img {
      height: 120px;
      width: auto;
    }

    .logo-blend {
      mix-blend-mode: normal;
      background: #ffffff;
      /* Fondo blanco sólido */
      padding: 4px 8px;
      /* Espacio alrededor del logo */
      border-radius: 4px;
      /* Bordes ligeramente redondeados */
    }

    .brand-name {
      font-family: var(--font-display);
      font-size: 14.5px;
      line-height: 1.15;
      color: var(--stone-100);
    }

    .brand-name strong {
      display: block;
      font-size: 16px;
      color: var(--gold-300);
      font-weight: 700;
    }

    nav.main-nav {
      display: flex;
      align-items: center;
      gap: 30px;
    }

    nav.main-nav a {
      font-family: var(--font-mono);
      font-size: 12px;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--stone-400);
      position: relative;
      padding-bottom: 4px;
      transition: color .3s;
    }

    nav.main-nav a:hover {
      color: var(--gold-300);
    }

    nav.main-nav a::after {
      content: '';
      position: absolute;
      left: 0;
      bottom: 0;
      width: 0;
      height: 1px;
      background: var(--gold-400);
      transition: width .3s var(--ease-out);
    }

    nav.main-nav a:hover::after {
      width: 100%;
    }

    .header-cta {
      display: flex;
      align-items: center;
      gap: 14px;
    }

    .admin-toggle {
      background: none;
      border: 1px solid var(--line-strong);
      color: var(--stone-600);
      width: 36px;
      height: 36px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all .3s;
      flex-shrink: 0;
    }

    .admin-toggle:hover,
    .admin-toggle.active {
      color: var(--gold-300);
      border-color: var(--gold-400);
    }

    .admin-toggle svg {
      width: 15px;
      height: 15px;
    }

    .nav-burger {
      display: none;
      background: none;
      border: none;
      color: var(--stone-100);
      width: 36px;
      height: 36px;
    }

    @media (max-width:920px) {
      nav.main-nav {
        position: fixed;
        inset: 0 0 0 auto;
        top: 0;
        height: 100vh;
        width: min(320px, 84vw);
        background: var(--bg-panel);
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: 26px;
        padding: 40px;
        transform: translateX(100%);
        transition: transform .45s var(--ease-out);
        border-left: 1px solid var(--line);
      }

      nav.main-nav.open {
        transform: translateX(0);
      }

      nav.main-nav a {
        font-size: 15px;
      }

      .nav-burger {
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }

    /* ============================================================
   HERO
   ============================================================ */
    .hero {
      position: relative;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 150px 0 60px;
      overflow: hidden;
      background-color: #0b0a08;
      --bg-void: #0b0a08;
      --bg-panel: #171310;
      --stone-100: #f7f3e9;
      --stone-200: #ede7d9;
      --stone-400: #a89f8c;
      --stone-600: #8b8272;
      --stone-700: #c9c0ad;
      --gold-ink: #d9b25c;
    }

    .hero-topo {
      position: absolute;
      inset: 0;
      z-index: 0;
      opacity: .55;
      pointer-events: none;
    }

    .hero-topo svg {
      width: 100%;
      height: 100%;
    }

    .hero::after {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse at 50% 0%, rgba(217, 178, 92, .08), transparent 60%),
        linear-gradient(180deg, transparent 60%, var(--bg-void) 100%);
      pointer-events: none;
    }

    .hero-content {
      position: relative;
      z-index: 2;
    }

    .hero-kicker {
      margin-bottom: 22px;
    }

    .hero h1 {
      font-size: clamp(2.4rem, 5.6vw, 4.6rem);
      line-height: 1.04;
      max-width: 15ch;
      font-weight: 600;
    }

    .hero-sub {
      margin-top: 26px;
      max-width: 46ch;
      font-size: 17px;
      color: var(--stone-400);
    }

    .hero-actions {
      margin-top: 38px;
      display: flex;
      gap: 16px;
      flex-wrap: wrap;
    }

    .hero-stats {
      display: flex;
      gap: 46px;
      margin-top: 64px;
      flex-wrap: wrap;
    }

    .hero-stat b {
      display: block;
      font-family: var(--font-display);
      font-size: 28px;
      color: var(--gold-300);
    }

    .hero-stat span {
      font-family: var(--font-mono);
      font-size: 11px;
      color: var(--stone-600);
      text-transform: uppercase;
      letter-spacing: .08em;
    }

    /* Scroll showcase strip: exact spec — 3 images, scale .7->1.2,
   opacity 0->1, over 600px scroll, GSAP+ScrollTrigger scrub,
   vertical parallax at 80% of scroll speed (20% slower). */
    .showcase {
      position: relative;
      z-index: 2;
      margin-top: 90px;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 26px;
    }

    .showcase-item {
      position: relative;
      aspect-ratio: 3/4;
      border-radius: var(--radius);
      overflow: hidden;
      border: 1px solid var(--line);
      opacity: 0;
      transform: scale(.7);
      will-change: transform, opacity;
    }

    .showcase-item img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      filter: grayscale(.15) contrast(1.05);
    }

    .showcase-item .tag {
      position: absolute;
      left: 14px;
      bottom: 14px;
      font-family: var(--font-mono);
      font-size: 10.5px;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--stone-100);
      background: rgba(11, 10, 8, .55);
      border: 1px solid var(--line-strong);
      padding: 6px 10px;
      backdrop-filter: blur(4px);
    }

    @media (max-width:820px) {
      .showcase {
        grid-template-columns: 1fr;
        gap: 18px;
      }

      .showcase-item {
        aspect-ratio: 16/10;
      }
    }

    /* ============================================================
   SECTION SCAFFOLDING
   ============================================================ */
    section {
      position: relative;
      padding: 120px 0;
    }

    .section-head {
      max-width: 640px;
      margin-bottom: 64px;
    }

    .section-head h2 {
      margin-top: 18px;
      font-size: clamp(1.9rem, 3.4vw, 2.7rem);
      line-height: 1.12;
    }

    .section-head p {
      margin-top: 18px;
      color: var(--stone-400);
      font-size: 16px;
      max-width: 56ch;
    }

    .reveal {
      opacity: 0;
      transform: translateY(34px);
    }

    /* ============================================================
   ABOUT
   ============================================================ */
    .about-grid {
      display: grid;
      grid-template-columns: .9fr 1.1fr;
      gap: 70px;
      align-items: start;
    }

    .about-story p {
      color: var(--stone-400);
      margin-bottom: 18px;
    }

    .about-story p:last-child {
      margin-bottom: 0;
    }

    .about-story .lede {
      font-family: var(--font-display);
      font-size: 21px;
      color: var(--stone-100);
      line-height: 1.5;
      font-weight: 400;
    }

    .mv-list {
      display: flex;
      flex-direction: column;
      gap: 0;
    }

    .mv-item {
      padding: 26px 0;
      border-top: 1px solid var(--line);
    }

    .mv-item:last-child {
      border-bottom: 1px solid var(--line);
    }

    .mv-item .mv-label {
      font-family: var(--font-mono);
      font-size: 11px;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--gold-ink);
      margin-bottom: 10px;
      display: block;
    }

    .mv-item p {
      color: var(--stone-400);
      font-size: 15px;
    }

    .values-row {
      margin-top: 36px;
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }

    .value-chip {
      font-family: var(--font-mono);
      font-size: 11px;
      letter-spacing: .06em;
      text-transform: uppercase;
      padding: 8px 14px;
      border: 1px solid var(--line-strong);
      color: var(--stone-200);
    }

    @media (max-width:880px) {
      .about-grid {
        grid-template-columns: 1fr;
        gap: 40px;
      }
    }

    /* ============================================================
   SERVICES
   ============================================================ */
    .services-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1px;
      background: var(--line);
      border: 1px solid var(--line);
    }

    .service-card {
      background: var(--bg-void);
      padding: 34px 26px;
      transition: background .4s;
    }

    .service-card:hover {
      background: var(--bg-panel);
    }

    .service-num {
      font-family: var(--font-mono);
      font-size: 11px;
      color: var(--gold-ink);
      margin-bottom: 22px;
      display: block;
    }

    .service-card h3 {
      font-size: 19px;
      margin-bottom: 12px;
      font-weight: 600;
    }

    .service-card p {
      color: var(--stone-400);
      font-size: 14px;
    }

    @media (max-width:980px) {
      .services-grid {
        grid-template-columns: 1fr 1fr;
      }
    }

    @media (max-width:560px) {
      .services-grid {
        grid-template-columns: 1fr;
      }
    }

    /* ============================================================
   PROCESS (real sequence — numbering earned here)
   ============================================================ */
    .process-list {
      display: flex;
      flex-direction: column;
    }

    .process-step {
      display: grid;
      grid-template-columns: 90px 1fr;
      gap: 30px;
      padding: 34px 0;
      border-top: 1px solid var(--line);
      align-items: start;
    }

    .process-list .process-step:last-child {
      border-bottom: 1px solid var(--line);
    }

    .process-step .pnum {
      font-family: var(--font-display);
      font-size: 38px;
      color: var(--gold-ink);
      font-weight: 300;
    }

    .process-step h4 {
      font-size: 18px;
      margin-bottom: 10px;
    }

    .process-step p {
      color: var(--stone-400);
      font-size: 14.5px;
      max-width: 60ch;
    }

    @media (max-width:600px) {
      .process-step {
        grid-template-columns: 50px 1fr;
        gap: 18px;
      }

      .process-step .pnum {
        font-size: 26px;
      }
    }

    /* ============================================================
   CATALOG
   ============================================================ */
    .catalog-toolbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 16px;
      margin-bottom: 36px;
    }

    .filter-row {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }

    .filter-chip {
      font-family: var(--font-mono);
      font-size: 11.5px;
      letter-spacing: .05em;
      text-transform: uppercase;
      padding: 9px 16px;
      border: 1px solid var(--line-strong);
      color: var(--stone-400);
      background: transparent;
      transition: all .25s;
      border-radius: var(--radius);
    }

    .filter-chip:hover {
      color: var(--stone-100);
      border-color: var(--gold-400);
    }

    .filter-chip.active {
      background: var(--gold-400);
      color: #1a1408;
      border-color: var(--gold-400);
      font-weight: 600;
    }

    .admin-bar {
      display: none;
      align-items: center;
      gap: 12px;
      background: linear-gradient(90deg, rgba(184, 137, 46, .14), transparent);
      border: 1px solid var(--line-strong);
      padding: 14px 20px;
      margin-bottom: 34px;
      font-family: var(--font-mono);
      font-size: 12px;
      color: var(--gold-ink);
      flex-wrap: wrap;
    }

    .admin-bar.visible {
      display: flex;
    }

    .admin-bar .spacer {
      flex: 1;
    }

    .catalog-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 30px;
    }

    @media (max-width:980px) {
      .catalog-grid {
        grid-template-columns: 1fr 1fr;
      }
    }

    @media (max-width:640px) {
      .catalog-grid {
        grid-template-columns: 1fr;
      }
    }

    .property-card {
      background: var(--bg-panel);
      border: 1px solid var(--line);
      display: flex;
      flex-direction: column;
      transition: border-color .35s, transform .35s var(--ease-out);
      position: relative;
    }

    .property-card:hover {
      border-color: var(--line-strong);
      transform: translateY(-4px);
    }

    .pc-media {
      position: relative;
      aspect-ratio: 4/3;
      overflow: hidden;
      background: var(--bg-panel-2);
    }

    .pc-media img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform .7s var(--ease-out);
    }

    .property-card:hover .pc-media img {
      transform: scale(1.06);
    }

    .pc-status {
      position: absolute;
      top: 12px;
      left: 12px;
      font-family: var(--font-mono);
      font-size: 10px;
      letter-spacing: .08em;
      text-transform: uppercase;
      padding: 5px 10px;
      background: rgba(11, 10, 8, .7);
      backdrop-filter: blur(4px);
      border: 1px solid var(--line-strong);
      color: var(--stone-100);
    }

    .pc-status[data-status="Disponible"] {
      color: var(--ok);
      border-color: rgba(127, 174, 122, .4);
    }

    .pc-status[data-status="Reservado"] {
      color: var(--warn);
      border-color: rgba(201, 154, 74, .4);
    }

    .pc-status[data-status="Vendido"] {
      color: var(--danger);
      border-color: rgba(181, 87, 63, .4);
    }

    .pc-play {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(11, 10, 8, 0);
      transition: background .3s;
    }

    .pc-play:hover {
      background: rgba(11, 10, 8, .35);
    }

    .pc-play-btn {
      width: 52px;
      height: 52px;
      border-radius: 50%;
      border: 1px solid var(--gold-300);
      background: rgba(11, 10, 8, .55);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--gold-300);
      opacity: 0;
      transform: scale(.85);
      transition: all .3s var(--ease-out);
    }

    .pc-play:hover .pc-play-btn {
      opacity: 1;
      transform: scale(1);
    }

    .pc-play-btn svg {
      width: 16px;
      height: 16px;
      margin-left: 2px;
    }

    .pc-body {
      padding: 22px 22px 24px;
      display: flex;
      flex-direction: column;
      gap: 14px;
      flex: 1;
    }

    .pc-top {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 10px;
    }

    .pc-type {
      font-family: var(--font-mono);
      font-size: 10.5px;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--gold-ink);
    }

    .pc-price {
      font-family: var(--font-display);
      font-size: 19px;
      color: var(--stone-100);
      white-space: nowrap;
    }

    .pc-title {
      font-size: 18px;
      font-weight: 600;
    }

    .pc-loc {
      font-size: 13px;
      color: var(--stone-400);
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .pc-specs {
      display: flex;
      gap: 16px;
      font-family: var(--font-mono);
      font-size: 12px;
      color: var(--stone-400);
      border-top: 1px solid var(--line);
      padding-top: 14px;
    }

    .pc-desc {
      font-size: 13.5px;
      color: var(--stone-400);
    }

    .pc-actions {
      display: flex;
      gap: 10px;
      margin-top: auto;
      padding-top: 6px;
    }

    .pc-actions .btn {
      flex: 1;
      padding: 12px 14px;
      font-size: 11px;
    }

    .pc-admin-actions {
      display: flex;
      gap: 8px;
      padding: 0 22px 20px;
      margin-top: -6px;
    }

    .pc-admin-actions button {
      flex: 1;
      font-family: var(--font-mono);
      font-size: 10.5px;
      padding: 8px;
      background: none;
      border: 1px dashed var(--line-strong);
      color: var(--stone-400);
      transition: all .25s;
    }

    .pc-admin-actions button:hover {
      color: var(--gold-ink);
      border-color: var(--gold-400);
    }

    .pc-admin-actions button.danger:hover {
      color: #d99a86;
      border-color: var(--danger);
    }

    .catalog-empty {
      text-align: center;
      padding: 70px 20px;
      color: var(--stone-600);
      font-family: var(--font-mono);
      font-size: 13px;
      border: 1px dashed var(--line-strong);
    }

    .add-card {
      border: 1px dashed var(--line-strong);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 14px;
      min-height: 340px;
      color: var(--stone-400);
      transition: all .3s;
      background: transparent;
      width: 100%;
    }

    .add-card:hover {
      border-color: var(--gold-400);
      color: var(--gold-ink);
      background: rgba(184, 137, 46, .06);
    }

    .add-card .plus {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      border: 1px solid currentColor;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      font-weight: 300;
    }

    .add-card span {
      font-family: var(--font-mono);
      font-size: 12px;
      letter-spacing: .06em;
      text-transform: uppercase;
    }

    /* ============================================================
   TRUST / WHY US
   ============================================================ */
    .why-wrap {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 60px;
      align-items: center;
    }

    .why-list {
      display: flex;
      flex-direction: column;
      gap: 0;
    }

    .why-item {
      display: flex;
      gap: 20px;
      padding: 24px 0;
      border-top: 1px solid var(--line);
    }

    .why-list .why-item:last-child {
      border-bottom: 1px solid var(--line);
    }

    .why-icon {
      width: 38px;
      height: 38px;
      flex-shrink: 0;
      border: 1px solid var(--gold-800);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--gold-ink);
    }

    .why-icon svg {
      width: 16px;
      height: 16px;
    }

    .why-item h4 {
      font-size: 16px;
      margin-bottom: 6px;
    }

    .why-item p {
      font-size: 14px;
      color: var(--stone-400);
    }

    .why-media {
      position: relative;
      aspect-ratio: 4/5;
      overflow: hidden;
      border: 1px solid var(--line);
    }

    .why-media img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    @media (max-width:880px) {
      .why-wrap {
        grid-template-columns: 1fr;
      }

      .why-media {
        order: -1;
        aspect-ratio: 16/10;
      }
    }

    /* ============================================================
   AUDIENCE (public objetivo) — TOFU trust builder
   ============================================================ */
    .audience-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 1px;
      background: var(--line);
      border: 1px solid var(--line);
    }

    .audience-card {
      background: var(--bg-void);
      padding: 26px 20px;
      min-height: 150px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .audience-card span {
      font-family: var(--font-mono);
      font-size: 10px;
      color: var(--gold-ink);
    }

    .audience-card p {
      font-size: 13.5px;
      color: var(--stone-200);
      margin-top: 16px;
      line-height: 1.45;
    }

    @media (max-width:980px) {
      .audience-grid {
        grid-template-columns: 1fr 1fr;
      }
    }

    @media (max-width:560px) {
      .audience-grid {
        grid-template-columns: 1fr;
      }
    }

    /* ============================================================
   FINAL CTA (BOFU)
   ============================================================ */
    .final-cta {
      position: relative;
      padding: 110px 0;
      background: #0b0a08;
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
      overflow: hidden;
      --stone-100: #f7f3e9;
      --stone-200: #ede7d9;
      --stone-400: #a89f8c;
      --stone-600: #8b8272;
      --stone-700: #c9c0ad;
      --bg-panel: #171310;
      --gold-ink: #d9b25c;
    }

    .final-cta-inner {
      position: relative;
      z-index: 2;
      max-width: 720px;
    }

    .final-cta h2 {
      font-size: clamp(2rem, 4vw, 3.1rem);
      line-height: 1.1;
    }

    .final-cta p {
      margin-top: 20px;
      color: var(--stone-400);
      font-size: 16px;
      max-width: 52ch;
    }

    .final-cta-actions {
      margin-top: 38px;
      display: flex;
      gap: 16px;
      flex-wrap: wrap;
    }

    .final-cta-note {
      margin-top: 26px;
      font-family: var(--font-mono);
      font-size: 11.5px;
      color: var(--gold-600);
      letter-spacing: .03em;
    }

    /* ============================================================
   FOOTER
   ============================================================ */
    footer {
      padding: 70px 0 34px;
      background: #0b0a08;
      --stone-100: #f7f3e9;
      --stone-200: #ede7d9;
      --stone-400: #a89f8c;
      --stone-600: #8b8272;
      --stone-700: #c9c0ad;
      --bg-panel: #171310;
      --gold-ink: #d9b25c;
    }

    .footer-grid {
      display: grid;
      grid-template-columns: 1.4fr 1fr 1fr 1fr;
      gap: 40px;
      padding-bottom: 50px;
      border-bottom: 1px solid var(--line);
    }

    .footer-brand {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 18px;
    }

    .footer-brand img {
      height: 38px;
    }

    .footer-brand strong {
      font-family: var(--font-display);
      color: var(--gold-300);
      font-size: 16px;
    }

    .footer-col h5 {
      font-family: var(--font-mono);
      font-size: 11px;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--gold-400);
      margin-bottom: 18px;
    }

    .footer-col ul {
      display: flex;
      flex-direction: column;
      gap: 11px;
    }

    .footer-col a,
    .footer-col p {
      font-size: 14px;
      color: var(--stone-400);
    }

    .footer-col a:hover {
      color: var(--gold-300);
    }

    .footer-p {
      max-width: 34ch;
      color: var(--stone-600);
      font-size: 13.5px;
      margin-top: 14px;
    }

    .footer-bottom {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-top: 28px;
      flex-wrap: wrap;
      gap: 14px;
      font-family: var(--font-mono);
      font-size: 11.5px;
      color: var(--stone-700);
    }

    .social-row {
      display: flex;
      gap: 12px;
    }

    .social-row a {
      width: 34px;
      height: 34px;
      border: 1px solid var(--line-strong);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--stone-400);
      transition: all .25s;
    }

    .social-row a:hover {
      color: var(--gold-300);
      border-color: var(--gold-400);
    }

    .social-row svg {
      width: 14px;
      height: 14px;
    }

    @media (max-width:880px) {
      .footer-grid {
        grid-template-columns: 1fr 1fr;
      }
    }

    @media (max-width:520px) {
      .footer-grid {
        grid-template-columns: 1fr;
      }
    }

    /* ============================================================
   WHATSAPP FLOAT
   ============================================================ */
    .wa-float {
      position: fixed;
      right: 24px;
      bottom: 24px;
      z-index: 150;
      width: 56px;
      height: 56px;
      border-radius: 50%;
      background: linear-gradient(120deg, var(--gold-300), var(--gold-600));
      display: flex;
      align-items: center;
      justify-content: center;
      color: #1a1408;
      box-shadow: 0 10px 30px -8px rgba(217, 178, 92, .6);
      transition: transform .3s var(--ease-out);
    }

    .wa-float:hover {
      transform: scale(1.08);
    }

    .wa-float svg {
      width: 24px;
      height: 24px;
    }

    .social-float-stack {
      position: fixed;
      right: 24px;
      bottom: 92px;
      z-index: 150;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .social-float {
      width: 46px;
      height: 46px;
      border-radius: 50%;
      background: var(--bg-panel);
      border: 1px solid var(--gold-400);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--gold-ink);
      box-shadow: 0 8px 22px -8px rgba(0, 0, 0, .6);
      transition: transform .3s var(--ease-out), background .3s, color .3s;
    }

    .social-float:hover {
      transform: scale(1.08);
      background: linear-gradient(120deg, var(--gold-300), var(--gold-600));
      color: #1a1408;
    }

    .social-float svg {
      width: 19px;
      height: 19px;
    }

    @media (max-width:600px) {
      .social-float-stack {
        right: 16px;
        bottom: 82px;
        gap: 10px;
      }

      .social-float {
        width: 40px;
        height: 40px;
      }

      .social-float svg {
        width: 16px;
        height: 16px;
      }
    }

    /* ============================================================
   MODALS
   ============================================================ */
    .modal-overlay {
      position: fixed;
      inset: 0;
      background: rgba(6, 5, 4, .78);
      backdrop-filter: blur(4px);
      z-index: 500;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px;
      opacity: 0;
      pointer-events: none;
      transition: opacity .3s;
    }

    .modal-overlay.open {
      opacity: 1;
      pointer-events: auto;
    }

    .modal-box {
      background: var(--bg-panel);
      border: 1px solid var(--line-strong);
      max-width: 520px;
      width: 100%;
      max-height: 88vh;
      overflow-y: auto;
      padding: 38px;
      transform: translateY(18px);
      transition: transform .35s var(--ease-out);
    }

    .modal-overlay.open .modal-box {
      transform: translateY(0);
    }

    .modal-box.wide {
      max-width: 640px;
    }

    .modal-head {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 26px;
      gap: 20px;
    }

    .modal-head h3 {
      font-size: 21px;
    }

    .modal-head p {
      font-size: 13px;
      color: var(--stone-400);
      margin-top: 8px;
    }

    .modal-close {
      background: none;
      border: 1px solid var(--line-strong);
      width: 32px;
      height: 32px;
      border-radius: 50%;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--stone-400);
      transition: all .25s;
    }

    .modal-close:hover {
      color: var(--gold-ink);
      border-color: var(--gold-400);
    }

    .field {
      display: flex;
      flex-direction: column;
      gap: 7px;
      margin-bottom: 16px;
    }

    .field label {
      font-family: var(--font-mono);
      font-size: 10.5px;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--stone-400);
    }

    .field input,
    .field select,
    .field textarea {
      background: var(--bg-void);
      border: 1px solid var(--line-strong);
      color: var(--stone-100);
      padding: 12px 14px;
      font-family: var(--font-body);
      font-size: 14px;
      border-radius: var(--radius);
    }

    .field input:focus,
    .field select:focus,
    .field textarea:focus {
      outline: none;
      border-color: var(--gold-400);
    }

    .field textarea {
      resize: vertical;
      min-height: 80px;
    }

    .field-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
    }

    @media (max-width:480px) {
      .field-row {
        grid-template-columns: 1fr;
      }
    }

    .form-footer {
      display: flex;
      gap: 12px;
      margin-top: 22px;
    }

    .form-footer .btn {
      flex: 1;
    }

    .form-note {
      font-size: 12px;
      color: var(--stone-600);
      margin-top: 14px;
      line-height: 1.5;
    }

    .chip-group {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .chip-option {
      font-family: var(--font-mono);
      font-size: 12px;
      letter-spacing: .04em;
      padding: 9px 14px;
      border: 1px solid var(--line-strong);
      color: var(--stone-400);
      background: var(--bg-void);
      transition: all .2s;
      border-radius: var(--radius);
    }

    .chip-option:hover {
      border-color: var(--gold-400);
      color: var(--stone-100);
    }

    .chip-option.selected {
      background: var(--gold-400);
      border-color: var(--gold-400);
      color: #1a1408;
      font-weight: 600;
    }

    .schedule-summary {
      font-family: var(--font-mono);
      font-size: 12px;
      color: var(--gold-ink);
      margin-bottom: 16px;
    }

    .toast {
      position: fixed;
      bottom: 24px;
      left: 50%;
      transform: translate(-50%, 140%);
      background: var(--bg-panel-3);
      border: 1px solid var(--gold-400);
      color: #f7f3e9;
      padding: 16px 24px;
      font-size: 13.5px;
      z-index: 600;
      transition: transform .4s var(--ease-out);
      display: flex;
      align-items: center;
      gap: 12px;
      max-width: 90vw;
    }

    .toast.show {
      transform: translate(-50%, 0);
    }

    .toast svg {
      width: 16px;
      height: 16px;
      color: var(--gold-300);
      flex-shrink: 0;
    }

    .video-modal-box {
      max-width: 820px;
      padding: 0;
      background: #000;
      border-color: var(--line-strong);
    }

    .video-modal-box video {
      width: 100%;
      display: block;
      max-height: 80vh;
    }

    /* leads list inside admin modal */
    .lead-item {
      border-top: 1px solid var(--line);
      padding: 14px 0;
      font-size: 13px;
    }

    .lead-item:last-child {
      border-bottom: 1px solid var(--line);
    }

    .lead-item b {
      color: var(--gold-300);
    }

    .lead-item .lead-meta {
      font-family: var(--font-mono);
      font-size: 11px;
      color: var(--stone-600);
      margin-top: 4px;
    }

    .lead-empty {
      color: var(--stone-600);
      font-size: 13px;
      padding: 20px 0;
      text-align: center;
    }

    @media (max-width:600px) {
      section {
        padding: 80px 0;
      }

      .hero {
        padding: 130px 0 40px;
      }
    }
  </style>
</head>

<body>
  <script>
    function desbloquearScroll() {document.body.style.overflowY = 'auto'; document.body.style.position = 'static'; document.body.style.touchAction = 'auto'; document.documentElement.style.overflowY = 'auto'} window.addEventListener('pageshow', desbloquearScroll); window.addEventListener('popstate', desbloquearScroll); document.addEventListener('click', function (e) {const t = e.target.closest('.cerrar,.close,.modal-close,[data-cerrar],button[aria-label="Cerrar"],.modal-overlay'); t && setTimeout(desbloquearScroll, 50)}); new MutationObserver(desbloquearScroll).observe(document.body, {attributes: !0, attributeFilter: ['style']});
  </script>
</body>

</html>
<!-- ============================================================
     HEADER
     ============================================================ -->
<header class="site-header" id="siteHeader">
  <div class="container header-inner">
    <div class="brand">
      <img src="logo_martha.jpeg" alt="Martha Masabanda" class="logo-blend">

    </div>
    <button class="nav-burger" id="navBurger" aria-label="Abrir menú" aria-expanded="false">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
        <line x1="3" y1="6" x2="21" y2="6" />
        <line x1="3" y1="12" x2="21" y2="12" />
        <line x1="3" y1="18" x2="21" y2="18" />
      </svg>
    </button>
    <nav class="main-nav" id="mainNav">
      <a href="#nosotros" data-nav>Nosotros</a>
      <a href="#servicios" data-nav>Servicios</a>
      <a href="#catalogo" data-nav>Catálogo</a>
      <a href="#proceso" data-nav>Proceso</a>
      <a href="#contacto" data-nav>Contacto</a>
    </nav>
    <div class="header-cta">
      <a href="#catalogo" class="btn btn-primary btn-small" id="headerAgendarCita">Agendar cita</a>
      <button class="admin-toggle" id="adminToggle" aria-label="Modo administrador" title="Modo administrador">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6">
          <rect x="5" y="11" width="14" height="9" rx="1" />
          <path d="M8 11V7a4 4 0 0 1 8 0v4" />
        </svg>
      </button>
    </div>
  </div>
</header>

<!-- ============================================================
     HERO
     ============================================================ -->
<section class="hero">
  <div class="hero-topo" aria-hidden="true">
    <svg viewBox="0 0 1400 900" preserveAspectRatio="xMidYMid slice">
      <g fill="none" stroke="var(--gold-800)" stroke-width="1" opacity="0.35">
        <path d="M-50,120 C 250,60 450,180 750,110 S 1250,60 1450,140" />
        <path d="M-50,240 C 280,170 500,300 800,220 S 1250,170 1450,260" />
        <path d="M-50,360 C 300,300 520,410 820,340 S 1260,300 1450,380" />
        <path d="M-50,600 C 260,540 480,660 780,590 S 1240,540 1450,620" />
        <path d="M-50,740 C 280,690 500,800 800,730 S 1250,690 1450,760" />
      </g>
    </svg>
  </div>
  <div class="container hero-content">
    <div class="hero-kicker eyebrow">Asesoría Legal &amp; Bienes Raíces</div>
    <h1>Cada propiedad tiene una historia.<br><span class="gold-text">La tuya empieza con un título limpio.</span>
    </h1>
    <p class="hero-sub">Compra, vende, alquila o administra tu inmueble con respaldo jurídico real. Nacimos de una
      venta que casi sale mal — por eso ahora nadie firma sin entender lo que firma.</p>
    <div class="hero-actions">
      <a href="#catalogo" class="btn btn-primary">Ver catálogo de propiedades</a>
      <a href="#contacto" class="btn btn-ghost">Hablar con un asesor</a>
    </div>
    <div class="hero-stats">
      <div class="hero-stat"><b id="statCount">—</b><span>Propiedades activas</span></div>
      <div class="hero-stat"><b>1+</b><span>Año de trayectoria formal</span></div>
      <div class="hero-stat"><b>5</b><span>Servicios inmobiliarios</span></div>
      <div class="hero-stat"><b>100%</b><span>Asesoría jurídica incluida</span></div>
    </div>

    <!-- Scroll showcase: exact GSAP spec -->
    <div class="showcase" id="showcase">
      <div class="showcase-item" data-showcase>
        <img src="https://images.unsplash.com/photo-1568605114967-8130f3a36994?auto=format&fit=crop&w=1000&q=80"
          alt="Casa moderna en venta">
        <span class="tag">Casas</span>
      </div>
      <div class="showcase-item" data-showcase>
        <img src="https://images.unsplash.com/photo-1522708323590-d24dbb6b0267?auto=format&fit=crop&w=1000&q=80"
          alt="Departamento en alquiler">
        <span class="tag">Departamentos</span>
      </div>
      <div class="showcase-item" data-showcase>
        <img src="https://images.unsplash.com/photo-1500382017468-9049fed747ef?auto=format&fit=crop&w=1000&q=80"
          alt="Terreno disponible">
        <span class="tag">Terrenos</span>
      </div>
    </div>
  </div>
</section>

<div class="survey-divider" data-divider>
  <svg viewBox="0 0 1400 34" preserveAspectRatio="none">
    <line class="survey-path" x1="0" y1="17" x2="1400" y2="17" />
    <g class="survey-tick">
      <line x1="120" y1="8" x2="120" y2="26" />
      <line x1="420" y1="8" x2="420" y2="26" />
      <line x1="720" y1="8" x2="720" y2="26" />
      <line x1="1020" y1="8" x2="1020" y2="26" />
      <line x1="1320" y1="8" x2="1320" y2="26" />
    </g>
    <text x="120" y="6">N 01°15'S</text><text x="720" y="6">W 78°32'</text><text x="1320" y="6">LOTE 04</text>
  </svg>
</div>

<!-- ============================================================
     SOBRE NOSOTROS
     ============================================================ -->
<section id="nosotros">
  <div class="container">
    <div class="section-head reveal">
      <div class="eyebrow">Quiénes somos</div>
      <h2>Una asesoría que nació de <span class="gold-text-ink">vender una sola casa</span> — y entender lo mal que
        puede salir sin respaldo legal.</h2>
    </div>
    <div class="about-grid">
      <div class="about-story reveal">
        <p class="lede">Martha Masabanda inició hace un año, pero su origen es anterior: la fundadora puso en venta su
          propia casa y descubrió, en carne propia, cuánto dinero y tranquilidad se pierden por trámites mal hechos.
        </p>
        <p>Cuando la pandemia dejó a muchas familias sin empleo, esa experiencia personal se convirtió en decisión:
          construir una firma que uniera dos cosas que casi nunca van juntas en el sector — buen ojo comercial y
          solidez jurídica real.</p>
        <p>Hoy acompañamos compra, venta, alquiler y administración de inmuebles con un equipo que revisa cada
          documento antes de que tú firmes cualquier cosa.</p>
        <div class="values-row">
          <span class="value-chip">Honestidad</span>
          <span class="value-chip">Transparencia</span>
          <span class="value-chip">Confianza</span>
          <span class="value-chip">Seguridad jurídica</span>
          <span class="value-chip">Responsabilidad</span>
        </div>
      </div>
      <div class="mv-list reveal">
        <div class="mv-item">
          <span class="mv-label">Misión</span>
          <p>Ser una firma inmobiliaria y de asesoría legal ampliamente reconocida en el sector, ofreciendo
            intermediación y comercialización con los más altos estándares de calidad, transparencia y seguridad
            jurídica.</p>
        </div>
        <div class="mv-item">
          <span class="mv-label">Visión</span>
          <p>Consolidar un equipo técnico y legal fortalecido, con identidad propia y excelencia operativa, proyectado
            hacia proyectos urbanísticos, lotización y construcción.</p>
        </div>
        <div class="mv-item">
          <span class="mv-label">Cómo trabajamos</span>
          <p>Cada inmueble que publicamos pasa antes por revisión legal: escrituras, gravámenes y estado del título.
            Lo que ves en el catálogo ya fue verificado.</p>
        </div>
      </div>
    </div>
  </div>
</section>

<div class="survey-divider" data-divider>
  <svg viewBox="0 0 1400 34" preserveAspectRatio="none">
    <line class="survey-path" x1="0" y1="17" x2="1400" y2="17" />
    <g class="survey-tick">
      <line x1="200" y1="8" x2="200" y2="26" />
      <line x1="560" y1="8" x2="560" y2="26" />
      <line x1="900" y1="8" x2="900" y2="26" />
      <line x1="1240" y1="8" x2="1240" y2="26" />
    </g>
    <text x="200" y="6">LINDERO N</text><text x="900" y="6">S 00°08'</text>
  </svg>
</div>

<!-- ============================================================
     SERVICIOS
     ============================================================ -->
<section id="servicios">
  <div class="container">
    <div class="section-head reveal">
      <div class="eyebrow">Qué hacemos</div>
      <h2>Servicios inmobiliarios integrales, con abogado incluido en cada paso.</h2>
      <p>Actividades inmobiliarias realizadas con bienes propios, arrendados, o a cambio de una retribución o contrato
        — todo bajo un mismo equipo.</p>
    </div>
    <div class="services-grid reveal">
      <div class="service-card">
        <span class="service-num">01</span>
        <h3>Compraventa</h3>
        <p>Intermediación en la compra y venta de casas, departamentos, terrenos, locales y oficinas, de principio a
          fin.</p>
      </div>
      <div class="service-card">
        <span class="service-num">02</span>
        <h3>Alquiler</h3>
        <p>Gestión de arriendos con contratos claros, garantías y seguimiento durante toda la relación arrendaticia.
        </p>
      </div>
      <div class="service-card">
        <span class="service-num">03</span>
        <h3>Asesoría legal</h3>
        <p>Corretaje y acompañamiento jurídico integral: revisión de escrituras, gravámenes y estado registral.</p>
      </div>
      <div class="service-card">
        <span class="service-num">04</span>
        <h3>Administración</h3>
        <p>Promoción, comercialización y administración de bienes inmuebles y proyectos urbanísticos.</p>
      </div>
    </div>
  </div>
</section>

<!-- ============================================================
     PROCESO
     ============================================================ -->
<section id="proceso">
  <div class="container">
    <div class="section-head reveal">
      <div class="eyebrow">Cómo funciona</div>
      <h2>De la primera visita a la escritura, en cuatro pasos.</h2>
      <p>Este sí es un orden real: así avanza cada expediente en la asesoría, sin saltos.</p>
    </div>
    <div class="process-list reveal">
      <div class="process-step">
        <span class="pnum">01</span>
        <div>
          <h4>Agendas una cita</h4>
          <p>Eliges la propiedad o cuéntanos qué buscas. Coordinamos visita presencial o asesoría virtual, sin costo.
          </p>
        </div>
      </div>
      <div class="process-step">
        <span class="pnum">02</span>
        <div>
          <h4>Revisión legal del inmueble</h4>
          <p>Verificamos escrituras, gravámenes y estado del título antes de avanzar en cualquier negociación.</p>
        </div>
      </div>
      <div class="process-step">
        <span class="pnum">03</span>
        <div>
          <h4>Negociación y reserva</h4>
          <p>Apartamos el bien a tu nombre y acompañamos la negociación de precio y condiciones con la contraparte.
          </p>
        </div>
      </div>
      <div class="process-step">
        <span class="pnum">04</span>
        <div>
          <h4>Cierre y escritura</h4>
          <p>Formalizamos ante notaría y registro de la propiedad, con toda la documentación en regla.</p>
        </div>
      </div>
    </div>
  </div>
</section>

<div class="survey-divider" data-divider>
  <svg viewBox="0 0 1400 34" preserveAspectRatio="none">
    <line class="survey-path" x1="0" y1="17" x2="1400" y2="17" />
    <g class="survey-tick">
      <line x1="160" y1="8" x2="160" y2="26" />
      <line x1="480" y1="8" x2="480" y2="26" />
      <line x1="820" y1="8" x2="820" y2="26" />
      <line x1="1180" y1="8" x2="1180" y2="26" />
    </g>
    <text x="160" y="6">ESC. 1:500</text><text x="820" y="6">LOTE 07</text>
  </svg>
</div>

<!-- ============================================================
     CATÁLOGO
     ============================================================ -->
<section id="catalogo">
  <div class="container">
    <div class="section-head reveal">
      <div class="eyebrow">Catálogo</div>
      <h2>Propiedades disponibles ahora.</h2>
      <p>Fotos, video y ficha técnica de cada inmueble. Agenda una visita o aparta tu propiedad directamente desde
        aquí.</p>
    </div>

    <div class="admin-bar" id="adminBar">
      <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6">
        <rect x="5" y="11" width="14" height="9" rx="1" />
        <path d="M8 11V7a4 4 0 0 1 8 0v4" />
      </svg>
      <span>Modo administrador activo — puedes agregar, editar, marcar como vendido o eliminar propiedades.</span>
      <div class="spacer"></div>
      <button class="btn btn-ghost btn-small" id="viewLeadsBtn" type="button">Ver solicitudes (<span
          id="leadCount">0</span>)</button>
      <button class="btn btn-ghost btn-small" id="exitAdminBtn" type="button">Salir</button>
    </div>

    <div class="catalog-toolbar reveal">
      <div class="filter-row" id="filterRow">
        <button class="filter-chip active" data-filter="Todos" type="button">Todos</button>
        <button class="filter-chip" data-filter="Casa" type="button">Casas</button>
        <button class="filter-chip" data-filter="Departamento" type="button">Departamentos</button>
        <button class="filter-chip" data-filter="Terreno" type="button">Terrenos</button>
        <button class="filter-chip" data-filter="Local" type="button">Locales</button>
        <button class="filter-chip" data-filter="Oficina" type="button">Oficinas</button>
      </div>
    </div>

    <div class="catalog-grid" id="catalogGrid">
      <!-- rendered by JS -->
    </div>
  </div>
</section>

<div class="survey-divider" data-divider>
  <svg viewBox="0 0 1400 34" preserveAspectRatio="none">
    <line class="survey-path" x1="0" y1="17" x2="1400" y2="17" />
    <g class="survey-tick">
      <line x1="240" y1="8" x2="240" y2="26" />
      <line x1="640" y1="8" x2="640" y2="26" />
      <line x1="1040" y1="8" x2="1040" y2="26" />
    </g>
    <text x="240" y="6">E 00°42'</text><text x="1040" y="6">LOTE 12</text>
  </svg>
</div>

<!-- ============================================================
     POR QUÉ ELEGIRNOS
     ============================================================ -->
<section id="porque">
  <div class="container">
    <div class="why-wrap">
      <div class="why-media reveal">
        <img src="https://images.unsplash.com/photo-1556155092-490a1ba16284?auto=format&fit=crop&w=900&q=80"
          alt="Asesoría legal inmobiliaria">
      </div>
      <div class="reveal">
        <div class="eyebrow">Por qué elegirnos</div>
        <h2 style="margin-top:18px;font-size:clamp(1.8rem,3vw,2.4rem);">Compra y vende sin sorpresas legales después
          de la firma.</h2>
        <div class="why-list" style="margin-top:32px;">
          <div class="why-item">
            <div class="why-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6">
                <path d="M9 12l2 2 4-4" />
                <circle cx="12" cy="12" r="9" />
              </svg></div>
            <div>
              <h4>Título verificado</h4>
              <p>Cada propiedad pasa por revisión de escrituras y gravámenes antes de publicarse.</p>
            </div>
          </div>
          <div class="why-item">
            <div class="why-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6">
                <path d="M12 3l8 4v5c0 5-3.5 7.5-8 9-4.5-1.5-8-4-8-9V7l8-4z" />
              </svg></div>
            <div>
              <h4>Respaldo jurídico real</h4>
              <p>No solo vendemos: acompañamos la parte legal de principio a fin, sin letras chiquitas.</p>
            </div>
          </div>
          <div class="why-item">
            <div class="why-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6">
                <path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-6h6v6" />
              </svg></div>
            <div>
              <h4>Pensado para migrantes</h4>
              <p>Gestionamos citas y trámites a distancia para quienes invierten desde el exterior.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- ============================================================
     AUDIENCIA
     ============================================================ -->
<section id="audiencia" style="padding-top:0;">
  <div class="container">
    <div class="section-head reveal">
      <div class="eyebrow">Para quién trabajamos</div>
      <h2>Sea cual sea tu punto de partida, hay un camino claro.</h2>
    </div>
    <div class="audience-grid reveal">
      <div class="audience-card"><span>01</span>
        <p>Migrantes ecuatorianos que quieren invertir en Ecuador desde el exterior.</p>
      </div>
      <div class="audience-card"><span>02</span>
        <p>Familias buscando su primera vivienda o un cambio de propiedad.</p>
      </div>
      <div class="audience-card"><span>03</span>
        <p>Inversionistas interesados en bienes con alto potencial de plusvalía.</p>
      </div>
      <div class="audience-card"><span>04</span>
        <p>Propietarios que buscan vender con respaldo seguro y legal.</p>
      </div>
      <div class="audience-card"><span>05</span>
        <p>Jóvenes adultos construyendo su primer patrimonio.</p>
      </div>
    </div>
  </div>
</section>

<!-- ============================================================
     CTA FINAL (BOFU)
     ============================================================ -->
<section class="final-cta" id="contacto">
  <div class="container final-cta-inner">
    <div class="eyebrow">Último paso</div>
    <h2 style="margin-top:18px;">Agenda tu asesoría gratuita antes de que alguien más aparte ese lote.</h2>
    <p>Sin compromiso. Un asesor legal revisa tu caso, te explica el estado del inmueble que te interesa y coordina la
      visita en el horario que te sirva.</p>
    <div class="final-cta-actions">
      <button class="btn btn-primary" id="openContactModal" type="button">Agendar asesoría gratuita</button>
      <a class="btn btn-ghost" id="waHeroLink" href="#" target="_blank" rel="noopener">Escribir por WhatsApp</a>
    </div>
    <p class="final-cta-note">Respuesta en menos de 24 horas hábiles.</p>
  </div>
</section>

<!-- ============================================================
     FOOTER
     ============================================================ -->
<footer>
  <div class="container">
    <div class="footer-grid">
      <div>
        <div class="footer-brand">
          <img src="slogan.jpeg" alt="Martha Masabanda" class="logo-blend">
        </div>
        <p class="footer-p">Asesoría legal y bienes raíces. Compra, venta, alquiler y administración de inmuebles con
          seguridad jurídica en cada paso.</p>
        <div class="social-row" style="margin-top:20px;">
          <a href="#" id="socialInstagram" target="_blank" rel="noopener" aria-label="Instagram"><svg
              viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6">
              <rect x="3" y="3" width="18" height="18" rx="5" />
              <circle cx="12" cy="12" r="4" />
              <circle cx="17.2" cy="6.8" r="1" />
            </svg></a>
          <a href="#" id="socialTiktok" target="_blank" rel="noopener" aria-label="TikTok"><svg viewBox="0 0 24 24"
              fill="currentColor">
              <path
                d="M14 3c.3 1.9 1.6 3.4 3.5 3.7v2.4c-1.3 0-2.5-.4-3.5-1.1v6.3a5 5 0 1 1-4-4.9v2.5a2.5 2.5 0 1 0 1.7 2.4V3H14z" />
            </svg></a>
          <a href="#" id="socialThreads" target="_blank" rel="noopener" aria-label="Threads"><svg viewBox="0 0 24 24"
              fill="none" stroke="currentColor" stroke-width="1.6">
              <path
                d="M8 8.5c0-2 1.6-3.2 4-3.2 2.8 0 4.3 1.7 4.3 4.3 0 1.4-.5 2.3-1.6 2.8 1.4.5 2.1 1.7 2.1 3.3 0 2.8-2.1 4.5-5 4.5-2.7 0-4.6-1.2-5.3-3.4" />
              <path d="M14.3 11.6c-.4-.2-.9-.3-1.5-.3-1.7 0-2.8.9-2.8 2.2 0 1.2 1 2 2.5 2 1.8 0 2.8-1 3-2.6" />
            </svg></a>
        </div>
      </div>
      <div class="footer-col">
        <h5>Navegación</h5>
        <ul>
          <li><a href="#nosotros">Nosotros</a></li>
          <li><a href="#servicios">Servicios</a></li>
          <li><a href="#catalogo">Catálogo</a></li>
          <li><a href="#proceso">Proceso</a></li>
        </ul>
      </div>
      <div class="footer-col">
        <h5>Servicios</h5>
        <ul>
          <li><a href="#servicios">Compraventa</a></li>
          <li><a href="#servicios">Alquiler</a></li>
          <li><a href="#servicios">Asesoría legal</a></li>
          <li><a href="#servicios">Administración</a></li>
        </ul>
      </div>
      <div class="footer-col">
        <h5>Contacto</h5>
        <ul>
          <li><a href="#" id="footerWaLink" target="_blank" rel="noopener">WhatsApp: +593 98 561 3204</a></li>
          <li><a href="mailto:asesorialegalbienesraicesmarth@gmail.com">asesorialegalbienesraicesmarth@gmail.com</a>
          </li>
          <li>
            <p>Ecuador</p>
          </li>
        </ul>
      </div>
    </div>
    <div class="footer-bottom">
      <span>© <span id="year"></span> Martha Masabanda — Asesoría Legal &amp; Bienes Raíces.</span>
      <span>WhatsApp: +593 98 561 3204</span>
    </div>
  </div>
</footer>

<!-- WhatsApp float -->
<a class="wa-float" id="waFloat" href="#" target="_blank" rel="noopener" aria-label="Escribir por WhatsApp">
  <svg viewBox="0 0 24 24" fill="currentColor">
    <path
      d="M12 2a10 10 0 0 0-8.5 15.2L2 22l4.9-1.5A10 10 0 1 0 12 2zm0 18a8 8 0 0 1-4.1-1.1l-.3-.2-3 1 .9-2.9-.2-.3A8 8 0 1 1 12 20zm4.4-5.9c-.2-.1-1.4-.7-1.6-.8-.2-.1-.4-.1-.6.1s-.7.8-.9 1c-.1.2-.3.2-.6.1-.2-.1-1-.4-2-1.2-.7-.6-1.2-1.4-1.4-1.6-.1-.2 0-.4.1-.5l.4-.5c.1-.1.2-.3.2-.4.1-.2 0-.3 0-.5s-.6-1.5-.9-2c-.2-.5-.4-.4-.6-.4h-.5c-.2 0-.5.1-.7.3-.2.2-.9.9-.9 2.3s1 2.6 1.1 2.8c.1.2 2 3 4.8 4.3.7.3 1.2.5 1.6.6.7.2 1.3.2 1.8.1.5-.1 1.4-.6 1.6-1.1.2-.5.2-1 .1-1.1-.1-.1-.2-.2-.4-.3z" />
  </svg>
</a>

<!-- Redes sociales flotantes (derecha, encima del WhatsApp) -->
<div class="social-float-stack">
  <a class="social-float" id="floatInstagram" href="#" target="_blank" rel="noopener" aria-label="Instagram">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6">
      <rect x="3" y="3" width="18" height="18" rx="5" />
      <circle cx="12" cy="12" r="4" />
      <circle cx="17.2" cy="6.8" r="1" />
    </svg>
  </a>
  <a class="social-float" id="floatTiktok" href="#" target="_blank" rel="noopener" aria-label="TikTok">
    <svg viewBox="0 0 24 24" fill="currentColor">
      <path
        d="M14 3c.3 1.9 1.6 3.4 3.5 3.7v2.4c-1.3 0-2.5-.4-3.5-1.1v6.3a5 5 0 1 1-4-4.9v2.5a2.5 2.5 0 1 0 1.7 2.4V3H14z" />
    </svg>
  </a>
  <a class="social-float" id="floatThreads" href="#" target="_blank" rel="noopener" aria-label="Threads">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6">
      <path
        d="M8 8.5c0-2 1.6-3.2 4-3.2 2.8 0 4.3 1.7 4.3 4.3 0 1.4-.5 2.3-1.6 2.8 1.4.5 2.1 1.7 2.1 3.3 0 2.8-2.1 4.5-5 4.5-2.7 0-4.6-1.2-5.3-3.4" />
      <path d="M14.3 11.6c-.4-.2-.9-.3-1.5-.3-1.7 0-2.8.9-2.8 2.2 0 1.2 1 2 2.5 2 1.8 0 2.8-1 3-2.6" />
    </svg>
  </a>
</div>

<!-- ============================================================
     RESERVATION / VISIT MODAL
     ============================================================ -->
<div class="modal-overlay" id="reserveModal">
  <div class="modal-box">
    <div class="modal-head">
      <div>
        <h3 id="reserveTitle">Agendar visita</h3>
        <p id="reserveSub">Primero tus datos de contacto, luego eliges el horario.</p>
      </div>
      <button class="modal-close" data-close-modal aria-label="Cerrar">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <line x1="4" y1="4" x2="20" y2="20" />
          <line x1="20" y1="4" x2="4" y2="20" />
        </svg>
      </button>
    </div>
    <form id="reserveForm">
      <input type="hidden" id="reservePropertyId">
      <input type="hidden" id="rType" value="Visita">
      <input type="hidden" id="rDay" value="">
      <input type="hidden" id="rTime" value="">

      <!-- PASO 1: datos de contacto -->
      <div id="reserveStep1">
        <div class="field-row">
          <div class="field">
            <label for="rName">Nombre</label>
            <input type="text" id="rName" required placeholder="Tu nombre">
          </div>
          <div class="field">
            <label for="rLastName">Apellido</label>
            <input type="text" id="rLastName" required placeholder="Tu apellido">
          </div>
        </div>
        <div class="field">
          <label for="rEmail">Correo</label>
          <input type="email" id="rEmail" required placeholder="tucorreo@ejemplo.com">
        </div>
        <div class="field">
          <label for="rPhone">Número de contacto</label>
          <input type="tel" id="rPhone" required placeholder="+593 99 999 9999">
        </div>
        <div class="form-footer">
          <button type="button" class="btn btn-primary" id="reserveStep1Next">Siguiente: elegir horario</button>
        </div>
      </div>

      <!-- PASO 2: horario disponible -->
      <div id="reserveStep2" style="display:none;">
        <div class="field">
          <label>Día (lunes a sábado)</label>
          <div class="chip-group" id="dayChips">
            <button type="button" class="chip-option" data-day="Lunes">Lunes</button>
            <button type="button" class="chip-option" data-day="Martes">Martes</button>
            <button type="button" class="chip-option" data-day="Miércoles">Miércoles</button>
            <button type="button" class="chip-option" data-day="Jueves">Jueves</button>
            <button type="button" class="chip-option" data-day="Viernes">Viernes</button>
            <button type="button" class="chip-option" data-day="Sábado">Sábado</button>
          </div>
        </div>
        <div class="field">
          <label>Hora (10:00 a 16:00)</label>
          <div class="chip-group" id="timeChips">
            <button type="button" class="chip-option" data-time="10:00">10:00</button>
            <button type="button" class="chip-option" data-time="11:00">11:00</button>
            <button type="button" class="chip-option" data-time="12:00">12:00</button>
            <button type="button" class="chip-option" data-time="13:00">13:00</button>
            <button type="button" class="chip-option" data-time="14:00">14:00</button>
            <button type="button" class="chip-option" data-time="15:00">15:00</button>
          </div>
        </div>
        <div class="field">
          <label for="rMessage">Mensaje (opcional)</label>
          <textarea id="rMessage" placeholder="Dudas, condiciones, algo que debamos saber..."></textarea>
        </div>
        <div class="form-footer">
          <button type="button" class="btn btn-ghost" id="reserveStep2Back">Volver</button>
          <button type="submit" class="btn btn-primary" id="reserveConfirmBtn" disabled>Confirmar cita</button>
        </div>
      </div>

      <p class="form-note">Al confirmar, guardamos tu solicitud y abrimos WhatsApp con el mensaje listo para coordinar
        de inmediato.</p>
    </form>
  </div>
</div>

<!-- ============================================================
     VIDEO MODAL
     ============================================================ -->
<div class="modal-overlay" id="videoModal">
  <div class="modal-box video-modal-box">
    <video id="videoPlayer" controls playsinline></video>
    <button class="modal-close" data-close-modal aria-label="Cerrar"
      style="position:absolute;top:14px;right:14px;background:rgba(11,10,8,.7);">
      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <line x1="4" y1="4" x2="20" y2="20" />
        <line x1="20" y1="4" x2="4" y2="20" />
      </svg>
    </button>
  </div>
</div>

<!-- ============================================================
     ADMIN LOGIN MODAL
     ============================================================ -->
<div class="modal-overlay" id="adminLoginModal">
  <div class="modal-box">
    <div class="modal-head">
      <div>
        <h3>Acceso administrador</h3>
        <p>Ingresa la clave interna para gestionar el catálogo.</p>
      </div>
      <button class="modal-close" data-close-modal aria-label="Cerrar">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <line x1="4" y1="4" x2="20" y2="20" />
          <line x1="20" y1="4" x2="4" y2="20" />
        </svg>
      </button>
    </div>
    <form id="adminLoginForm">
      <div class="field">
        <label for="adminPass">Clave de administrador</label>
        <input type="password" id="adminPass" required placeholder="......">
      </div>
      <div class="form-footer">
        <button type="submit" class="btn btn-primary">Ingresar</button>
      </div>
      <p class="form-note">Clave de demostración: <b style="color:var(--gold-ink)">Asesoría</b>. Cámbiala en el
        código
        antes de publicar el sitio.</p>
    </form>
  </div>
</div>

<!-- ============================================================
     PROPERTY EDIT / ADD MODAL
     ============================================================ -->
<div class="modal-overlay" id="propertyModal">
  <div class="modal-box wide">
    <div class="modal-head">
      <div>
        <h3 id="propModalTitle">Agregar propiedad</h3>
        <p>Los cambios se publican de inmediato en el catálogo.</p>
      </div>
      <button class="modal-close" data-close-modal aria-label="Cerrar">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <line x1="4" y1="4" x2="20" y2="20" />
          <line x1="20" y1="4" x2="4" y2="20" />
        </svg>
      </button>
    </div>
    <form id="propertyForm">
      <input type="hidden" id="propId">
      <div class="field-row">
        <div class="field">
          <label for="propTitle">Título</label>
          <input type="text" id="propTitle" required placeholder="Casa con vista, La Merced">
        </div>
        <div class="field">
          <label for="propType">Tipo</label>
          <select id="propType">
            <option>Casa</option>
            <option>Departamento</option>
            <option>Terreno</option>
            <option>Local</option>
            <option>Oficina</option>
          </select>
        </div>
      </div>
      <div class="field-row">
        <div class="field">
          <label for="propPrice">Precio (USD)</label>
          <input type="number" id="propPrice" required min="0" placeholder="85000">
        </div>
        <div class="field">
          <label for="propStatus">Estado</label>
          <select id="propStatus">
            <option>Disponible</option>
            <option>Reservado</option>
            <option>Vendido</option>
          </select>
        </div>
      </div>
      <div class="field">
        <label for="propLocation">Ubicación</label>
        <input type="text" id="propLocation" required placeholder="Ambato, Tungurahua">
      </div>
      <div class="field-row">
        <div class="field">
          <label for="propArea">Área (m²)</label>
          <input type="number" id="propArea" min="0" placeholder="180">
        </div>
        <div class="field">
          <label for="propRooms">Habitaciones (opcional)</label>
          <input type="number" id="propRooms" min="0" placeholder="3">
        </div>
      </div>
      <div class="field">
        <label for="propImageFile">Foto del inmueble (subir desde tu dispositivo)</label>
        <input type="file" id="propImageFile" accept="image/*">
        <div id="propImagePreviewWrap" style="display:none;margin-top:10px;">
          <img id="propImagePreview" alt="Vista previa"
            style="width:100%;max-height:220px;object-fit:cover;border:1px solid var(--line-strong);">
        </div>
      </div>
      <div class="field">
        <label for="propImage">O pega la URL de la foto (opcional si ya subiste una)</label>
        <input type="url" id="propImage" placeholder="https://...">
      </div>
      <div class="field">
        <label for="propVideo">URL del video (opcional, .mp4)</label>
        <input type="url" id="propVideo" placeholder="https://...">
      </div>
      <div class="field">
        <label for="propDesc">Descripción breve</label>
        <textarea id="propDesc" placeholder="Detalles clave del inmueble"></textarea>
      </div>
      <div class="form-footer">
        <button type="submit" class="btn btn-primary">Guardar propiedad</button>
      </div>
    </form>
    <p class="form-note">Sube la foto directamente desde tu celular o computador — se ajusta y comprime
      automáticamente. El video, por su peso, todavía va por enlace (por ejemplo, un link de Google Drive o YouTube).
    </p>
  </div>
</div>

<!-- ============================================================
     LEADS MODAL (admin)
     ============================================================ -->
<div class="modal-overlay" id="leadsModal">
  <div class="modal-box wide">
    <div class="modal-head">
      <div>
        <h3>Solicitudes recibidas</h3>
        <p>Visitas, reservas y asesorías pedidas desde el sitio.</p>
      </div>
      <button class="modal-close" data-close-modal aria-label="Cerrar">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <line x1="4" y1="4" x2="20" y2="20" />
          <line x1="20" y1="4" x2="4" y2="20" />
        </svg>
      </button>
    </div>
    <div id="leadsList"></div>
  </div>
</div>

<!-- Toast -->
<div class="toast" id="toast">
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
    <path d="M9 12l2 2 4-4" />
    <circle cx="12" cy="12" r="9" />
  </svg>
  <span id="toastMsg">Listo.</span>
</div>

<script>
  /* ============================================================
     CONFIG — reemplaza con los datos oficiales de la empresa
     ============================================================ */
  const CONFIG = {
    whatsappNumber: '593985613204', // +593 98 561 3204, sin '+' ni espacios
    email: 'asesorialegalbienesraicesmarth@gmail.com',
    adminPassword: 'MM1254226540',
    companyName: 'Martha Masabanda — Asesoría Legal & Bienes Raíces',
    socials: {
      instagram: 'https://www.instagram.com/inmobiliariamartha.legal?igsi=MTZ5dm5naGdjdW9ldA==',
      tiktok: 'https://www.tiktok.com/@inmobiliariamartha.legal?_r=1&_t=ZS-99DcmG0HCE6',
      threads: 'https://www.threads.com/@asesorialegalmarthamasabanda'
    }
  };

  const SEED_PROPERTIES = [
    {
      id: 'p1',
      title: 'Casa con vista, La Merced',
      type: 'Casa',
      status: 'Disponible',
      price: 98000,
      location: 'Ambato, Tungurahua',
      area: 180,
      rooms: 3,
      image: 'https://images.unsplash.com/photo-1568605114967-8130f3a36994?auto=format&fit=crop&w=1000&q=80',
      video: 'https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4',
      desc: 'Casa de dos plantas, acabados nuevos, cerca de vías principales. Escritura y gravámenes ya verificados.',
      createdAt: Date.now() - 300000
    },
    {
      id: 'p2',
      title: 'Departamento centro-norte',
      type: 'Departamento',
      status: 'Disponible',
      price: 62000,
      location: 'Quito, Pichincha',
      area: 78,
      rooms: 2,
      image: 'https://images.unsplash.com/photo-1522708323590-d24dbb6b0267?auto=format&fit=crop&w=1000&q=80',
      video: '',
      desc: 'Departamento amoblado, edificio con seguridad 24/7, ideal para primera vivienda o renta.',
      createdAt: Date.now() - 200000
    },
    {
      id: 'p3',
      title: 'Terreno esquinero, sector rural',
      type: 'Terreno',
      status: 'Reservado',
      price: 34000,
      location: 'Latacunga, Cotopaxi',
      area: 620,
      rooms: 0,
      image: 'https://images.unsplash.com/photo-1500382017468-9049fed747ef?auto=format&fit=crop&w=1000&q=80',
      video: '',
      desc: 'Terreno plano con acceso directo a vía asfaltada, ideal para construcción o inversión.',
      createdAt: Date.now() - 100000
    }
  ];

  let properties = [];
  let leads = [];
  let isAdmin = false;
  let activeFilter = 'Todos';

  /* ============================================================
     PERSISTENT STORAGE
     ============================================================ */
  async function loadData() {
    try {
      const res = await window.storage.get('properties', true);
      properties = res && res.value ? JSON.parse(res.value) : null;
    } catch (e) {properties = null;}
    if (!properties || !Array.isArray(properties) || properties.length === 0) {
      properties = SEED_PROPERTIES;
      await saveProperties();
    }
    try {
      const res2 = await window.storage.get('leads', true);
      leads = res2 && res2.value ? JSON.parse(res2.value) : [];
    } catch (e) {leads = [];}

    renderCatalog();
    updateLeadCount();
    document.getElementById('statCount').textContent = properties.filter(p => p.status !== 'Vendido').length;
  }

  async function saveProperties() {
    try {
      await window.storage.set('properties', JSON.stringify(properties), true);
    } catch (e) {console.error('No se pudo guardar el catálogo', e);}
  }

  async function saveLeads() {
    try {
      await window.storage.set('leads', JSON.stringify(leads), true);
    } catch (e) {console.error('No se pudo guardar la solicitud', e);}
  }

  /* ============================================================
     UTIL
     ============================================================ */
  function fmtPrice(n) {
    return '$' + Number(n).toLocaleString('es-EC');
  }
  function showToast(msg) {
    const t = document.getElementById('toast');
    document.getElementById('toastMsg').textContent = msg;
    t.classList.add('show');
    clearTimeout(showToast._t);
    showToast._t = setTimeout(() => t.classList.remove('show'), 3400);
  }
  function waLink(message) {
    return `https://wa.me/${CONFIG.whatsappNumber}?text=${encodeURIComponent(message)}`;
  }
  function updateLeadCount() {
    document.getElementById('leadCount').textContent = leads.length;
  }
  function escapeHtml(str) {
    const d = document.createElement('div');
    d.textContent = str == null ? '' : str;
    return d.innerHTML;
  }

  /* ============================================================
     RENDER CATALOG
     ============================================================ */
  function renderCatalog() {
    const grid = document.getElementById('catalogGrid');
    grid.innerHTML = '';

    let list = properties.slice().sort((a, b) => b.createdAt - a.createdAt);
    if (!isAdmin) {
      list = list.filter(p => p.status !== 'Vendido');
    }
    if (activeFilter !== 'Todos') {
      list = list.filter(p => p.type === activeFilter);
    }

    if (list.length === 0) {
      const empty = document.createElement('div');
      empty.className = 'catalog-empty';
      empty.style.gridColumn = '1 / -1';
      empty.textContent = 'No hay propiedades en esta categoría por el momento.';
      grid.appendChild(empty);
    }

    list.forEach(p => {
      const card = document.createElement('div');
      card.className = 'property-card';
      card.innerHTML = `
      <div class="pc-media">
        <img src="${escapeHtml(p.image)}" alt="${escapeHtml(p.title)}" loading="lazy">
        <span class="pc-status" data-status="${p.status}">${p.status}</span>
        ${p.video ? `<button class="pc-play" data-video="${escapeHtml(p.video)}" aria-label="Ver video">
          <span class="pc-play-btn"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg></span>
        </button>` : ''}
      </div>
      <div class="pc-body">
        <div class="pc-top">
          <div>
            <div class="pc-type">${escapeHtml(p.type)}</div>
            <div class="pc-title">${escapeHtml(p.title)}</div>
          </div>
          <div class="pc-price">${fmtPrice(p.price)}</div>
        </div>
        <div class="pc-loc">
          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M12 21s-7-6.2-7-11a7 7 0 0 1 14 0c0 4.8-7 11-7 11z"/><circle cx="12" cy="10" r="2.5"/></svg>
          ${escapeHtml(p.location)}
        </div>
        <div class="pc-specs">
          ${p.area ? `<span>${p.area} m²</span>` : ''}
          ${p.rooms ? `<span>${p.rooms} hab.</span>` : ''}
        </div>
        <p class="pc-desc">${escapeHtml(p.desc || '')}</p>
        <div class="pc-actions">
          <button class="btn btn-ghost" data-action="visit" data-id="${p.id}" ${p.status === 'Vendido' ? 'disabled' : ''}>Agendar visita</button>
          <button class="btn btn-primary" data-action="reserve" data-id="${p.id}" ${p.status === 'Vendido' ? 'disabled' : ''}>Apartar</button>
        </div>
      </div>
      ${isAdmin ? `<div class="pc-admin-actions">
        <button data-admin-action="edit" data-id="${p.id}">Editar</button>
        ${p.status !== 'Vendido' ? `<button data-admin-action="sold" data-id="${p.id}">Marcar vendido</button>` : `<button data-admin-action="available" data-id="${p.id}">Reactivar</button>`}
        <button class="danger" data-admin-action="delete" data-id="${p.id}">Eliminar</button>
      </div>` : ''}
    `;
      grid.appendChild(card);
    });

    if (isAdmin) {
      const addCardWrap = document.createElement('div');
      addCardWrap.innerHTML = `<button class="add-card" id="addPropertyBtn" type="button">
      <span class="plus">+</span>
      <span>Agregar propiedad</span>
    </button>`;
      grid.appendChild(addCardWrap.firstElementChild);
    }
  }

  /* ============================================================
     CATALOG EVENTS (delegation)
     ============================================================ */
  document.getElementById('catalogGrid').addEventListener('click', (e) => {
    const playBtn = e.target.closest('[data-video]');
    if (playBtn) {openVideoModal(playBtn.dataset.video); return;}

    const actionBtn = e.target.closest('[data-action]');
    if (actionBtn) {
      const id = actionBtn.dataset.id;
      const type = actionBtn.dataset.action === 'reserve' ? 'Reserva' : 'Visita';
      openReserveModal(id, type);
      return;
    }

    const adminBtn = e.target.closest('[data-admin-action]');
    if (adminBtn) {
      const id = adminBtn.dataset.id;
      const action = adminBtn.dataset.adminAction;
      if (action === 'edit') openPropertyModal(id);
      if (action === 'sold') setStatus(id, 'Vendido');
      if (action === 'available') setStatus(id, 'Disponible');
      if (action === 'delete') deleteProperty(id);
      return;
    }

    if (e.target.closest('#addPropertyBtn')) {
      openPropertyModal(null);
    }
  });

  async function setStatus(id, status) {
    const p = properties.find(x => x.id === id);
    if (!p) return;
    p.status = status;
    await saveProperties();
    renderCatalog();
    showToast(status === 'Vendido' ? 'Propiedad marcada como vendida y ocultada del catálogo público.' : 'Propiedad reactivada.');
  }

  async function deleteProperty(id) {
    if (!confirm('¿Eliminar esta propiedad del catálogo? Esta acción no se puede deshacer.')) return;
    properties = properties.filter(x => x.id !== id);
    await saveProperties();
    renderCatalog();
    showToast('Propiedad eliminada.');
  }

  document.querySelectorAll('.filter-chip').forEach(chip => {
    chip.addEventListener('click', () => {
      document.querySelectorAll('.filter-chip').forEach(c => c.classList.remove('active'));
      chip.classList.add('active');
      activeFilter = chip.dataset.filter;
      renderCatalog();
    });
  });

  /* ============================================================
     MODALS — generic open/close
     ============================================================ */
  function openModal(id) {document.getElementById(id).classList.add('open'); document.body.style.overflow = 'hidden';}
  function closeModal(id) {document.getElementById(id).classList.remove('open'); document.body.style.overflow = '';}
  document.querySelectorAll('[data-close-modal]').forEach(btn => {
    btn.addEventListener('click', () => btn.closest('.modal-overlay').classList.remove('open') && (document.body.style.overflow = ''));
  });
  document.querySelectorAll('.modal-overlay').forEach(ov => {
    ov.addEventListener('click', (e) => {if (e.target === ov) {ov.classList.remove('open'); document.body.style.overflow = '';} });
  });
  document.addEventListener('keydown', (e) => {
    if (e.key === 'Escape') {
      document.querySelectorAll('.modal-overlay.open').forEach(ov => {ov.classList.remove('open'); document.body.style.overflow = '';});
      document.getElementById('videoPlayer').pause();
    }
  });

  /* Video modal */
  function openVideoModal(url) {
    const v = document.getElementById('videoPlayer');
    v.src = url;
    openModal('videoModal');
    v.play().catch(() => { });
  }
  document.querySelector('#videoModal [data-close-modal]').addEventListener('click', () => {
    document.getElementById('videoPlayer').pause();
  });

  /* Reserve / visit modal — flujo en 2 pasos: datos de contacto → horario */
  function resetReserveSteps() {
    document.getElementById('reserveStep1').style.display = '';
    document.getElementById('reserveStep2').style.display = 'none';
    document.querySelectorAll('#dayChips .chip-option').forEach(c => c.classList.remove('selected'));
    document.querySelectorAll('#timeChips .chip-option').forEach(c => c.classList.remove('selected'));
    document.getElementById('rDay').value = '';
    document.getElementById('rTime').value = '';
    document.getElementById('reserveConfirmBtn').disabled = true;
  }

  function openReserveModal(propertyId, type) {
    const p = properties.find(x => x.id === propertyId);
    document.getElementById('reservePropertyId').value = propertyId;
    document.getElementById('rType').value = type;
    document.getElementById('reserveTitle').textContent = type === 'Reserva' ? 'Apartar propiedad' : (type === 'Cita' ? 'Agendar cita' : 'Agendar visita');
    document.getElementById('reserveSub').textContent = p ? `${p.title} — ${p.location}` : 'Primero tus datos de contacto, luego eliges el horario.';
    resetReserveSteps();
    openModal('reserveModal');
  }
  document.getElementById('openContactModal').addEventListener('click', () => openReserveModal('', 'Asesoría'));
  document.getElementById('headerAgendarCita').addEventListener('click', (e) => {
    e.preventDefault();
    openReserveModal('', 'Cita');
  });

  /* Paso 1 -> Paso 2 */
  document.getElementById('reserveStep1Next').addEventListener('click', () => {
    const form = document.getElementById('reserveForm');
    const step1Fields = ['rName', 'rLastName', 'rEmail', 'rPhone'];
    let valid = true;
    step1Fields.forEach(id => {
      const el = document.getElementById(id);
      if (!el.checkValidity()) {el.reportValidity(); valid = false;}
    });
    if (!valid) return;
    document.getElementById('reserveStep1').style.display = 'none';
    document.getElementById('reserveStep2').style.display = '';
  });

  document.getElementById('reserveStep2Back').addEventListener('click', () => {
    document.getElementById('reserveStep2').style.display = 'none';
    document.getElementById('reserveStep1').style.display = '';
  });

  /* Selección de día / hora — horario disponible: lunes a sábado, 10:00 a 16:00 */
  function checkScheduleComplete() {
    const day = document.getElementById('rDay').value;
    const time = document.getElementById('rTime').value;
    document.getElementById('reserveConfirmBtn').disabled = !(day && time);
  }
  document.getElementById('dayChips').addEventListener('click', (e) => {
    const btn = e.target.closest('[data-day]');
    if (!btn) return;
    document.querySelectorAll('#dayChips .chip-option').forEach(c => c.classList.remove('selected'));
    btn.classList.add('selected');
    document.getElementById('rDay').value = btn.dataset.day;
    checkScheduleComplete();
  });
  document.getElementById('timeChips').addEventListener('click', (e) => {
    const btn = e.target.closest('[data-time]');
    if (!btn) return;
    document.querySelectorAll('#timeChips .chip-option').forEach(c => c.classList.remove('selected'));
    btn.classList.add('selected');
    document.getElementById('rTime').value = btn.dataset.time;
    checkScheduleComplete();
  });

  document.getElementById('reserveForm').addEventListener('submit', async (e) => {
    e.preventDefault();
    const day = document.getElementById('rDay').value;
    const time = document.getElementById('rTime').value;
    if (!day || !time) return;

    const propertyId = document.getElementById('reservePropertyId').value;
    const p = properties.find(x => x.id === propertyId);
    const fullName = `${document.getElementById('rName').value.trim()} ${document.getElementById('rLastName').value.trim()}`.trim();
    const lead = {
      id: 'l' + Date.now(),
      propertyId: propertyId || null,
      propertyTitle: p ? p.title : 'Asesoría general',
      name: fullName,
      phone: document.getElementById('rPhone').value.trim(),
      email: document.getElementById('rEmail').value.trim(),
      type: document.getElementById('rType').value,
      day, time,
      message: document.getElementById('rMessage').value.trim(),
      createdAt: Date.now()
    };
    leads.push(lead);
    await saveLeads();
    updateLeadCount();

    const waText = `Hola, soy ${lead.name}. Quiero ${lead.type.toLowerCase()}${p ? ' sobre "' + p.title + '" (' + p.location + ')' : ''}. Horario preferido: ${day} ${time}. ${lead.message ? 'Mensaje: ' + lead.message : ''} Correo: ${lead.email}. Mi teléfono: ${lead.phone}`;
    window.open(waLink(waText), '_blank');

    e.target.reset();
    resetReserveSteps();
    closeModal('reserveModal');
    showToast(`Cita solicitada para ${day} a las ${time}. Te contactamos muy pronto.`);
  });

  /* ============================================================
     ADMIN
     ============================================================ */
  const adminToggle = document.getElementById('adminToggle');
  adminToggle.addEventListener('click', () => {
    if (isAdmin) {
      isAdmin = false;
      adminToggle.classList.remove('active');
      document.getElementById('adminBar').classList.remove('visible');
      renderCatalog();
      showToast('Saliste del modo administrador.');
    } else {
      openModal('adminLoginModal');
    }
  });
  document.getElementById('exitAdminBtn').addEventListener('click', () => adminToggle.click());

  document.getElementById('adminLoginForm').addEventListener('submit', (e) => {
    e.preventDefault();
    const val = document.getElementById('adminPass').value;
    if (val === CONFIG.adminPassword) {
      isAdmin = true;
      adminToggle.classList.add('active');
      document.getElementById('adminBar').classList.add('visible');
      closeModal('adminLoginModal');
      e.target.reset();
      renderCatalog();
      showToast('Modo administrador activado.');
    } else {
      showToast('Clave incorrecta.');
    }
  });

  /* Property add/edit modal */
  let uploadedImageData = ''; // dataURL de la foto subida desde el dispositivo (si aplica)

  function resizeImageFile(file, maxDim = 1280, quality = 0.82) {
    return new Promise((resolve, reject) => {
      const reader = new FileReader();
      reader.onerror = () => reject(new Error('No se pudo leer el archivo'));
      reader.onload = () => {
        const img = new Image();
        img.onerror = () => reject(new Error('Archivo de imagen inválido'));
        img.onload = () => {
          let {width, height} = img;
          if (width > maxDim || height > maxDim) {
            if (width > height) {height = Math.round(height * (maxDim / width)); width = maxDim;}
            else {width = Math.round(width * (maxDim / height)); height = maxDim;}
          }
          const canvas = document.createElement('canvas');
          canvas.width = width; canvas.height = height;
          canvas.getContext('2d').drawImage(img, 0, 0, width, height);
          resolve(canvas.toDataURL('image/jpeg', quality));
        };
        img.src = reader.result;
      };
      reader.readAsDataURL(file);
    });
  }

  document.getElementById('propImageFile').addEventListener('change', async (e) => {
    const file = e.target.files[0];
    if (!file) return;
    try {
      uploadedImageData = await resizeImageFile(file);
      document.getElementById('propImagePreview').src = uploadedImageData;
      document.getElementById('propImagePreviewWrap').style.display = '';
      document.getElementById('propImage').placeholder = 'Se usará la foto subida arriba';
    } catch (err) {
      showToast('No se pudo procesar esa imagen. Intenta con otra.');
    }
  });

  function openPropertyModal(id) {
    const isEdit = !!id;
    document.getElementById('propModalTitle').textContent = isEdit ? 'Editar propiedad' : 'Agregar propiedad';
    const p = isEdit ? properties.find(x => x.id === id) : null;
    uploadedImageData = '';
    document.getElementById('propImageFile').value = '';
    document.getElementById('propId').value = id || '';
    document.getElementById('propTitle').value = p ? p.title : '';
    document.getElementById('propType').value = p ? p.type : 'Casa';
    document.getElementById('propPrice').value = p ? p.price : '';
    document.getElementById('propStatus').value = p ? p.status : 'Disponible';
    document.getElementById('propLocation').value = p ? p.location : '';
    document.getElementById('propArea').value = p ? p.area : '';
    document.getElementById('propRooms').value = p ? p.rooms : '';
    document.getElementById('propImage').value = p ? p.image : '';
    document.getElementById('propVideo').value = p ? p.video : '';
    document.getElementById('propDesc').value = p ? p.desc : '';
    if (p && p.image) {
      document.getElementById('propImagePreview').src = p.image;
      document.getElementById('propImagePreviewWrap').style.display = '';
    } else {
      document.getElementById('propImagePreviewWrap').style.display = 'none';
    }
    openModal('propertyModal');
  }

  document.getElementById('propertyForm').addEventListener('submit', async (e) => {
    e.preventDefault();
    const id = document.getElementById('propId').value;
    const finalImage = uploadedImageData || document.getElementById('propImage').value.trim();
    if (!finalImage) {
      showToast('Sube una foto o pega una URL de imagen.');
      return;
    }
    const data = {
      title: document.getElementById('propTitle').value.trim(),
      type: document.getElementById('propType').value,
      price: Number(document.getElementById('propPrice').value) || 0,
      status: document.getElementById('propStatus').value,
      location: document.getElementById('propLocation').value.trim(),
      area: Number(document.getElementById('propArea').value) || 0,
      rooms: Number(document.getElementById('propRooms').value) || 0,
      image: finalImage,
      video: document.getElementById('propVideo').value.trim(),
      desc: document.getElementById('propDesc').value.trim()
    };
    if (id) {
      const p = properties.find(x => x.id === id);
      Object.assign(p, data);
      showToast('Propiedad actualizada.');
    } else {
      properties.push({id: 'p' + Date.now(), createdAt: Date.now(), ...data});
      showToast('Propiedad agregada al catálogo.');
    }
    await saveProperties();
    closeModal('propertyModal');
    renderCatalog();
    document.getElementById('statCount').textContent = properties.filter(p => p.status !== 'Vendido').length;
  });

  /* Leads modal */
  document.getElementById('viewLeadsBtn').addEventListener('click', () => {
    const wrap = document.getElementById('leadsList');
    if (leads.length === 0) {
      wrap.innerHTML = '<div class="lead-empty">Aún no hay solicitudes registradas.</div>';
    } else {
      wrap.innerHTML = leads.slice().reverse().map(l => `
      <div class="lead-item">
        <b>${escapeHtml(l.name)}</b> — ${escapeHtml(l.type)} · ${escapeHtml(l.propertyTitle)}
        <div class="lead-meta">${escapeHtml(l.phone)}${l.email ? ' · ' + escapeHtml(l.email) : ''}${l.day ? ' · ' + escapeHtml(l.day) + ' ' + escapeHtml(l.time) : ''} · ${new Date(l.createdAt).toLocaleString('es-EC')}</div>
        ${l.message ? `<div style="margin-top:6px;color:var(--stone-400);">${escapeHtml(l.message)}</div>` : ''}
      </div>
    `).join('');
    }
    openModal('leadsModal');
  });

  /* ============================================================
     HEADER / NAV BEHAVIOR
     ============================================================ */
  const header = document.getElementById('siteHeader');
  window.addEventListener('scroll', () => {
    header.classList.toggle('scrolled', window.scrollY > 40);
  }, {passive: true});

  const burger = document.getElementById('navBurger');
  const mainNav = document.getElementById('mainNav');
  burger.addEventListener('click', () => {
    const open = mainNav.classList.toggle('open');
    burger.setAttribute('aria-expanded', open);
  });
  document.querySelectorAll('[data-nav]').forEach(a => a.addEventListener('click', () => {
    mainNav.classList.remove('open');
    burger.setAttribute('aria-expanded', false);
  }));

  /* WhatsApp links */
  const defaultWaMsg = `Hola, me interesa conocer más sobre sus propiedades y servicios de ${CONFIG.companyName}.`;
  ['waFloat', 'waHeroLink', 'footerWaLink'].forEach(id => {
    document.getElementById(id).href = waLink(defaultWaMsg);
  });

  /* Social links */
  document.getElementById('socialInstagram').href = CONFIG.socials.instagram;
  document.getElementById('socialTiktok').href = CONFIG.socials.tiktok;
  document.getElementById('socialThreads').href = CONFIG.socials.threads;
  document.getElementById('floatInstagram').href = CONFIG.socials.instagram;
  document.getElementById('floatTiktok').href = CONFIG.socials.tiktok;
  document.getElementById('floatThreads').href = CONFIG.socials.threads;

  document.getElementById('year').textContent = new Date().getFullYear();

  /* ============================================================
     GSAP ANIMATIONS
     ============================================================ */
  gsap.registerPlugin(ScrollTrigger);
  const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

  if (reduceMotion) {
    gsap.set('[data-showcase]', {opacity: 1, scale: 1});
    gsap.set('.reveal', {opacity: 1, y: 0});
  } else {

    /* Hero showcase — EXACT spec:
       scale 0.7 -> 1.2, opacity 0 -> 1, over 600px of scroll,
       scrubbed to ScrollTrigger, plus each image drifts vertically
       at 20% slower than the scroll (0.8x) for a depth/parallax feel. */
    document.querySelectorAll('[data-showcase]').forEach((el, i) => {
      gsap.fromTo(el,
        {scale: 0.7, opacity: 0, y: 60},
        {
          scale: 1.2,
          opacity: 1,
          y: -40,
          ease: 'none',
          scrollTrigger: {
            trigger: el,
            start: 'top bottom',
            end: '+=600',
            scrub: 0.6
          }
        }
      );
      // 20% slower vertical parallax across the whole page scroll
      gsap.to(el, {
        yPercent: -20,
        ease: 'none',
        scrollTrigger: {
          trigger: '.showcase',
          start: 'top bottom',
          end: 'bottom top',
          scrub: true
        }
      });
    });

    /* Generic reveal-on-scroll for section content */
    gsap.utils.toArray('.reveal').forEach((el) => {
      gsap.to(el, {
        opacity: 1, y: 0, duration: 1, ease: 'power3.out',
        scrollTrigger: {trigger: el, start: 'top 85%'}
      });
    });

    /* Cadastral survey-line dividers: draw the line, then fade in ticks + labels */
    document.querySelectorAll('[data-divider]').forEach((wrap) => {
      const path = wrap.querySelector('.survey-path');
      const ticks = wrap.querySelector('.survey-tick');
      const labels = wrap.querySelectorAll('text');
      const len = path.getTotalLength ? path.getTotalLength() : 1400;
      path.style.strokeDasharray = len;
      path.style.strokeDashoffset = len;
      const tl = gsap.timeline({scrollTrigger: {trigger: wrap, start: 'top 90%'}});
      tl.to(path, {strokeDashoffset: 0, duration: 1.1, ease: 'power2.inOut'})
        .to(ticks, {opacity: 1, duration: .4}, '-=.3')
        .to(labels, {opacity: 1, duration: .4, stagger: .06}, '-=.3');
    });

    /* Property cards enter on scroll */
    ScrollTrigger.addEventListener('refreshInit', () => { });
  }

  /* Re-run reveal on catalog re-render (admin add/remove) so new cards don't stay invisible */
  const catalogObserver = new MutationObserver(() => {
    if (!reduceMotion) {
      ScrollTrigger.refresh();
    }
  });
  catalogObserver.observe(document.getElementById('catalogGrid'), {childList: true});

  /* ============================================================
     INIT
     ============================================================ */
  loadData();
</script>
</body>

</html>