/* ===== Cluster Socios — Directorio ===== */
.cs-dir{--navy:#0f2f6b;--blue:#1e5bd6;--ink:#13203a;--line:#e8ecf3;--muted:#7b8aa3;--bg:#f7f9fc;
  font-family:'Montserrat',-apple-system,'Segoe UI',Roboto,Arial,sans-serif;color:var(--ink);max-width:1240px;margin:0 auto;}
.cs-dir *{box-sizing:border-box;font-family:inherit;}

/* Pills superiores */
.cs-pills{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;background:var(--bg);
  padding:20px 18px;border-radius:14px;margin-bottom:22px;}
.cs-pill{border:1px solid var(--line);background:#fff;color:#33415c;border-radius:999px;
  padding:9px 18px;font-size:13.5px;font-weight:600;cursor:pointer;transition:.15s;white-space:nowrap;}
.cs-pill:hover{border-color:#c3d0e6;color:var(--navy);}
.cs-pill.is-active{background:#e7536b;border-color:#e7536b;color:#fff;}

/* Cuerpo: sidebar + contenido */
.cs-body{display:grid;grid-template-columns:240px 1fr;gap:30px;align-items:start;}

/* Sidebar */
.cs-side{position:sticky;top:20px;}
.cs-side-title{color:var(--blue);font-size:12px;font-weight:700;letter-spacing:.08em;margin:6px 4px 12px;}
.cs-side-list{list-style:none;margin:0;padding:0;border-right:1px solid var(--line);}
.cs-side-item{display:flex;align-items:center;gap:11px;padding:12px 14px;font-size:12.5px;font-weight:600;
  letter-spacing:.02em;color:#56627a;cursor:pointer;border-radius:9px;transition:.12s;line-height:1.25;text-transform:uppercase;}
.cs-side-item:hover{background:#f1f5fb;color:var(--navy);}
.cs-side-item.is-active{background:#eef3fb;color:var(--navy);font-weight:700;}
.cs-side-ic{flex:0 0 auto;width:18px;height:18px;display:inline-flex;color:#8a98b3;}
.cs-side-item.is-active .cs-side-ic{color:var(--blue);}
.cs-side-ic svg{width:18px;height:18px;}

/* Contador */
.cs-count{text-align:right;font-size:14px;color:var(--muted);margin:0 4px 18px;}
.cs-count strong{color:var(--navy);font-weight:700;}

/* Grid tarjetas */
.cs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}

.cs-card{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff;
  box-shadow:0 6px 18px rgba(16,38,76,.05);display:flex;flex-direction:column;transition:.15s;}
.cs-card:hover{box-shadow:0 12px 26px rgba(16,38,76,.10);transform:translateY(-2px);}
.cs-card-media{position:relative;height:210px;background:#fff;display:flex;align-items:center;justify-content:center;padding:24px;}
.cs-card-media.is-empty{background:#c9cdd4;}
.cs-card-media img{max-width:100%;max-height:100%;object-fit:contain;}
.cs-badge{position:absolute;top:14px;left:14px;background:#fff;color:var(--navy);font-size:10.5px;text-transform:uppercase;
  font-weight:700;letter-spacing:.04em;padding:6px 12px;border-radius:999px;box-shadow:0 2px 6px rgba(16,38,76,.12);}

.cs-card-body{padding:20px 22px 18px;display:flex;flex-direction:column;flex:1;}
.cs-card-name{font-size:18px;font-weight:700;color:var(--navy);line-height:1.25;margin:0 0 auto;}
.cs-card-foot{display:flex;align-items:center;justify-content:space-between;margin-top:22px;
  padding-top:16px;border-top:1px solid var(--line);}
.cs-card-icons{display:flex;align-items:center;gap:14px;}
.cs-card-icons a,.cs-card-icons button{display:inline-flex;color:#9aa6bb;background:none;border:0;padding:0;cursor:pointer;transition:.12s;}
.cs-card-icons a:hover,.cs-card-icons button:hover{color:var(--blue);}
.cs-card-icons svg{width:18px;height:18px;}
.cs-profile-link{background:none;border:0;color:var(--blue);font-size:13.5px;font-weight:700;cursor:pointer;padding:0;}
.cs-profile-link:hover{text-decoration:underline;}

.cs-empty,.cs-noresults{color:var(--muted);padding:30px 4px;grid-column:1/-1;}

/* Modal */
.cs-modal{position:fixed;inset:0;z-index:99999;display:none;font-family:'Montserrat',-apple-system,'Segoe UI',Roboto,Arial,sans-serif;}
.cs-modal *{font-family:inherit;}
.cs-m-badge{text-transform:uppercase;}
.cs-modal.is-open{display:block;}
.cs-modal-bg{position:absolute;inset:0;background:rgba(13,28,56,.55);backdrop-filter:blur(2px);}
.cs-modal-box{position:relative;max-width:480px;margin:7vh auto;background:#fff;border-radius:18px;
  box-shadow:0 30px 70px rgba(8,20,45,.35);overflow:hidden;animation:cs-pop .18s ease;}
@keyframes cs-pop{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.cs-modal-x{position:absolute;top:12px;right:14px;background:rgba(255,255,255,.85);border:0;width:34px;height:34px;
  border-radius:50%;font-size:22px;line-height:1;color:#33415c;cursor:pointer;z-index:2;}
.cs-modal-x:hover{background:#fff;}
.cs-m-head{background:#fff;padding:34px 30px 22px;text-align:center;border-bottom:1px solid var(--line);}
.cs-m-head.is-empty{background:#c9cdd4;}
.cs-m-logo{max-height:90px;max-width:75%;object-fit:contain;margin:0 auto 14px;display:block;}
.cs-m-badge{display:inline-block;background:#eef3fb;color:var(--navy);font-size:11px;font-weight:700;
  letter-spacing:.04em;padding:6px 14px;border-radius:999px;margin-bottom:12px;}
.cs-m-name{font-size:22px;font-weight:800;color:var(--navy);margin:0;line-height:1.2;}
.cs-m-body{padding:22px 30px 28px;}
.cs-m-row{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line);font-size:14px;}
.cs-m-row:last-child{border-bottom:0;}
.cs-m-row .cs-m-ic{flex:0 0 auto;width:34px;height:34px;border-radius:9px;background:#eef3fb;color:var(--blue);
  display:inline-flex;align-items:center;justify-content:center;}
.cs-m-row .cs-m-ic svg{width:17px;height:17px;}
.cs-m-row .cs-m-k{color:var(--muted);font-size:12px;}
.cs-m-row a,.cs-m-row span.cs-m-v{color:var(--ink);font-weight:600;text-decoration:none;word-break:break-all;}
.cs-m-row a:hover{color:var(--blue);text-decoration:underline;}
.cs-m-empty{color:var(--muted);font-size:13.5px;text-align:center;padding:8px 0;}

/* Responsivo */
@media (max-width:980px){
  .cs-body{grid-template-columns:1fr;}
  .cs-side{position:static;}.cs-side-list{border-right:0;display:flex;flex-wrap:wrap;gap:8px;}
  .cs-side-item{border:1px solid var(--line);}
  .cs-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:600px){
  .cs-grid{grid-template-columns:1fr;}
  .cs-count{text-align:left;}
}

/* ===== Carrusel del perfil (modal) ===== */
.cs-carousel{position:relative;width:100%;aspect-ratio:16/10;background:#0f1f3d;overflow:hidden;}
.cs-slide{position:absolute;inset:0;opacity:0;transition:opacity .4s ease;}
.cs-slide.is-active{opacity:1;}
.cs-slide img{width:100%;height:100%;object-fit:cover;display:block;}
.cs-car-prev,.cs-car-next{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.88);border:0;width:38px;height:38px;border-radius:50%;font-size:24px;line-height:1;color:#0f2f6b;cursor:pointer;z-index:3;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(8,20,45,.25);}
.cs-car-prev{left:12px;}.cs-car-next{right:12px;}
.cs-car-prev:hover,.cs-car-next:hover{background:#fff;}
.cs-dots{position:absolute;bottom:12px;left:0;right:0;display:flex;justify-content:center;gap:7px;z-index:3;}
.cs-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.55);cursor:pointer;transition:.15s;}
.cs-dot.is-active{background:#fff;transform:scale(1.15);}
/* cuando hay carrusel, el header del logo va más compacto */
.cs-m-head.has-car{padding-top:20px;}
.cs-m-head.has-car .cs-m-logo{max-height:64px;}