/* ==========================================================================
   VV Portafolio — rejilla completa con filtros
   ========================================================================== */

.vv-pf {
  --vv-pf-violeta: #7c3aed;
  --vv-pf-tinta:   #10142c;
  --vv-pf-suave:   #6b7280;
  --vv-pf-borde:   #e8e9ef;
  --vv-pf-card:    #fff;
}

/* ------------------------------------------------------------- filtros */

.vv-pf__filtros {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0 0 36px;
}

.vv-pf__filtro {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: 1px solid var(--vv-pf-borde);
  border-radius: 999px;
  background-color: var(--vv-pf-card) !important;
  background-image: none !important;
  color: var(--vv-pf-tinta);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  overflow: hidden;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

/* El tema pinta en TODO <button> un ::before con degradado morado que se
   expande al pasar el cursor y acaba tapando el texto. Aqui no lo queremos. */
.vv-pf__filtro::before,
.vv-pf__filtro::after {
  display: none !important;
  content: none !important;
}

/* Y por si algun otro estilo cuela una capa, el contenido va siempre encima */
.vv-pf__etiqueta,
.vv-pf__n {
  position: relative;
  z-index: 2;
}

.vv-pf__filtro:focus-visible { outline: 2px solid var(--vv-pf-violeta); outline-offset: 2px; }

/* --- inactivo, con el cursor encima: tinte suave y texto morado legible --- */
.vv-pf__filtro:not(.is-activo):hover {
  background-color: #f4f0ff !important;
  border-color: var(--vv-pf-violeta);
  color: var(--vv-pf-violeta);
}

/* --- activo: morado solido, texto blanco --- */
.vv-pf__filtro.is-activo {
  background-color: var(--vv-pf-violeta) !important;
  border-color: var(--vv-pf-violeta);
  color: #fff !important;
}
.vv-pf__filtro.is-activo:hover {
  background-color: #6d28d9 !important;
  border-color: #6d28d9;
}

/* --- el contador, con contraste propio en cada estado --- */
.vv-pf__n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(16, 20, 44, .07);
  color: var(--vv-pf-tinta);
  font-size: 11.5px;
  font-weight: 700;
  transition: background .2s ease, color .2s ease;
}

.vv-pf__filtro:not(.is-activo):hover .vv-pf__n {
  background: rgba(124, 58, 237, .16);
  color: var(--vv-pf-violeta);
}

.vv-pf__filtro.is-activo .vv-pf__n {
  background: rgba(255, 255, 255, .24);
  color: #fff;
}

/* ------------------------------------------------------------- rejilla */

.vv-pf__rejilla {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}
.vv-pf__rejilla[data-columnas="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vv-pf__rejilla[data-columnas="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.vv-pf__item { min-width: 0; }
.vv-pf__item[hidden] { display: none; }

.vv-pf__card {
  display: block;
  height: 100%;
  border-radius: 16px;
  overflow: hidden;
  background: var(--vv-pf-card);
  box-shadow: 0 2px 10px rgba(16, 20, 44, .07);
  text-decoration: none;
  color: inherit;
  transition: transform .28s ease, box-shadow .28s ease;
}

.vv-pf__card:hover,
.vv-pf__card:focus-visible {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(16, 20, 44, .14);
}
.vv-pf__card:focus-visible { outline: 2px solid var(--vv-pf-violeta); outline-offset: 3px; }

/* -------------------------------------------------------------- imagen */

.vv-pf__img {
  position: relative;
  display: block;
  aspect-ratio: 1640 / 920;
  overflow: hidden;
  background: #f3f4f8;
}

.vv-pf__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
}
.vv-pf__card:hover .vv-pf__img img { transform: scale(1.05); }

/* la lupa aparece al pasar por encima, como en el carrusel de la portada */
.vv-pf__lupa {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--vv-pf-violeta);
  color: #fff;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.7);
  transition: opacity .28s ease, transform .28s ease;
  box-shadow: 0 8px 22px rgba(124, 58, 237, .45);
}
.vv-pf__card:hover .vv-pf__lupa,
.vv-pf__card:focus-visible .vv-pf__lupa {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* --------------------------------------------------------------- texto */

.vv-pf__texto {
  display: block;
  padding: 20px 20px 24px;
  text-align: center;
}

.vv-pf__cat {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  color: var(--vv-pf-suave);
  line-height: 1.3;
}

.vv-pf__titulo {
  display: block;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--vv-pf-tinta);
}

/* ------------------------------------------------- distintivo en desarrollo */

.vv-pf__item.vv-en-desarrollo .vv-pf__img::after {
  content: "En desarrollo";
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 3;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--vv-pf-violeta);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  line-height: 1;
  box-shadow: 0 4px 14px rgba(124, 58, 237, .45);
}

/* ------------------------------------------------------------- extremos */

.vv-pf__sin-resultados,
.vv-pf__vacio {
  margin: 40px 0 0;
  text-align: center;
  color: var(--vv-pf-suave);
  font-size: 16px;
}

@media (max-width: 1024px) {
  .vv-pf__rejilla,
  .vv-pf__rejilla[data-columnas="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
}

@media (max-width: 640px) {
  .vv-pf__rejilla,
  .vv-pf__rejilla[data-columnas="2"],
  .vv-pf__rejilla[data-columnas="4"] { grid-template-columns: 1fr; gap: 20px; }
  .vv-pf__filtros { gap: 8px; margin-bottom: 26px; }
  .vv-pf__filtro { padding: 9px 14px; font-size: 13px; }
  .vv-pf__titulo { font-size: 19px; }
}

@media (prefers-reduced-motion: reduce) {
  .vv-pf__card,
  .vv-pf__img img,
  .vv-pf__lupa { transition: none; }
  .vv-pf__card:hover { transform: none; }
  .vv-pf__card:hover .vv-pf__img img { transform: none; }
}