/* ============================================================================
   Casos de exito (portfolio.php) — exclusivo de la vista. Tambien lo carga
   portfolio_single.php para pintar los "proyectos relacionados" con la misma
   ficha. Las tarjetas las genera Elements::getPortafolioCard(); aqui solo se
   cambia su presentacion, siempre dentro de .pf-list.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   Caso a fondo: tarjeta blanca sobre paper (el hero ya es navy)
   --------------------------------------------------------------------------- */
.pf-feat__card {
  display: grid;
  grid-template-columns: 1fr;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--kdx-line);
  color: var(--kdx-ink);
  text-decoration: none;
  transition: border-color .25s ease;
}

@media (min-width: 992px) {
  .pf-feat__card { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}

.pf-feat__card:hover { border-color: rgba(37, 99, 235, .4); color: var(--kdx-ink); }
.pf-feat__card:focus-visible { outline: 3px solid rgba(37, 99, 235, .35); outline-offset: 4px; }

.pf-feat__media { overflow: hidden; min-height: 260px; }

.pf-feat__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pf-feat__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  padding: 44px 44px 40px;
}

.pf-feat__body .kdx-h2 { margin: 0; }
.pf-feat__text { margin: 0; font-size: 1.02rem; line-height: 1.7; color: var(--kdx-body); }

.pf-feat__tags {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 0 4px;
  border-top: 1px solid var(--kdx-line);
}

.pf-feat__tags span {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .94rem;
  color: var(--kdx-ink);
}

.pf-feat__tags i { color: var(--kdx-blue); }

.pf-feat__card:hover .pf-feat__go i { transform: translateX(4px); }
.pf-feat__go i { transition: transform .22s ease; }

@media (max-width: 575px) {
  .pf-feat__body { padding: 28px 22px 26px; }
  .pf-feat__media { min-height: 0; aspect-ratio: 3 / 2; }
}

/* ---------------------------------------------------------------------------
   Cabecera del listado y barra de filtros
   --------------------------------------------------------------------------- */
.pf-all__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 32px;
  margin-bottom: 20px;
}

.pf-all__head .kdx-h2 { margin: 0; }

.pf-all__count {
  margin: 0;
  font-size: .92rem;
  color: var(--kdx-muted);
  font-variant-numeric: tabular-nums;
}

.pf-all__count strong { color: var(--kdx-ink); }

.pf-bar {
  margin: 0 0 28px;
  padding: 14px 0;
  background: #fff;
  border-top: 1px solid var(--kdx-line);
}

.pf-bar__tools { display: flex; align-items: center; gap: 10px; flex: 1 1 100%; }
.pf-bar__tools .kdx-search { flex: 0 1 380px; }
.pf-view { margin-left: auto; }

/* Escritorio: filtros a la izquierda y buscador + vista a la derecha, en una
   sola fila (sin titulo encima). */
.pf-bar { border-top: 0; }

@media (min-width: 1440px) {
  .pf-bar .kdx-filterbar__row { flex-wrap: nowrap; }
  .pf-bar .kdx-filters { flex: 0 0 auto; flex-wrap: nowrap; }
  .pf-bar__tools { flex: 0 0 auto; }
  .pf-bar__tools .kdx-search { flex: 0 0 220px; }
}

.pf-view {
  display: inline-flex;
  padding: 3px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--kdx-line);
}

.pf-view__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border: 0;
  border-radius: 999px;
  background: none;
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: .78rem;
  font-weight: 600;
  color: var(--kdx-body);
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}

.pf-view__btn.is-on { background: var(--kdx-ink); color: #fff; }
.pf-view__btn:focus-visible { outline: 3px solid rgba(56, 189, 248, .55); outline-offset: 2px; }

.pf-empty__reset { border: 0; background: none; padding: 0; cursor: pointer; }

#portfolioEmpty[hidden] { display: none; }

@media (max-width: 767px) {
  .pf-bar__tools { flex: 1 1 100%; }
  .pf-bar__tools .kdx-search { flex: 1 1 auto; min-width: 0; }
  .pf-view__btn span { display: none; }
  .pf-view__btn { padding: 8px 11px; }
  /* Los filtros se desplazan en horizontal en lugar de ocupar 3 filas */
  .pf-bar .kdx-filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .pf-bar .kdx-filters::-webkit-scrollbar { display: none; }
}

/* ---------------------------------------------------------------------------
   Ficha de proyecto: modo rejilla (por defecto)
   --------------------------------------------------------------------------- */
.pf-list .kdx-projects { gap: 28px 24px; }

@media (min-width: 1500px) {
  .pf-list .kdx-projects { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 28px; }
}

.pf-list .kdx-card--project {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: 16px;
  border: 1px solid var(--kdx-line);
  background: #fff;
  box-shadow: none;
  transition: border-color .25s ease;
}

.pf-list .kdx-card--project:hover { transform: none; border-color: rgba(37, 99, 235, .35); box-shadow: none; }

/* La captura va dentro de un marco de ventana: se lee como software, no como foto */
.pf-list .kdx-card__media {
  padding-top: 26px;
  background: #eef2f8;
  border-bottom: 1px solid var(--kdx-line);
}

.pf-list .kdx-card__media::before {
  content: '';
  position: absolute;
  top: 9px;
  left: 14px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #c9d3e2;
  box-shadow: 13px 0 0 #c9d3e2, 26px 0 0 #c9d3e2;
}

.pf-list .kdx-card__media[data-missing] { background: linear-gradient(140deg, #0a1637, #12306b); }

.pf-list .kdx-card__shot img { object-position: top center; }

.pf-list .card-number {
  position: absolute;
  top: 5px;
  right: 14px;
  font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  font-size: .7rem;
  color: var(--kdx-muted);
}

.pf-list .kdx-card__badge {
  left: 12px;
  bottom: 12px;
  padding: 5px 10px;
  font-size: .68rem;
  box-shadow: 0 4px 14px rgba(11, 20, 40, .14);
}

.pf-list .kdx-card__body { padding: 20px 22px 20px; }

.pf-list .kdx-card__title {
  font-size: 1.06rem;
  line-height: 1.35;
  letter-spacing: -.01em;
}

/* Solo los parrafos (el recorte a 3 lineas hace el resto); titulos y listas
   del caso viven en el detalle. Algunos textos empiezan con un <p> vacio. */
.pf-list .kdx-card__desc > :not(p) { display: none; }

.pf-list .kdx-card__go {
  align-self: flex-start;
  padding-top: 14px;
  border-top: 1px solid var(--kdx-line);
  width: 100%;
}

/* ---------------------------------------------------------------------------
   Modo lista: filas para recorrer rapido los 30+ casos
   --------------------------------------------------------------------------- */
.pf-list.is-list .kdx-projects {
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--kdx-line);
}

.pf-list.is-list .kdx-card--project {
  display: grid;
  grid-template-columns: 40px 150px minmax(0, 1fr) 190px;
  align-items: center;
  gap: 24px;
  padding: 16px 12px 16px 0;
  border: 0;
  border-bottom: 1px solid var(--kdx-line);
  border-radius: 0;
  background: transparent;
}

.pf-list.is-list .kdx-card--project:hover { transform: none; box-shadow: none; background: var(--kdx-paper); }

.pf-list.is-list .kdx-card__media { display: contents; }
.pf-list.is-list .kdx-card__media::before { display: none; }

.pf-list.is-list .kdx-card__shot {
  grid-column: 2;
  grid-row: 1;
  height: auto;
  aspect-ratio: 16 / 10;
  border-radius: 8px;
  overflow: hidden;
  background: linear-gradient(140deg, #0a1637, #12306b);
  border: 1px solid var(--kdx-line);
}

.pf-list.is-list .kdx-card__overlay { display: none; }

.pf-list.is-list .card-number {
  position: static;
  grid-column: 1;
  grid-row: 1;
  font-size: .8rem;
  text-align: right;
}

.pf-list.is-list .kdx-card__badge {
  position: static;
  grid-column: 4;
  grid-row: 1;
  justify-self: start;
  box-shadow: none;
  background: var(--kdx-paper);
  border: 1px solid var(--kdx-line);
}

.pf-list.is-list .kdx-card__body {
  grid-column: 3;
  grid-row: 1;
  padding: 0;
}

.pf-list.is-list .kdx-card__desc { -webkit-line-clamp: 1; line-clamp: 1; margin-top: 2px; }
.pf-list.is-list .kdx-card__spacer { display: none; }
.pf-list.is-list .kdx-card__go { width: auto; margin-top: 8px; padding-top: 0; border-top: 0; font-size: .85rem; }

@media (max-width: 767px) {
  .pf-list.is-list .kdx-card--project { grid-template-columns: 96px minmax(0, 1fr); gap: 8px 14px; padding: 14px 0; }
  .pf-list.is-list .card-number { display: none; }
  .pf-list.is-list .kdx-card__shot { grid-column: 1; grid-row: 1 / span 2; align-self: start; }
  .pf-list.is-list .kdx-card__body { grid-column: 2; grid-row: 1; }
  .pf-list.is-list .kdx-card__badge { grid-column: 2; grid-row: 2; }
  .pf-list.is-list .kdx-card__desc,
  .pf-list.is-list .kdx-card__go { display: none; }
  .pf-list.is-list .kdx-card__title { font-size: .95rem; max-height: 2.7em; margin-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .pf-feat__card,
  .pf-list .kdx-card--project { transition: none; }
}

/* v4: sin zoom de la captura al pasar por encima */
.pf-list .kdx-card--project:hover .kdx-card__shot img { transform: none; }

/* ---------------------------------------------------------------------------
   v7 — estandar de secciones (como el inicio): cabecera centrada, panel
   destacado de 24px y fichas con sombra suave (rejilla y lista).
   --------------------------------------------------------------------------- */
.pf-feat__card {
  border-radius: 24px;
  box-shadow: 0 12px 30px -24px rgba(8, 15, 36, .35);
  transition: border-color .25s ease, transform .25s ease;
}

.pf-feat__card:hover { transform: translateY(-2px); }

.pf-all__head.kdx-head--center { display: block; margin-bottom: 36px; }
.pf-all__head.kdx-head--center .kdx-h2 { margin: 0 auto; }
.pf-all__head.kdx-head--center .pf-all__count { margin-top: 12px; }

/* La pastilla del panel destacado no se estira a todo el ancho */
.pf-feat__body .kdx-head__kicker { align-self: flex-start; }

.pf-list .kdx-card--project {
  box-shadow: 0 12px 30px -24px rgba(8, 15, 36, .35);
  transition: border-color .25s ease, transform .25s ease;
}

.pf-list .kdx-card--project:hover { transform: translateY(-2px); box-shadow: 0 12px 30px -24px rgba(8, 15, 36, .35); }

/* Modo lista: cada fila es una tarjeta */
.pf-list.is-list .kdx-projects { gap: 12px; border-top: 0; }

.pf-list.is-list .kdx-card--project {
  padding: 14px 18px 14px 6px;
  border: 1px solid var(--kdx-line);
  border-radius: 16px;
  background: #fff;
}

.pf-list.is-list .kdx-card--project:hover { background: #fff; border-color: rgba(37, 99, 235, .35); transform: translateY(-2px); }

@media (max-width: 767px) {
  .pf-list.is-list .kdx-card--project { padding: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .pf-feat__card:hover, .pf-list .kdx-card--project:hover { transform: none; }
}

/* Ficha sola en la ultima fila: centrada (portfolio.js le pone .pf-orphan y
   el ancho de una columna). */
.pf-list .kdx-projects > .pf-orphan { grid-column: 1 / -1; justify-self: center; }
.pf-feat__body .kdx-head__kicker { background: #eaf1ff; box-shadow: none; }

/* ---------------------------------------------------------------------------
   Casos principales: carrusel (portfolio.js le pone .is-slider). Sin JS las
   tarjetas quedan una debajo de otra.
   --------------------------------------------------------------------------- */
.pf-feat__track { display: grid; gap: 24px; }

.pf-feat.is-slider .pf-feat__viewport { overflow: hidden; padding: 4px 0 28px; margin: -4px 0 -28px; }
.pf-feat.is-slider .pf-feat__track { display: flex; gap: 0; transition: transform .6s cubic-bezier(.22, .61, .36, 1); }
.pf-feat.is-slider .pf-feat__card { flex: 0 0 100%; }
.pf-feat.is-slider .pf-feat__card:hover { transform: none; }

.pf-feat__nav { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 24px; }
.pf-feat__nav[hidden] { display: none; }

.pf-feat__arrow {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--kdx-line);
  border-radius: 50%;
  background: #fff;
  color: var(--kdx-ink);
  transition: border-color .2s ease, color .2s ease;
}
.pf-feat__arrow:hover { border-color: rgba(37, 99, 235, .45); color: var(--kdx-blue); }

.pf-feat__dots { display: flex; gap: 8px; }
.pf-feat__dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #c9d4ea;
  transition: width .3s ease, background-color .3s ease;
}
.pf-feat__dot.is-on { width: 28px; background: var(--kdx-blue); }

.pf-feat__arrow:focus-visible,
.pf-feat__dot:focus-visible { outline: 3px solid rgba(37, 99, 235, .35); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .pf-feat.is-slider .pf-feat__track, .pf-feat__dot { transition: none; }
}