:root{
  --blue-deep:#0a2a7a;
  --blue:#1450c9;
  --blue-light:#2e6bef;
  --orange:#fe6a29;
  --bg:#f5f7fb;
  --card:#ffffff;
  --ink:#1c2333;
  --ink-soft:#5b6478;
  --border:#e4e8f1;
  --radius:18px;
  --shadow:0 4px 16px rgba(20,40,110,0.08);
  --shadow-hover:0 10px 28px rgba(20,40,110,0.14);
  font-family:'Segoe UI',system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
a{color:var(--blue);}
img{max-width:100%;display:block;}

/* ---------- TOPBAR (fijo, con logo + búsqueda + chips) ---------- */
.topbar{
  position:sticky;
  top:0;
  z-index:50;
  background:#fff;
  border-bottom:1px solid var(--border);
  padding:12px 24px;
}
.topbar__inner{
  max-width:1280px;
  margin:0 auto;
  display:flex;
  align-items:center;
  gap:18px;
}
.topbar__logo{
  height:44px;
  width:auto;
  flex-shrink:0;
  border-radius:8px;
}
.topbar__chips{
  max-width:1280px;
  margin:10px auto 0;
}

/* ---------- LAYOUT ---------- */
.page{
  max-width:1280px;
  margin:0 auto;
  padding:24px 24px 40px;
}

/* ---------- BÚSQUEDA ---------- */
.search-wrap{
  position:relative;
  max-width:520px;
}
.search-wrap--inline{
  flex:1;
  max-width:960px;
}
.search-wrap--inline #search{
  width:100%;
}
.search-icon{
  position:absolute;
  left:14px;
  top:50%;
  transform:translateY(-50%);
  width:18px;
  height:18px;
  color:var(--ink-soft);
}
#search{
  width:100%;
  padding:13px 16px 13px 42px;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--card);
  font-size:0.95rem;
  box-shadow:var(--shadow);
  outline:none;
  transition:box-shadow .15s ease, border-color .15s ease;
}
#search:focus{
  border-color:var(--blue-light);
  box-shadow:0 0 0 3px rgba(46,107,239,0.15);
}
.chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.chip{
  border:1px solid var(--border);
  background:var(--card);
  color:var(--ink-soft);
  padding:8px 16px;
  border-radius:999px;
  font-size:0.85rem;
  font-weight:600;
  cursor:pointer;
  transition:all .15s ease;
  white-space:nowrap;
}
.chip:hover{border-color:var(--blue-light);color:var(--blue);}
.chip.active{
  background:var(--blue);
  border-color:var(--blue);
  color:#fff;
}

.section-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}
.section-title{
  font-size:1.1rem;
  font-weight:800;
  color:var(--ink);
  margin:0;
}
.section-row__right{
  display:flex;
  align-items:center;
  gap:12px;
}
.count{
  color:var(--ink-soft);
  font-size:0.82rem;
  margin:0;
  white-space:nowrap;
}
.sort-select-wrap{
  position:relative;
  display:inline-flex;
  align-items:center;
}
.sort-select-icon{
  width:13px;
  height:13px;
  position:absolute;
  left:12px;
  color:var(--ink-soft);
  pointer-events:none;
}
.sort-select{
  appearance:none;
  border:1px solid var(--border);
  background:var(--card);
  color:var(--ink-soft);
  padding:6px 28px 6px 30px;
  border-radius:999px;
  font-size:0.78rem;
  font-weight:700;
  cursor:pointer;
  font-family:inherit;
  transition:all .15s ease;
}
.sort-select:hover{border-color:var(--blue-light);color:var(--blue);}

/* ---------- GRID / CARDS ---------- */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:16px;
}
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:12px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease;
}
.card:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-hover);
}
.card__media{
  width:100%;
  aspect-ratio:1/1;
  position:relative;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.card__media--empty{
  background:linear-gradient(135deg,#eaf0ff,#dce8ff);
}
.card__media img{
  width:100%;
  height:100%;
  object-fit:contain;
  padding:10px;
}
.card__media-fallback{
  font-size:2.6rem;
}
.card__category--overlay{
  position:absolute;
  top:8px;
  left:8px;
  font-size:0.65rem;
  font-weight:700;
  color:var(--blue-deep);
  background:rgba(255,255,255,0.92);
  padding:3px 8px;
  border-radius:999px;
}
.card__media-dots{
  position:absolute;
  bottom:8px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  gap:6px;
  padding:5px 9px;
  border-radius:999px;
  background:rgba(20,25,45,0.55);
}
.card__media-dots span{
  width:7px;
  height:7px;
  border-radius:50%;
  background:rgba(255,255,255,0.5);
}
.card__media-dots span:first-child{
  background:#fff;
}
.card__body{
  padding:10px 12px 12px;
  display:flex;
  flex-direction:column;
  gap:3px;
  flex:1;
}
.card__category{
  display:inline-block;
  align-self:flex-start;
  font-size:0.72rem;
  font-weight:700;
  color:var(--blue);
  background:#eaf0ff;
  padding:4px 10px;
  border-radius:999px;
}
.card__name{
  font-size:0.88rem;
  font-weight:800;
  margin:0;
  color:var(--ink);
  white-space:normal;
  overflow-wrap:break-word;
  line-height:1.25;
}
.card__person{
  font-size:0.8rem;
  font-weight:600;
  color:var(--blue);
  margin:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.card__sala{
  font-size:0.68rem;
  color:var(--ink-soft);
  opacity:0.75;
}
.card__desc{
  font-size:0.76rem;
  color:var(--ink-soft);
  line-height:1.4;
  margin:4px 0 0;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.card__meta{
  font-size:0.76rem;
  color:var(--ink-soft);
  margin:2px 0 0;
}
.card__links{
  margin-top:8px;
  display:flex;
  gap:6px;
}
.card__link-icon{
  width:26px;
  height:26px;
  border-radius:50%;
  border:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--ink-soft);
  flex-shrink:0;
  text-decoration:none;
  transition:all .15s ease;
}
.card__link-icon svg{width:13px;height:13px;flex-shrink:0;}
.card__link-icon:hover{border-color:var(--blue-light);color:var(--blue);}
.card__link-icon--whatsapp:hover{border-color:#25D366;color:#1aa64c;}
.card__link-icon--instagram:hover{border-color:#d6249f;color:#c0198a;}

/* ---------- LINKS DEL MODAL (lista vertical con texto) ---------- */
.modal__links{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:4px;
}
.modal__link{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:0.9rem;
  font-weight:600;
  text-decoration:none;
  color:var(--ink-soft);
  transition:color .15s ease;
}
.modal__link svg{width:17px;height:17px;flex-shrink:0;}
.modal__link:hover{color:var(--blue);}
.modal__link--whatsapp:hover{color:#1aa64c;}
.modal__link--instagram:hover{color:#c0198a;}

/* ---------- EMPTY / LOADING ---------- */
.empty,.loading{
  text-align:center;
  padding:60px 20px;
  color:var(--ink-soft);
}
.spinner{
  width:34px;height:34px;
  margin:0 auto 14px;
  border-radius:50%;
  border:3px solid var(--border);
  border-top-color:var(--blue);
  animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}
.btn-ghost{
  margin-top:10px;
  background:none;
  border:1px solid var(--border);
  padding:9px 18px;
  border-radius:999px;
  cursor:pointer;
  font-weight:600;
  color:var(--blue);
}

/* ---------- CTA ---------- */
.cta{
  text-align:center;
  margin:40px 0 10px;
  padding:18px 24px;
  border-radius:var(--radius);
  background:linear-gradient(135deg,var(--blue-deep),var(--blue));
  color:#fff;
}
.cta h2{margin:0 0 4px;font-size:1rem;font-weight:700;}
.cta p{margin:0 0 14px;color:rgba(255,255,255,0.8);font-size:0.82rem;}
.cta .btn-primary{padding:8px 20px;font-size:0.82rem;}
.btn-primary{
  display:inline-block;
  background:var(--orange);
  color:#fff;
  font-weight:700;
  padding:12px 28px;
  border-radius:999px;
  text-decoration:none;
  font-size:0.95rem;
  transition:filter .15s ease;
}
.btn-primary:hover{filter:brightness(1.06);}
.btn-primary--sm{
  margin-left:auto;
  white-space:nowrap;
  padding:9px 18px;
  font-size:0.85rem;
}

/* ---------- FOOTER ---------- */
.footer{
  text-align:center;
  padding:26px 20px 40px;
  color:var(--ink-soft);
  font-size:0.85rem;
}
.footer a{color:var(--blue);text-decoration:none;font-weight:600;}
.footer p{margin:4px 0;}

/* ---------- MODAL ---------- */
.modal-overlay{
  position:fixed;
  inset:0;
  background:rgba(10,20,50,0.55);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  z-index:100;
  animation:fadeIn .15s ease;
}
.modal-overlay[hidden]{display:none;}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
.modal{
  background:var(--card);
  border-radius:var(--radius);
  max-width:560px;
  width:100%;
  max-height:88vh;
  overflow-y:auto;
  box-shadow:var(--shadow-hover);
  position:relative;
  animation:popIn .15s ease;
}
@keyframes popIn{from{transform:translateY(10px);opacity:0;}to{transform:translateY(0);opacity:1;}}
.modal__actions{
  position:absolute;
  top:14px;
  right:14px;
  display:flex;
  gap:8px;
  z-index:2;
}
.share-menu-wrap{
  position:relative;
}
.share-menu{
  position:absolute;
  top:42px;
  right:0;
  background:#fff;
  border:1px solid var(--border);
  border-radius:12px;
  box-shadow:var(--shadow-hover);
  padding:6px;
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:200px;
  z-index:5;
}
.share-menu[hidden]{display:none;}
.share-menu__item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 12px;
  border:none;
  background:none;
  border-radius:8px;
  font-size:0.85rem;
  font-weight:600;
  color:var(--ink);
  cursor:pointer;
  text-align:left;
  white-space:nowrap;
  font-family:inherit;
  transition:background .15s ease;
}
.share-menu__item svg{width:17px;height:17px;flex-shrink:0;color:var(--ink-soft);}
.share-menu__item:hover{background:var(--bg);}
.share-menu__item:hover svg{color:var(--blue);}
#shareWhatsapp:hover svg{color:#1aa64c;}
.modal__action-btn{
  width:34px;
  height:34px;
  border-radius:50%;
  border:none;
  background:rgba(255,255,255,0.9);
  color:var(--ink);
  font-size:1.1rem;
  line-height:1;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 2px 8px rgba(20,40,110,0.18);
  transition:all .15s ease;
}
.modal__action-btn svg{width:16px;height:16px;}
.modal__action-btn:hover{background:#fff;color:var(--blue);}

/* ---------- TOAST (confirmación al copiar el link) ---------- */
.toast{
  position:fixed;
  left:50%;
  bottom:24px;
  transform:translateX(-50%) translateY(20px);
  background:var(--ink);
  color:#fff;
  padding:10px 20px;
  border-radius:999px;
  font-size:0.85rem;
  font-weight:600;
  box-shadow:0 4px 16px rgba(0,0,0,0.25);
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
  z-index:300;
  white-space:nowrap;
}
.toast.show{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}
.modal__media{
  position:relative;
  width:100%;
  aspect-ratio:4/3;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  border-radius:var(--radius) var(--radius) 0 0;
}
.modal__media--empty{
  background:linear-gradient(135deg,#eaf0ff,#dce8ff);
}
.modal__media img{
  width:100%;
  height:100%;
  object-fit:contain;
  padding:16px;
}
.modal__media .card__media-fallback{
  font-size:4.6rem;
}
.modal__media-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:44px;
  height:44px;
  border:none;
  border-radius:50%;
  background:var(--blue-deep);
  color:#fff;
  font-size:1.8rem;
  font-weight:700;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 4px 14px rgba(10,42,122,0.35);
  transition:background .15s ease, transform .15s ease;
}
.modal__media-nav:hover{
  background:var(--blue);
  transform:translateY(-50%) scale(1.06);
}
.modal__media-nav--prev{ left:14px; }
.modal__media-nav--next{ right:14px; }
.modal__media-dots{
  position:absolute;
  bottom:12px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:6px;
}
.modal__media-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:rgba(20,40,110,0.25);
  cursor:pointer;
  transition:background .15s ease, transform .15s ease;
}
.modal__media-dot.active{
  background:var(--blue);
  transform:scale(1.2);
}
.modal__body{
  padding:22px 24px 26px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.modal__body .card__name{
  font-size:1.3rem;
  white-space:normal;
  overflow:visible;
  text-overflow:unset;
}
.modal__body .card__person{
  font-size:0.95rem;
  font-weight:700;
  white-space:normal;
  overflow:visible;
  text-overflow:unset;
}
.modal__body .card__sala{
  font-size:0.8rem;
}
.modal__desc{
  font-size:0.95rem;
  color:var(--ink-soft);
  line-height:1.55;
  margin:2px 0 0;
  white-space:pre-line;
}

/* ---------- ZOOM DE FOTO (dentro del modal) ---------- */
.zoom-overlay{
  position:fixed;
  inset:0;
  background:rgba(10,20,50,0.85);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:200;
  cursor:zoom-out;
  padding:40px;
}
.zoom-overlay[hidden]{display:none;}
.zoom-overlay__image{
  width:100%;
  height:100%;
  background-size:contain;
  background-position:center;
  background-repeat:no-repeat;
  box-shadow:0 10px 40px rgba(0,0,0,0.4);
  border-radius:8px;
}
.zoom-overlay__close{
  position:fixed;
  top:20px;
  right:24px;
  width:40px;
  height:40px;
  border-radius:50%;
  border:none;
  background:rgba(255,255,255,0.9);
  color:var(--ink);
  font-size:1.2rem;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:201;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width:720px){
  .topbar{position:static;}
  .topbar__inner{flex-wrap:wrap;}
  .search-wrap--inline{order:2;flex:1 1 100%;max-width:none;}
  .btn-primary--sm{order:3;margin-left:0;}
  .chips{
    flex-wrap:nowrap;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding-bottom:2px;
  }
  .chips::-webkit-scrollbar{display:none;}
  .chip{
    padding:6px 12px;
    font-size:0.78rem;
    flex-shrink:0;
  }
}
@media (max-width:560px){
  .grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:380px){
  .grid{grid-template-columns:1fr;}
}