/* BienVivir — índice del glosario (archive-saber.php).
   Aprobado sobre design-src/preview/glosario.html — ver DESIGN_BRIEF.md §6.3-6.4. */

.g-intro{position:relative;min-height:44vh;display:flex;align-items:flex-end;color:#fff;overflow:hidden;}
.g-intro .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;}
.g-intro .overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,28,33,.4) 0%,rgba(18,28,33,.62) 100%);}
.g-intro .container{position:relative;padding-bottom:clamp(3.2rem,7vw,4.5rem);padding-top:clamp(5rem,12vw,7rem);}
.g-intro .overline{color:var(--salvia);}
.g-intro h1{font-family:var(--fs-serif);font-weight:400;font-size:clamp(2.8rem,7vw,4.5rem);line-height:1;margin:.5rem 0 .4rem;color:#fff;}
.g-intro .tagline{font-family:var(--fs-slab);font-size:clamp(1rem,1.8vw,1.2rem);color:#dce8e3;}
.g-intro p.lead{max-width:58ch;color:#e9e7de;margin-top:.9rem;font-size:.96rem;font-weight:300;}

.g-controls{background:var(--surface);border-bottom:1px solid var(--border);padding:1.4rem 0;position:sticky;top:70px;z-index:40;}
.g-controls-row{display:flex;align-items:center;gap:1rem;justify-content:space-between;}
.g-controls-toggle{flex-shrink:0;display:inline-flex;align-items:center;gap:.5rem;font-size:.78rem;font-weight:600;
  padding:.55rem 1.1rem;border:1.5px solid var(--border);border-radius:var(--r-pill);background:var(--surface);
  color:var(--ink);cursor:pointer;font-family:inherit;transition:.15s;}
.g-controls-toggle:hover{border-color:var(--agua-texto);color:var(--agua-texto);}
.g-controls-toggle .chev{transition:transform .2s;}
.g-controls-toggle[aria-expanded="true"] .chev{transform:rotate(180deg);}
.g-controls-panel{overflow:hidden;max-height:0;opacity:0;transition:max-height .25s ease,opacity .2s ease,margin-top .2s ease;}
.g-controls-panel.open{max-height:600px;opacity:1;margin-top:1.1rem;}
.search-wrap{position:relative;max-width:420px;flex:1;}
.search-wrap svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);opacity:.45;pointer-events:none;}
.search-wrap input{width:100%;padding:.7rem 1rem .7rem 2.6rem;border:1.5px solid var(--border);border-radius:var(--r-pill);
  font-family:inherit;font-size:.88rem;background:var(--g50);color:var(--ink);outline:none;transition:border-color .15s;}
.search-wrap input:focus{border-color:var(--agua);}

.filter-row{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem;align-items:center;}
.filter-label{font-size:.68rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-right:.3rem;}
.chip-toggle{font-size:.76rem;font-weight:600;padding:.4rem .9rem;border-radius:var(--r-pill);border:1.5px solid transparent;
  cursor:pointer;font-family:inherit;transition:.15s;display:inline-flex;align-items:center;gap:.4rem;}
.chip-toggle .dot{width:8px;height:8px;border-radius:50%;background:currentColor;opacity:.55;}

/* Reposo: tint/ink de cada categoría (mismos tokens que los chips de las tarjetas) */
.chip-toggle[data-categoria="mente-y-emocion"]{background:var(--cat-mente-tint);color:var(--cat-mente-ink);}
.chip-toggle[data-categoria="cuerpo-y-movimiento"]{background:var(--cat-cuerpo-tint);color:var(--cat-cuerpo-ink);}
.chip-toggle[data-categoria="tradiciones-ancestrales"]{background:var(--cat-trad-tint);color:var(--cat-trad-ink);}
.chip-toggle[data-categoria="naturaleza-y-entorno"]{background:var(--cat-nat-tint);color:var(--cat-nat-ink);}

/* Activo: se invierte a relleno sólido con texto blanco */
.chip-toggle.on{color:#fff;}
.chip-toggle[data-categoria="mente-y-emocion"].on{background:var(--cat-mente-ink);}
.chip-toggle[data-categoria="cuerpo-y-movimiento"].on{background:var(--cat-cuerpo-ink);}
.chip-toggle[data-categoria="tradiciones-ancestrales"].on{background:var(--cat-trad-ink);}
.chip-toggle[data-categoria="naturaleza-y-entorno"].on{background:var(--cat-nat-ink);}

.alpha-row{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:1.1rem;}
.alpha-btn{width:30px;height:30px;display:grid;place-items:center;border-radius:var(--r-sm);font-weight:600;font-size:.82rem;
  border:1px solid var(--border);background:var(--surface);color:var(--ink);cursor:pointer;font-family:inherit;transition:.15s;}
.alpha-btn:hover{background:var(--g100);}
.alpha-btn.on{background:var(--agua-texto);color:#fff;border-color:var(--agua-texto);}
.alpha-btn.off{color:var(--g300);background:var(--g50);cursor:not-allowed;border-style:dashed;}

.g-main{padding:2.5rem 0 5rem;}
.results-count{font-size:.82rem;color:var(--muted);margin-bottom:1.8rem;}
.results-count b{color:var(--agua-texto);}
.alpha-group{margin-bottom:2.6rem;}
.alpha-heading{font-family:var(--fs-serif);font-size:1.7rem;color:var(--azul-d);border-bottom:1px solid var(--border);
  padding-bottom:.5rem;margin-bottom:1.3rem;}
.cards-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;}

.saber-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;
  text-decoration:none;color:inherit;transition:.18s;display:flex;flex-direction:column;}
.saber-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--salvia);}
.saber-card .cover{height:130px;background:linear-gradient(135deg,var(--piedra),var(--salvia));}
.saber-card .cover img{width:100%;height:100%;object-fit:cover;}
.saber-card .body{padding:1.1rem 1.2rem 1.3rem;flex:1;display:flex;flex-direction:column;}
.saber-card .chips{display:flex;flex-wrap:wrap;gap:.35rem;margin-bottom:.6rem;}
.chip-cat{font-size:.66rem;font-weight:600;padding:.2rem .55rem;border-radius:var(--r-pill);}
.c-mente{background:var(--cat-mente-tint);color:var(--cat-mente-ink);}
.c-cuerpo{background:var(--cat-cuerpo-tint);color:var(--cat-cuerpo-ink);}
.c-trad{background:var(--cat-trad-tint);color:var(--cat-trad-ink);}
.c-nat{background:var(--cat-nat-tint);color:var(--cat-nat-ink);}
.saber-card h3{font-family:var(--fs-serif);font-size:1.3rem;font-weight:400;margin-bottom:.4rem;}
.saber-card .resumen{font-size:.84rem;color:var(--muted);line-height:1.55;}

.empty-state{display:none;text-align:center;padding:4rem 1rem;color:var(--muted);}
.empty-state.show{display:block;}
.empty-state .ic{margin-bottom:.8rem;}
.empty-state .ic img{width:48px;height:auto;margin:0 auto;}
.empty-state h3{font-family:var(--fs-serif);font-size:1.4rem;color:var(--ink);margin-bottom:.5rem;}
.empty-state p{margin-inline:auto;}

@media (max-width:1000px){
  .cards-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:680px){
  .cards-grid{grid-template-columns:1fr;}
  .g-controls{position:static;}
  .g-intro{min-height:34vh;}
}