/* =============================================================================
   WaterProof WEB — Página "Banco de conocimiento" (/web/knowledge/).
   Replica 04-banco_de_conocimiento_es. Depende de tokens + base + components.
   Réplica estática: buscador/filtros son visuales; toggle lista/grilla con JS.
   ========================================================================== */

/* --- Hero (malla de red, texto navy centrado) ----------------------------- */
.wpk-hero { text-align:center; padding:72px 0 84px; background-position:center; background-size:cover; }
.wpk-hero h1 { color:var(--primary-900); font-size:clamp(30px,3.6vw,46px); line-height:1.2;
  max-width:20ch; margin:0 auto; }
.wpk-hero p { color:var(--text-3); margin:16px auto 0; font-size:var(--fs-lg); max-width:48ch; }

/* --- Banda de búsqueda (navy) --------------------------------------------- */
.wpk-search { background:var(--primary-900); padding:40px 0; text-align:center; }
.wpk-search__label { color:rgba(255,255,255,.9); font-weight:700; font-size:var(--fs-lg);
  margin-bottom:20px; line-height:1.4; }
.wpk-search__box { position:relative; max-width:400px; margin:0 auto; }
.wpk-search__box input { width:100%; padding:14px 48px 14px 22px; border-radius:var(--rounded-full);
  border:0; font-size:var(--fs-md); color:var(--text); }
/* lupa navy DENTRO del input (sin botón de círculo azul) */
.wpk-search__box button { position:absolute; right:16px; top:50%; transform:translateY(-50%);
  width:auto; height:auto; border:0; background:transparent; color:var(--primary-900);
  display:grid; place-items:center; cursor:pointer; }
.wpk-search__box button svg { width:20px; height:20px; }

/* --- Palabras clave (pills) ----------------------------------------------- */
.wpk-keywords { padding:52px 0 12px; }
.wpk-keywords h2 { font-size:var(--fs-4xl); color:var(--primary-900); margin-bottom:20px; }
.wpk-pills { display:flex; flex-wrap:wrap; gap:10px; }
.wpk-pill { padding:9px 20px; border-radius:var(--rounded-full); border:1px solid var(--border);
  background:#fff; color:var(--text-2); font-size:var(--fs-sm); font-weight:500; cursor:pointer; transition:.15s; }
.wpk-pill:hover { border-color:var(--blue); color:var(--blue); }
.wpk-pill.is-active { background:var(--blue-light); border-color:var(--blue); color:var(--blue-dark); font-weight:700; }

/* --- Layout: sidebar + main ----------------------------------------------- */
.wpk-body { padding:20px 0 88px; }
.wpk-layout { display:grid; gap:36px; }
@media (min-width:960px){ .wpk-layout { grid-template-columns:350px 1fr; } }

/* sidebar de filtros */
.wpk-clear { display:inline-flex; align-items:center; gap:8px; color:var(--blue); font-weight:600;
  font-size:var(--fs-sm); margin-bottom:20px; background:none; border:0; cursor:pointer; }
.wpk-clear svg { width:16px; height:16px; }
.wpk-filter { margin-bottom:28px; }
.wpk-filter h3 { font-size:var(--fs-2xl); color:var(--primary-900); margin-bottom:16px; }
.wpk-filter ul { display:grid; gap:12px; }
.wpk-filter li { color:var(--text-3); font-size:var(--fs-sm); cursor:pointer; transition:.12s; }
.wpk-filter li:hover { color:var(--blue); }
.wpk-filter li.is-active { color:var(--blue); font-weight:700; }
.wpk-dates { display:grid; gap:12px; }
.wpk-dates label { display:flex; align-items:center; gap:10px; color:var(--text-3); font-size:var(--fs-sm); cursor:pointer; }
.wpk-dates label.is-active { color:var(--blue); font-weight:700; }
.wpk-dates input[type=radio] { accent-color:var(--blue); }
.wpk-dateinputs { display:flex; gap:10px; margin-top:6px; }
.wpk-dateinputs input { flex:1; min-width:0; padding:8px 10px; border:1px solid var(--border);
  border-radius:var(--rounded-md); font-size:var(--fs-sm); color:var(--text-3); }

/* Filtros de categoría y rango de fecha como <select> en tablet/móvil (<960px);
   como listas de enlaces en desktop (≥960px, con la barra lateral). */
.wpk-filter__select { display:block; width:80%; padding:12px 40px 12px 14px;
  font-size:var(--fs-md); font-weight:500; color:var(--primary-900); background:#fff;
  border:1px solid var(--border-blue); border-radius:var(--rounded-md); cursor:pointer;
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='16'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%2304314c'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M6%209l6%206%206-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; }
.wpk-filter__select:focus { outline:2px solid var(--primary-300); outline-offset:1px; }
@media (max-width:959.98px){ .wpk-filter ul, .wpk-dates { display:none; } }
@media (min-width:960px){ .wpk-filter__select { display:none; } }

/* main: cabecera de resultados + toggle */
.wpk-reshead { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:22px; flex-wrap:wrap; }
.wpk-reshead__count { color:var(--text-2); font-size:var(--fs-lg); }
.wpk-reshead__count b { color:var(--blue); }
.wpk-view { display:flex; gap:8px; }
.wpk-view button { width:38px; height:38px; border:1px solid var(--border); border-radius:var(--rounded-md);
  background:#fff; display:grid; place-items:center; color:var(--text-3); cursor:pointer; }
.wpk-view button svg { width:20px; height:20px; }
.wpk-view button.is-active { background:var(--primary-900); color:#fff; border-color:var(--primary-900); }

/* --- Cards de artículo ---------------------------------------------------- */
.wpk-articles { display:grid; gap:22px; }
.wpk-art { display:grid; grid-template-columns:1fr; gap:20px; border:1px solid var(--border-blue);
  border-radius:var(--rounded-lg); padding:24px; background:#fff; transition:.15s; }
@media (min-width:620px){ .wpk-art { grid-template-columns:1fr 200px; align-items:start; } }
.wpk-art:hover { box-shadow:var(--shadow-md); border-color:var(--primary-200); }
.wpk-art__date { color:var(--blue-dark); font-size:var(--fs-sm); font-weight:600; margin-bottom:8px; }
.wpk-art__body h3 { color:var(--primary-900); font-size:var(--fs-3xl); margin-bottom:12px; line-height:1.2; }
.wpk-art__body > p { color:var(--text-3); font-size:var(--fs-sm); line-height:1.55; }
.wpk-art__foot { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; align-items:center; }
.wpk-tag { padding:5px 14px; border-radius:var(--rounded-full); border:1px solid var(--border);
  font-size:var(--fs-xs); color:var(--text-3); }
.wpk-art__more { color:var(--blue); font-weight:600; font-size:var(--fs-sm); margin-left:auto;
  white-space:nowrap; display:inline-flex; align-items:center; gap:6px; }
.wpk-art__more svg { width:15px; height:15px; }
.wpk-art__img { order:-1; }
@media (min-width:620px){ .wpk-art__img { order:0; } }
.wpk-art__img img { width:100%; height:160px; object-fit:cover; border-radius:var(--rounded-md); }

/* vista grilla */
.wpk-articles.is-grid { grid-template-columns:1fr; }
@media (min-width:720px){ .wpk-articles.is-grid { grid-template-columns:1fr 1fr; } }
.wpk-articles.is-grid .wpk-art { grid-template-columns:1fr; }
.wpk-articles.is-grid .wpk-art__img { order:-1; }
.wpk-articles.is-grid .wpk-art__img img { height:180px; }
/* en grilla, "Ver más" baja a su propia fila alineado a la izquierda */
.wpk-articles.is-grid .wpk-art__more { margin-left:0; flex-basis:100%; margin-top:6px; }

/* Proporción única de portada (3:2), la de las portadas reales y la genérica.
   Las alturas fijas quedan como respaldo para navegadores sin aspect-ratio. */
@supports (aspect-ratio: 3 / 2) {
  .wpk-art__img img,
  .wpk-articles.is-grid .wpk-art__img img { height:auto; aspect-ratio:3 / 2; }
}

/* --- Paginación ----------------------------------------------------------- */
.wpk-pagination { display:flex; justify-content:center; align-items:center; gap:8px; margin-top:40px; }
.wpk-pagination a, .wpk-pagination span { min-width:38px; height:38px; padding:0 8px; border-radius:var(--rounded-md);
  border:1px solid var(--border); display:grid; place-items:center; color:var(--text-2);
  font-size:var(--fs-sm); font-weight:600; background:#fff; }
.wpk-pagination a svg { width:18px; height:18px; }
.wpk-pagination a:hover { border-color:var(--blue); color:var(--blue); text-decoration:none; }
.wpk-pagination .is-active { background:var(--primary-900); color:#fff; border-color:var(--primary-900); }
.wpk-pagination .dots { border:0; background:none; }

/* "Volver arriba": componente compartido .wpw-totop (components.css) */

/* --- Sin resultados ------------------------------------------------------- */
/* La clase ya la usaba el listado del banco, pero no tenia regla: el estado
   vacio salia como un parrafo pelado. Lo comparte /web/faq/. */
.wpk-empty { padding:32px; text-align:center; color:var(--text-3); font-size:var(--fs-md);
  background:var(--primary-50); border:1px dashed var(--border-blue);
  border-radius:var(--rounded-lg); }
.wpk-empty a { color:var(--blue); font-weight:600; margin-left:6px; }

/* --- Ajustes móvil (<600px): titulares y espaciados más contenidos --------- */
@media (max-width:599.98px){
  .wpk-hero { padding:48px 0 40px; }
  .wpk-search { padding:32px 0; }
  .wpk-keywords { padding:36px 0 8px; }
  .wpk-keywords h2 { font-size:var(--fs-3xl); }        /* 40 → 32 */
  .wpk-body { padding:16px 0 56px; }
  .wpk-art { padding:18px; }
  .wpk-art__body h3 { font-size:var(--fs-2xl); }        /* 32 → 24 */
  .wpk-reshead__count { font-size:var(--fs-md); }       /* 18 → 16 */
  .wpk-pagination { flex-wrap:wrap; margin-top:28px; }
}