/* «Piscineros» del cliente (prefijo .spx) */
.spx{--ink:#0b1b3d;--mut:#667691;--line:#e3eaf4;--blue:#0b63f6;display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,340px);gap:18px;align-items:start;color:var(--ink)}
.spx *{box-sizing:border-box}
.spx-main,.spx-side{display:grid;gap:16px;min-width:0}.spx-main{container-type:inline-size}
.spx-i{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}
.spx h2,.spx h3,.spx p{letter-spacing:0}.spx p{margin:0}
.spx-card{border:1px solid var(--line);border-radius:20px;background:#fff;padding:18px;box-shadow:0 6px 22px rgba(11,31,77,.05);min-width:0;display:flex;flex-direction:column;gap:14px}
.spx-head{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0}.spx-head>div{min-width:0;flex:1}
.spx .spx-head h2{margin:0;font-size:18px;line-height:1.2;color:var(--ink)}
.spx-head-ico{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;background:#e4efff;color:var(--blue);flex:none}.spx-head-ico.is-gold{background:#fff1c7;color:#c98600}
.spx-sub,.spx-fine{color:var(--mut);font-size:13px;line-height:1.4}.spx-fine{margin-top:2px}
.spx-link{margin-left:auto;display:inline-flex;align-items:center;gap:5px;border:0;background:none;padding:0;color:var(--blue);font:inherit;font-size:13px;font-weight:700;cursor:pointer;text-decoration:none}.spx-link .spx-i{width:14px;height:14px}.spx-link:hover{text-decoration:underline}
.spx-pill{display:inline-block;padding:3px 12px;border-radius:999px;background:#e4efff;color:#0b4fc4;font-size:12px;font-weight:700}
.spx-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:38px;padding:0 14px;border:1px solid var(--blue);border-radius:11px;background:var(--blue);color:#fff;font:inherit;font-size:13.5px;font-weight:700;cursor:pointer;text-decoration:none;white-space:nowrap}
.spx-btn:hover{filter:brightness(1.06)}.spx-btn.is-ghost{background:#fff;color:var(--blue)}.spx-btn.is-ghost:hover{background:#f1f6ff}.spx-btn.is-sm{min-height:32px;padding:0 10px;font-size:12.5px}
.spx-empty{display:grid;justify-items:center;gap:8px;text-align:center;padding:26px 12px;color:var(--mut)}.spx-empty .spx-i{width:34px;height:34px;color:#9bb0d3}.spx-empty b{color:var(--ink);font-size:16px}.spx-empty p{font-size:13.5px;max-width:46ch;line-height:1.45}

/* Cifras */
.spx-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;padding:14px 8px}
.spx-stat{display:flex;align-items:center;gap:14px;padding:6px 18px;min-width:0}.spx-stat+.spx-stat{border-left:1px solid var(--line)}
.spx-stat-ico{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:#e4efff;color:var(--blue);flex:none}.spx-stat-ico .spx-i{width:24px;height:24px}
.spx-stat div{display:grid;min-width:0}.spx-stat b{font-size:26px;line-height:1.05;letter-spacing:-.01em}.spx-stat small{color:var(--mut);font-size:12.5px;line-height:1.35}
.spx-skeleton{min-height:78px;background:linear-gradient(90deg,#f1f5fb,#f8fafd,#f1f5fb);background-size:200% 100%;animation:spx-sh 1.4s linear infinite}
@keyframes spx-sh{to{background-position:-200% 0}}

/* Filtros */
.spx-filters{display:grid;grid-template-columns:minmax(220px,1.6fr) repeat(5,minmax(0,1fr));gap:10px}
.spx-find,.spx-sel{display:flex;align-items:center;gap:8px;min-width:0;height:46px;border:1px solid var(--line);border-radius:13px;background:#fff;box-shadow:0 4px 14px rgba(11,31,77,.04);padding:0 12px}
.spx-find .spx-i{color:#7b8aa3}.spx-find:focus-within,.spx-sel:focus-within{outline:2px solid #9cc4ff}
.spx .spx-find input,.spx .spx-sel select{flex:1;min-width:0;width:100%;height:auto;min-height:0;border:0;outline:0;box-shadow:none;background:transparent;padding:0;border-radius:0;font:inherit;font-size:13.5px;color:var(--ink)}
.spx .spx-sel select{cursor:pointer;text-overflow:ellipsis}

/* Piscineros */
.spx-rec{gap:16px}
.spx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.spx-pro{display:flex;flex-direction:column;gap:11px;border:1px solid var(--line);border-radius:16px;padding:14px;background:#fff;min-width:0}
.spx-pro-top{position:relative;display:flex;gap:12px;align-items:flex-start}
.spx-av{width:84px;height:96px;border-radius:12px;object-fit:cover;background:#e8f0fb;flex:none}
.spx-init{display:grid;place-items:center;font-size:24px;font-weight:800;color:#2b5fc9;background:linear-gradient(160deg,#dbe9ff,#c7dcfb)}
.spx-av.is-sm{width:44px;height:44px;border-radius:50%;font-size:15px}
.spx-pro-id{min-width:0;flex:1;display:grid;gap:3px;padding-right:30px}
.spx .spx-pro-id h3{margin:0;font-size:16px;line-height:1.2;overflow-wrap:anywhere}
.spx-pro-id p{color:var(--mut);font-size:12.5px}
.spx-rate{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:12px;color:var(--mut)}
.spx-stars{display:inline-flex;gap:1px}.spx-stars svg{width:13px;height:13px;fill:#d7dfec}.spx-stars svg.is-on{fill:#f5a623}
.spx-where{display:flex;align-items:center;gap:4px;font-size:12.5px;color:var(--mut)}.spx-where .spx-i{width:14px;height:14px}
.spx-badge{display:inline-flex;align-items:center;gap:4px;width:max-content;max-width:100%;padding:2px 9px;border-radius:999px;font-size:11.5px;font-weight:700;background:#eef2f8;color:#55688a}
.spx-badge .spx-i{width:12px;height:12px;stroke-width:2.6}.spx-badge.is-ok{background:#dcf5e7;color:#0f6f3f}.spx-badge.is-near{background:#e4efff;color:#0b4fc4}.spx-badge.is-featured{background:#fff1cf;color:#8a5a00}
.spx-cmp{position:absolute;right:0;top:0;display:grid;place-items:center;width:32px;height:32px;border:1px solid var(--line);border-radius:50%;background:#fff;color:#6a7b99;cursor:pointer;padding:0}
.spx-cmp:hover{background:#f1f6ff;color:var(--blue)}.spx-cmp.is-on{background:var(--blue);border-color:var(--blue);color:#fff}.spx-cmp .spx-i{width:16px;height:16px}
.spx-tags{display:flex;flex-wrap:wrap;gap:6px}.spx-tags span{padding:3px 10px;border-radius:999px;background:#eef4ff;color:#2a4d8f;font-size:11.5px;font-weight:600}.spx-tags span.is-muted{background:#f2f4f8;color:var(--mut)}
.spx-meta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:10px 0}
.spx-meta>div{display:flex;gap:6px;align-items:flex-start;min-width:0}.spx-meta .spx-i{width:16px;height:16px;color:#5c76a6;margin-top:1px}
.spx-meta span{display:grid;min-width:0}.spx-meta b{font-size:12.5px;line-height:1.2}.spx-meta b.is-open{color:#0f7a4a}.spx-meta small{color:var(--mut);font-size:11px;line-height:1.25}
.spx-price{color:var(--mut);font-size:12.5px}.spx-price b{color:var(--ink)}
.spx-pro-go{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:8px;margin-top:auto}
.spx-pro-go .spx-btn{padding:0 8px;font-size:12.5px;white-space:normal;text-align:center;line-height:1.15}
.spx-more{display:flex;justify-content:center}

/* Mapa y sectores */
.spx-duo{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:16px}
.spx-map{position:relative;aspect-ratio:600/330;min-height:220px;border-radius:14px;overflow:hidden;border:1px solid var(--line);
 background:radial-gradient(ellipse at 18% 28%,rgba(214,232,205,.55) 0 9%,transparent 10%),radial-gradient(ellipse at 80% 72%,rgba(208,228,199,.5) 0 8%,transparent 9%),linear-gradient(90deg,rgba(120,150,190,.12) 1px,transparent 1px) 0 0/48px 48px,linear-gradient(rgba(120,150,190,.12) 1px,transparent 1px) 0 0/48px 48px,linear-gradient(135deg,#eef3f8,#e6edf5)}
.spx-pin{position:absolute;z-index:1;transform:translate(-50%,-100%);color:var(--pc,#1a73ff);display:grid;place-items:center;filter:drop-shadow(0 3px 4px rgba(11,31,77,.3))}.spx-pin .spx-i{width:26px;height:26px;fill:currentColor;stroke:#fff;stroke-width:1.4}
.spx-pin-label{position:absolute;width:25%;min-width:104px;z-index:2;display:grid;gap:0;text-align:left;padding:5px 10px;border:0;border-radius:10px;background:#fff;box-shadow:0 6px 16px rgba(11,31,77,.18);color:var(--ink);font:inherit;cursor:pointer}
.spx-pin-label b{font-size:12.5px;line-height:1.2}.spx-pin-label small{color:var(--mut);font-size:11px}.spx-pin-label:hover{outline:2px solid #9cc4ff}
.spx-map-empty{position:absolute;inset:0;display:grid;place-items:center;padding:20px;text-align:center;color:var(--mut);font-size:13px}
.spx-sect .spx-head{flex-wrap:nowrap}.spx .spx-sect .spx-head h2,.spx .spx-side .spx-head h2{font-size:16px}
.spx-sec-list{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.spx-sec-list button{display:flex;align-items:center;gap:10px;width:100%;padding:9px 6px;border:0;border-radius:10px;background:none;font:inherit;font-size:13.5px;color:var(--ink);cursor:pointer;text-align:left}
.spx-sec-list button:hover,.spx-sec-list button.is-on{background:#f1f6ff}.spx-sec-list button.is-on span{font-weight:800}
.spx-sec-list i{width:9px;height:9px;border-radius:50%;flex:none}.spx-sec-list span{flex:1;min-width:0;overflow-wrap:anywhere}.spx-sec-list em{font-style:normal;color:var(--mut);font-size:12px}.spx-sec-list .spx-i{width:14px;height:14px;color:#8fa1bf}

/* Columna derecha */
.spx-how ol{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.spx-how li{display:flex;gap:12px;align-items:flex-start}.spx-how li>span{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#e4efff;color:var(--blue);font-weight:800;font-size:14px;flex:none}
.spx-how li div{display:grid;gap:1px;min-width:0}.spx-how b{font-size:13.5px;line-height:1.25}.spx-how small{color:var(--mut);font-size:12.5px;line-height:1.35}
.spx-cmp-empty{display:grid;place-items:center;padding:14px 4px;text-align:center;color:var(--mut);font-size:13.5px;line-height:1.5}.spx-cmp-empty p b{display:inline-flex;vertical-align:middle;margin:0 2px;color:var(--blue)}.spx-cmp-empty p .spx-i{width:16px;height:16px}
.spx-cmp-one{display:flex;gap:10px;align-items:center;text-align:left;width:100%;padding:10px;border:1px solid var(--line);border-radius:14px;position:relative}.spx-cmp-one span{display:grid;min-width:0;flex:1}.spx-cmp-one b{color:var(--ink)}.spx-cmp-one small{font-size:12.5px}
.spx-cmp-table{display:grid;gap:0;font-size:12.5px;min-width:0}
.spx-cmp-row{display:grid;grid-template-columns:minmax(78px,.9fr) repeat(var(--n),minmax(0,1fr));gap:6px;align-items:center;padding:8px 0;border-top:1px solid var(--line)}
.spx-cmp-row.is-head{border-top:0;align-items:start}.spx-cmp-row.is-head>div{position:relative;display:grid;justify-items:center;gap:4px;text-align:center;padding-top:6px}.spx-cmp-row.is-head b{font-size:12px;line-height:1.2;overflow-wrap:anywhere}
.spx-cmp-row>span:first-child{color:var(--mut);font-weight:600}
.spx-cmp-row>div{display:grid;justify-items:center;text-align:center;gap:1px;min-width:0;font-weight:700}.spx-cmp-row>div small{color:var(--mut);font-weight:500;font-size:11px}
.spx-cmp-row .is-muted{color:var(--mut);font-weight:500}.spx-cmp-row .is-open{color:#0f7a4a}
.spx-cmp-rate{display:inline-flex;align-items:center;gap:4px}.spx-cmp-rate .spx-stars svg{width:11px;height:11px}
.spx-ok{display:inline-flex;align-items:center;gap:3px;color:#0f6f3f}.spx-ok .spx-i{width:14px;height:14px;stroke-width:2.6}
.spx-x{position:absolute;right:0;top:0;display:grid;place-items:center;width:22px;height:22px;border:0;border-radius:50%;background:#eef2f8;color:#55688a;cursor:pointer;padding:0}.spx-x .spx-i{width:12px;height:12px}.spx-x:hover{background:#dfe7f3}
.spx-cmp-row.is-head .spx-x{right:2px;top:0}.spx-cmp-row.is-foot{border-top:1px solid var(--line)}.spx-cmp-row.is-foot .spx-btn{width:100%;padding:0 6px}
.spx-banner{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;min-height:150px;padding:16px;border:0;border-radius:20px;color:#fff;text-align:left;font:inherit;cursor:pointer;background:linear-gradient(180deg,rgba(6,24,64,.05),rgba(6,24,64,.78)),#0b2a66 url(/assets/how-community-pool.webp) center/cover no-repeat;box-shadow:0 10px 26px rgba(11,31,77,.18)}
.spx-banner span{display:grid;gap:2px}.spx-banner b{font-size:18px;line-height:1.2}.spx-banner small{font-size:13px;color:#e3edff}
.spx-banner i{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#fff;color:var(--blue);flex:none}.spx-banner:hover i{background:#e4efff}.spx-banner i .spx-i{width:16px;height:16px}

/* Colores del panel (reglas generales de párrafos) */
body[data-page="panel"] .spx .spx-sub,body[data-page="panel"] .spx .spx-fine,body[data-page="panel"] .spx .spx-pro-id p,body[data-page="panel"] .spx .spx-price,body[data-page="panel"] .spx .spx-empty p{color:#667691;text-align:left}
body[data-page="panel"] .spx .spx-empty p{text-align:center}
body[data-page="panel"] .spx .spx-price b{color:#0b1b3d}
body[data-page="panel"] .spx .spx-cmp-empty p,body[data-page="panel"] .spx .spx-cmp-one small{color:#667691}

@container (max-width:980px){.spx-filters{grid-template-columns:repeat(5,minmax(0,1fr))}.spx-find{grid-column:1/-1}}
@media (max-width:1240px){.spx{grid-template-columns:minmax(0,1fr)}.spx-side{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}.spx-banner{grid-column:1/-1}}
@media (max-width:1100px){.spx-filters{grid-template-columns:repeat(3,minmax(0,1fr))}.spx-find{grid-column:1/-1}}
@media (max-width:860px){.spx-duo{grid-template-columns:minmax(0,1fr)}.spx-stats{grid-template-columns:minmax(0,1fr);gap:4px;padding:10px 6px}.spx-stat+.spx-stat{border-left:0;border-top:1px solid var(--line);padding-top:12px}}
@media (max-width:560px){.spx-filters{grid-template-columns:repeat(2,minmax(0,1fr))}.spx-grid{grid-template-columns:minmax(0,1fr)}.spx-card{padding:14px}.spx-side{grid-template-columns:minmax(0,1fr)}.spx-pin-label{width:auto;min-width:0;padding:3px 7px}.spx-pin-label small{display:none}.spx-meta{grid-template-columns:repeat(3,minmax(0,1fr))}}