#apimapa { --zp-border:#e5e7eb; --zp-brand:#1998CE; --zp-brand-2:#01579B; --zp-ok:#22c55e; --zp-text:#0f172a; --zp-muted:#475569 }
  #apimapa *{ box-sizing:border-box }
  #apimapa img{ max-width:100%; display:block }

  /* ===== Full-bleed ===== */
  #apimapa .zp-bleed{
    width:100vw; position:relative; left:50%; right:50%;
    margin-left:-50vw; margin-right:-50vw;
  }

  /* ===== Barra superior ===== */
  #apimapa .zpbar{ background:#fff; border-bottom:1px solid var(--zp-border); padding:10px 16px; z-index:2 }
  #apimapa .zpbar__inner{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; max-width:1280px; margin:0 auto }
  #apimapa .zpbar .select{ height:42px; padding:8px 12px; border:1px solid var(--zp-border); border-radius:10px; background:#fff; font-size:14px }
  #apimapa .zpbar .btn{ height:42px; padding:8px 14px; border-radius:10px; border:0; cursor:pointer; font-weight:800; color:#fff; background:linear-gradient(90deg,var(--zp-brand-2),var(--zp-brand)) }
  #apimapa .zpbar .count{ margin-left:auto; font-size:13px; background:#eef2ff; border:1px solid #dbeafe; padding:6px 10px; border-radius:999px; color:#111 }
  #apimapa .zpbar .toggle-adv{ background:#111827 }

  /* ===== Barra avanzada (compacta y responsiva) ===== */
  #apimapa .zpbar-adv{
    display:none; gap:12px; align-items:flex-end; flex-wrap:wrap;
    padding:12px 16px; background:#f7f9fc; border-bottom:1px solid var(--zp-border)
  }
  #apimapa .zpbar-adv.open{ display:flex }

  #apimapa .adv-field{
    display:flex; flex-direction:column; gap:6px;
    width:clamp(150px, 22vw, 220px);
  }
  #apimapa .adv-field label{ font-size:12px; color:#64748b; font-weight:600 }

  #apimapa .adv-field .input{ height:36px; padding:8px 12px; border:1px solid var(--zp-border); border-radius:10px; background:#fff; font-size:14px; width:100% }
  #apimapa .adv-field .input:focus{ outline:none; border-color:#93c5fd; box-shadow:0 0 0 3px rgba(37,99,235,.15) }

  /* Unidades dentro del input (CLP, m²) */
  #apimapa .adv-field .input-wrap{ position:relative }
  #apimapa .adv-field .has-suffix{ padding-right:44px }
  #apimapa .adv-field .unit{
    position:absolute; right:10px; top:50%; transform:translateY(-50%);
    font-size:12px; color:#94a3b8; pointer-events:none
  }

  /* Oculta flechas nativas de los number para estética uniforme */
  #apimapa input[type="number"]::-webkit-outer-spin-button,
  #apimapa input[type="number"]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0 }
  #apimapa input[type="number"]{ -moz-appearance:textfield }

  /* Breakpoints: 2 columnas en móviles medianos, 1 en chicos */
  @media (max-width: 680px){
    #apimapa .adv-field{ width:calc(50% - 8px) }
  }
  @media (max-width: 420px){
    #apimapa .adv-field{ width:100% }
  }

  /* ===== Mapa ===== */
  #apimapa .mapbox{ background:#fff }
  #apimapa #zpmap-map{ width:100%; height:calc(100vh - 136px); min-height:460px }

  /* ===== InfoWindow y cierres ===== */
  #apimapa .gm-style-iw{ padding:0!important; background:transparent!important }
  #apimapa .gm-style-iw-d{ overflow:visible!important }
  /* Ocultar “X” nativa de Google */
  #apimapa .gm-ui-hover-effect,
  #apimapa .gm-style-iw button[aria-label="Close"],
  #apimapa .gm-style-iw-a button[aria-label="Close"]{ display:none!important }

  #apimapa .iw-card{ max-width:340px; background:#111827; color:#e5e7eb; border-radius:14px; overflow:hidden; box-shadow:0 16px 40px rgba(0,0,0,.35); position:relative }
  #apimapa .iw-cover{ position:relative }
  #apimapa .iw-cover img{ width:100%; height:180px; object-fit:cover }
  #apimapa .iw-body{ padding:12px 14px }
  #apimapa .iw-title{ font-weight:800; color:#fff; margin:0 0 6px }
  #apimapa .iw-price{ color:var(--zp-ok); font-weight:800; font-size:18px; margin:4px 0 10px }
  #apimapa .iw-meta{ display:grid; gap:4px; font-size:13px; color:#cbd5e1; margin:10px 0 12px }
  #apimapa .iw-link{ display:inline-block; background:#2563eb; color:#fff; text-decoration:none; padding:8px 10px; border-radius:10px; font-weight:700 }
  #apimapa .iw-link:hover{ background:#1d4ed8 }

  /* Cerrar (propio) */
  #apimapa .iw-close{
    position:absolute; top:8px; right:8px; width:28px; height:28px; border-radius:999px;
    background:rgba(0,0,0,.65); color:#fff; border:0; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:16px; z-index:3;
  }
  #apimapa .iw-close:hover{ background:rgba(0,0,0,.8) }

  /* Flechas carrusel */
  #apimapa .iw-arrow{ position:absolute; top:50%; transform:translateY(-50%); width:34px; height:34px; border-radius:999px; border:2px solid rgba(0,0,0,.15); background:#fff; color:#111; font-size:18px; display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 6px 16px rgba(0,0,0,.25) }
  #apimapa .iw-arrow--prev{ left:8px } 
  #apimapa .iw-arrow--next{ right:8px }

  /* Pin azul Advanced (más grande) */
  #apimapa .pin{ width:18px; height:18px; border-radius:999px; background:#2563eb; border:2px solid #fff; box-shadow:0 0 0 4px rgba(37,99,235,.35), 0 10px 18px rgba(0,0,0,.28); transition:transform .12s ease }
  #apimapa .pin:hover{ transform:scale(1.12) }

  /* Encabezado */
  #apimapa .hdr{ text-align:center; padding:10px 16px 4px; background:#fff }
  #apimapa .hdr h1{ margin:0; font-weight:800; color:var(--zp-text); font-size:clamp(20px,2.2vw,28px) }
  
    /* Todo el CSS queda scopeado dentro de #zpaf para no chocar con nada */
  #zpaf{ --af-bg:#f3f6fb; --af-card:#ffffff; --af-text:#0f172a; --af-muted:#64748b; --af-border:#e5e7eb; --af-brand:#1998CE; --af-shadow:0 10px 30px rgba(2,8,23,.08) }
  #zpaf *{ box-sizing:border-box }
  #zpaf img{ max-width:100%; display:block }

  /* SEO intro */
  #zpaf .zpaf-wrap{ max-width:1280px; margin:0 auto; padding:16px }
  #zpaf .zpaf-seo{ background:var(--af-bg); border-top:1px solid var(--af-border); padding:24px 0 }
  #zpaf .zpaf-seo h2{ margin:0 0 8px; font-size:clamp(20px,2.3vw,28px); color:var(--af-text); font-weight:800 }
  #zpaf .zpaf-seo p{ margin:0; font-size:15px; line-height:1.65; color:var(--af-muted) }

  /* Listado recientes */
  #zpaf .zpaf-list{ background:var(--af-bg); padding:8px 0 28px }
  #zpaf .zpaf-list__hdr{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 10px }
  #zpaf .zpaf-list__hdr h2{ margin:0; font-size:20px; color:#111827 }
  #zpaf .zpaf-grid{ display:grid; gap:16px; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); align-items:stretch }

  /* ===== Tarjeta (se estiliza el template existente zl2-* pero scopeado a #zpaf) ===== */
  #zpaf .zl2-card-link{ text-decoration:none; color:inherit; display:block; height:100% }
  #zpaf .zl2-card{ height:100%; background:var(--af-card); border:1px solid var(--af-border); border-radius:16px; overflow:hidden; display:flex; flex-direction:column; box-shadow:var(--af-shadow); transition:transform .18s ease, box-shadow .18s ease }
  #zpaf .zl2-card:hover{ transform:translateY(-2px) }

  #zpaf .zl2-card-media{ position:relative; background:#e2e8f0; aspect-ratio:4/3; overflow:hidden }
  #zpaf .zl2-media-img{ width:100%; height:100%; object-fit:cover; transition:transform .35s ease, opacity .25s ease; opacity:.95 }
  #zpaf .zl2-card:hover .zl2-media-img{ transform:scale(1.03) }

  #zpaf .zl2-photo-count,
  #zpaf .zl2-status{
    position:absolute; top:10px; left:10px; z-index:2; line-height:1;
    display:inline-flex; align-items:center; gap:6px;
    background:rgba(17,24,39,.75); color:#fff; font-size:12px; padding:6px 8px; border-radius:999px; backdrop-filter:saturate(140%) blur(4px)
  }
  #zpaf .zl2-status{ left:auto; right:10px; background:linear-gradient(90deg,#0ea5e9,#0284c7) }

  #zpaf .zl2-card-body{ display:flex; flex-direction:column; gap:8px; padding:12px 14px 14px }
  #zpaf .zl2-crumbs{ color:#64748b; font-size:12px }
  #zpaf .zl2-title{ margin:0; font-size:16px; font-weight:800; color:var(--af-text); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.6em }
  #zpaf .zl2-loc{ display:flex; align-items:center; gap:8px; font-size:13px; color:#475569 }
  #zpaf .zl2-loc i{ width:14px; text-align:center; opacity:.8 }

  #zpaf .zl2-specs{ display:flex; gap:12px; margin-top:2px }
  #zpaf .zl2-spec{ display:inline-flex; align-items:center; gap:6px; font-size:13px; color:#0f172a; background:#f8fafc; border:1px solid #eef2f7; padding:6px 8px; border-radius:10px }
  #zpaf .zl2-spec i{ width:14px; text-align:center; opacity:.8 }

  #zpaf .zl2-divider{ height:1px; background:var(--af-border); margin:8px 0 0 }
  #zpaf .zl2-bottom{ margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:10px }
  #zpaf .zl2-pricebox{ display:flex; flex-direction:column }
  #zpaf .zl2-price-type{ font-size:12px; color:#64748b }
  #zpaf .zl2-price{ font-weight:900; color:#0ea5e9; font-size:18px }
  #zpaf .zl2-actions{ opacity:.75 }
  #zpaf .zl2-card-logo{ border-radius:10px; background:#fff; border:1px solid var(--af-border) }

  /* Animación de entrada (solo si el usuario no prefiere reducir movimiento) */
  @media (prefers-reduced-motion:no-preference){
    #zpaf .zl2-card{ opacity:0; transform:translateY(8px) }
    #zpaf .zl2-card.is-in{ opacity:1; transform:none; transition:transform .3s ease, opacity .3s ease, box-shadow .18s ease }
  }

  /* Responsive extras */
  @media (max-width:520px){ #zpaf .zpaf-grid{ gap:12px; grid-template-columns:repeat(2,minmax(0,1fr)) } }
  @media (max-width:380px){ #zpaf .zpaf-grid{ grid-template-columns:1fr } }