/* ==========================================================================
   Mejoras de Nuestra visión: búsqueda de análisis, chips de categorías
   reales y blur-up de portadas. Archivo NUEVO: el director lo concatena a
   producción. No toca main.css.
   ========================================================================== */

/* 1 · Búsqueda de análisis (page-nuestravision.php, banda oscura) */
#pg-vision .vision-buscar{display:flex;gap:10px;max-width:520px;margin-top:26px}
#pg-vision .vision-buscar input[type="search"]{
  flex:1;min-width:0;appearance:none;-webkit-appearance:none;border-radius:0;
  background:var(--base-2);border:1px solid var(--hair-d,var(--navy));
  color:var(--txt-d,#EAF0FA);
  font:400 15px/1.4 var(--sans,"IBM Plex Sans",sans-serif);
  padding:12px 14px;transition:border-color .2s ease}
#pg-vision .vision-buscar input[type="search"]::placeholder{color:var(--txt-d-sec,var(--steel))}
#pg-vision .vision-buscar input[type="search"]:focus{outline:none;border-color:var(--celeste)}
#pg-vision .vision-buscar button{
  font:500 12px/1 var(--mono,"IBM Plex Mono",monospace);
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--gold);background:transparent;border:1px solid var(--gold);
  padding:12px 18px;cursor:pointer;white-space:nowrap;
  transition:background-color .2s ease,color .2s ease}
#pg-vision .vision-buscar button:hover,
#pg-vision .vision-buscar button:focus-visible{background:var(--gold);color:var(--base-0)}

/* 2 · Chips de categorías reales (links dentro de .chips) */
#pg-vision .chips-cat li{padding:0;transition:border-color .2s ease}
#pg-vision .chips-cat a{display:block;color:inherit;text-decoration:none;
  padding:9px 14px;transition:color .2s ease}
#pg-vision .chips-cat li:hover{border-color:var(--steel)}
#pg-vision .chips-cat li:hover a{color:var(--txt-d,#EAF0FA)}
#pg-vision .chips-cat li.actual{border-color:var(--gold-ink)}
#pg-vision .chips-cat li.actual a{color:var(--gold)}
#pg-vision .cat-abre .chips-cat{margin-top:20px}

/* 3 · Blur-up de portadas: la cover arranca en --base-2 y la img entra en fade */
#pg-vision .cover{background:var(--base-2)}
.cover img.lazyimg{opacity:0;transition:opacity .4s ease}
.cover img.lazyimg.in{opacity:1}

/* Movimiento respetuoso */
@media (prefers-reduced-motion:reduce){
  #pg-vision .vision-buscar input[type="search"],
  #pg-vision .vision-buscar button,
  #pg-vision .chips-cat li,
  #pg-vision .chips-cat a,
  .cover img.lazyimg{transition:none}
  .cover img.lazyimg{opacity:1}
}