.graphos-dir{font-family:inherit}
.graphos-dir-toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:10px 0 12px}
.graphos-dir-search{flex:1;min-width:240px;padding:10px 12px;border:1px solid #ddd;border-radius:10px}
.graphos-dir-filter{padding:10px 12px;border:1px solid #ddd;border-radius:10px;min-width:200px;background:#fff}
.graphos-dir-alpha{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 16px}
.gd-alpha-btn{padding:6px 10px;border:1px solid #ddd;border-radius:999px;background:#9b18ac;cursor:pointer;font-size:13px}
.gd-alpha-btn:hover{padding:6px 10px;border:1px solid #ddd;border-radius:999px;background:#c250d1;cursor:pointer;font-size:13px}
.gd-alpha-btn.is-active{border-color:#111;box-shadow:0 0 0 1px #111 inset;background:#c250d1}
.gd-alpha-btn.is-disabled{opacity:.35;cursor:not-allowed}
.gd-alpha-btn{position:relative}
.gd-alpha-btn[data-count]:hover::after,.gd-alpha-btn[data-count]:focus::after{content:attr(data-count);position:absolute;left:50%;bottom:130%;transform:translateX(-50%);background:#111;color:#fff;font-size:12px;line-height:1;padding:4px 7px;border-radius:6px;white-space:nowrap;pointer-events:none;}
.gd-alpha-btn[data-count]:hover::before,.gd-alpha-btn[data-count]:focus::before{content:'';position:absolute;left:50%;bottom:115%;transform:translateX(-50%);border:6px solid transparent;border-top-color:#111;}

.gd-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px}
.gd-card{border:1px solid #e6e6e6;border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 4px 14px rgba(0,0,0,.06);display:flex;flex-direction:column}
.gd-card-photo{height:160px;background:#f4f4f4}
.gd-card-photo img{width:100%;height:100%;object-fit:cover;display:block}
.gd-card-body{padding:12px 12px 14px;text-align:center;display:flex;flex-direction:column;flex:1}
.gd-card-name{font-weight:700;margin:2px 0 6px}
.gd-card-work{color:#666;font-size:14px;min-height:18px}
.gd-btn-more{margin-top:auto;padding:9px 14px;border-radius:10px;border:0;background:#9b18ac;color:#fff;cursor:pointer}
.gd-btn-more:hover{filter:brightness(.95);margin-top:auto;padding:9px 14px;border-radius:10px;border:0;background:#c250d1;color:#fff;cursor:pointer}
.gd-empty,.gd-loading{padding:18px;border:1px dashed #ddd;border-radius:14px;text-align:center;color:#666}
.gd-pager{display:flex;gap:12px;align-items:center;justify-content:center;margin:16px 0}
.gd-pager-btn{width:38px;height:38px;border-radius:12px;border:1px solid #ddd;background:#fff;cursor:pointer}
.gd-pager-btn:disabled{opacity:.4;cursor:not-allowed}
.gd-pager-info{color:#444}

/* Modal */
body.gd-modal-open{overflow:hidden}
/* Use a very high z-index and keep it fixed to appear above sticky headers/menus */
.graphos-dir-modal{position:fixed;inset:0;z-index:2147483647}
.graphos-dir-modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.55)}
.graphos-dir-modal-panel{position:relative;max-width:980px;margin:5vh auto;background:#fff;border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.35);overflow:hidden;max-height:90vh;display:flex;flex-direction:column}
.graphos-dir-modal-close{position:absolute;top:8px;right:12px;width:80px;height:40px;border-radius:12px;border:0;background:#9b18ac;font-size:26px;line-height:40px;cursor:pointer;z-index: 1}
.graphos-dir-modal-close:hover{position:absolute;top:8px;right:12px;width:80px;height:40px;border-radius:12px;border:0;background:#c250d1;font-size:26px;line-height:40px;cursor:pointer;z-index: 1}
.graphos-dir-modal-body{padding:18px 18px 22px;overflow:auto;-webkit-overflow-scrolling:touch}

/* Detail */
.gd-detail-top{display:grid;grid-template-columns:260px 1fr;gap:18px;align-items:start}
.gd-detail-photo img{width:100%;height:auto;border-radius:12px;display:block}
.gd-detail-name{font-weight:800;font-size:20px;margin:4px 0 6px}
.gd-detail-line{margin:4px 0;color:#333}
.gd-detail-work{color:#666}
.gd-detail-label{margin-top:10px;font-weight:700;font-size:13px;color:#111}
.gd-detail-social{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.gd-social{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:999px;border:1px solid #ddd;color:#111;text-decoration:none;font-weight:700;font-size:12px;background:#fff}
.gd-detail-sep{margin:18px 0;border:0;border-top:1px solid #eee}
.gd-detail-bio h3{margin:0 0 10px}
.gd-detail-bio-text{color:#333;line-height:1.6}
@media (max-width:720px){
  .gd-detail-top{grid-template-columns:1fr}
}

.gd-pager-num{border:1px solid #ddd;background:#fff;padding:6px 10px;border-radius:6px;cursor:pointer}
.gd-pager-num.is-active{background:#111;color:#fff;border-color:#111}
.gd-pager-ellipsis{padding:0 6px;color:#777}
.graphos-dir-toolbar{gap:10px;flex-wrap:wrap}


/* Ribbon / distintivo */
.gd-card-photo, .gd-detail-photo{
  position: relative;
}
.gd-ribbon{
  position: absolute;
  top: 10px;
  left: -6px;
  padding: 6px 10px;
  font-size: 12px;
  line-height: 1;
  font-weight: 700;
  color: #fff;
  border-radius: 4px;
  z-index: 5;
  max-width: 85%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gd-ribbon:before{
  content:'';
  position:absolute;
  left:0;
  bottom:-6px;
  width:0;height:0;
  border-top:6px solid rgba(0,0,0,0.25);
  border-left:6px solid transparent;
}
.gd-ribbon-pink{ background:#e91e63; }
.gd-ribbon-yellow{ background:#f4c20d; color:#111; }
.gd-ribbon-img{
  position:absolute;
  top: 12px;
  left: 12px;
  width: 50px!important;      /* tamaño real del PNG */
  height: 50px!important;     /* tamaño real del PNG */
  z-index: 6;
  pointer-events:none;
}