/* ============================================================
   PÁGINA DE PROYECTOS — templates/page-portfolio.php
   Estilos scopeados bajo .page-portfolio.
   Se encola condicionalmente desde functions.php.
   Depende de: pf-main (variables :root, .c-btn, .fade-up).
   ============================================================ */


/* ============================================================
   LAYOUT BASE
   ============================================================ */
.page-portfolio .c-section        { padding: 80px 48px; }
.page-portfolio .c-section--white { background: var(--color-blanco); }
.page-portfolio .c-section--tint  { background: var(--color-turquesa-50); }
.page-portfolio__container        { max-width: 1280px; margin: 0 auto; display: grid; gap: 20px;}


/* ============================================================
   TIPOGRAFÍA COMPARTIDA
   ============================================================ */
.page-portfolio .c-h2         { font-family: var(--font-heading); font-weight: 700; font-size: 30px; color: var(--color-negro); line-height: 1.2; margin: 0; }
.page-portfolio .c-h2--lg     { font-size: 34px; }
.page-portfolio .c-h2--center { text-align: center; }


/* ============================================================
   HERO
   Copia exacta de services.css (líneas 43-69), scopeada bajo
   .page-portfolio en vez de .page-service.
   Gradiente turquesa-500→menta-500, texto blanco, bg-hero.png
   con máscara, parallax bg, animación de entrada CSS-only.
   ============================================================ */
@keyframes pfHeroFadeIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.page-portfolio .c-hero{background:linear-gradient(45deg, var(--color-turquesa-500) 0%, var(--color-menta-500) 100%);padding:80px 48px 88px;position:relative;overflow:hidden;}
.page-portfolio .c-hero .bg-hero{background-image:url('../../img/ui/bg-hero.png');background-position:top left;background-repeat:repeat;background-size:5%;-webkit-mask-image:linear-gradient(90deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.1) 10%, rgba(0,0,0,0.1) 90%, rgba(0,0,0,0.2) 100%);mask-image:linear-gradient(90deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.1) 10%, rgba(0,0,0,0.1) 90%, rgba(0,0,0,0.2) 100%);width:100%;height:100%;position:absolute;top:0;left:0;}
.page-portfolio .c-hero .hero-parallax-bg{position:absolute;top:-40%;left:0;width:100%;height:180%;background:linear-gradient(45deg, var(--color-turquesa-500) 0%, var(--color-menta-500) 100%);will-change:transform;z-index:0;}
.page-portfolio .c-hero__inner{max-width:1280px;margin:0 auto;text-align:center;position:relative;z-index:1;}
.page-portfolio .c-hero__title{font-family:'Comfortaa',sans-serif;font-weight:300;font-size:3.6rem;color:var(--color-blanco);margin:0 0 8px;line-height:4.5rem;text-transform:uppercase;}
.page-portfolio .c-hero__subtitle{font-family:'Montserrat',sans-serif;font-weight:400;font-size:18px;color:rgba(255,255,255,0.8);max-width:580px;margin:0 auto;line-height:1.65;text-wrap:pretty;}
.page-portfolio .c-hero__subtitle p{margin:0;}
.page-portfolio .c-hero__title    { animation: pfHeroFadeIn 0.7s ease-out both; }
.page-portfolio .c-hero__subtitle { animation: pfHeroFadeIn 0.7s ease-out 0.15s both; }


/* ============================================================
   FILTER PILLS
   ============================================================ */
.page-portfolio .c-section--pills { 
  padding: 40px 48px;
}   
.page-portfolio .c-pills-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.page-portfolio .c-pill {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 14px;
  border-radius: 999px;
  /* BL-06: gris-200 (1.97:1 vs --color-blanco) fallaba WCAG 1.4.11 (mín. 3:1).
     gris-500 pasa con margen (5.16:1). */
  border: 1px solid var(--color-gris-500);
  background: var(--color-blanco);
  color: var(--color-gris-700);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  /* BL-31 — .c-pill pasó de <button> a <a>: sin esto hereda el subrayado
     y el color de enlace del tema. */
  text-decoration: none;
  transition: background-color 0.18s, border-color 0.18s, color 0.18s;
}
.page-portfolio a.c-pill:hover,
.page-portfolio a.c-pill:focus { text-decoration: none; }
.page-portfolio .c-pill:focus-visible {
  outline: 2px solid var(--color-turquesa-500);
  outline-offset: 2px;
}

/* Contador de proyectos — hereda el color del estado del pill padre
   (default / hover / active) para no necesitar reglas por estado. */
.page-portfolio .c-pill__count {
  margin-left: 10px;
  font-weight: 700;
}

/* Hover — tinte suave, no confundir con seleccionado.
   BL-06: turquesa-300 (2.25:1) fallaba. turquesa-400 pasa (3.11:1). */
.page-portfolio .c-pill:hover {
  background: var(--color-turquesa-50);
  border-color: var(--color-turquesa-400);
  color: var(--color-turquesa-700);
}

/* Pressed — momento del clic (mousedown), tinte más intenso.
   BL-06: se recorre un escalón (turquesa-400 → 500) para no chocar
   con el nuevo hover, que ahora ocupa el valor que pressed tenía antes. */
.page-portfolio .c-pill:active {
  background: var(--color-turquesa-100);
  border-color: var(--color-turquesa-500);
  color: var(--color-turquesa-700);
}

/* Seleccionado — el filtro actualmente aplicado, persiste tras el clic.
   BL-06: se recorre a turquesa-600 (6.22:1) — con pressed ahora en
   turquesa-500, mantener selected ahí lo dejaba idéntico a pressed
   (mismo fondo turquesa-100, mismo borde). Un escalón más preserva
   los 4 estados como visualmente distintos entre sí. */
.page-portfolio .c-pill--active {
  background: var(--color-turquesa-100);
  border-color: var(--color-turquesa-600);
  color: var(--color-turquesa-700);
  font-weight: 600;
}


/* ============================================================
   BADGES DE CATEGORÍA (project_type)
   ============================================================ */
.page-portfolio .c-badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.page-portfolio .c-badge {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border: none;
  border-radius: 999px;
  background: var(--color-turquesa-50);
  color: var(--color-turquesa-700);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: 0.02em;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.18s;
}
.page-portfolio a.c-badge:hover,
.page-portfolio a.c-badge:focus { text-decoration: none; }
/* BL-31 — .c-badge pasó de <button> (filtro JS in-place) a <a> que navega
   al archivo de la disciplina. Se conservan los estados de interacción y
   se agrega text-decoration:none, que el <button> no necesitaba. */
.page-portfolio .c-badge:hover {
  background: var(--color-turquesa-100);
}
.page-portfolio .c-badge:focus-visible {
  outline: 2px solid var(--color-turquesa-500);
  outline-offset: 2px;
}


/* ============================================================
   LOOP 1 — LAYOUT ASIMÉTRICO
   Columna izquierda: 1 card grande (.c-project-card--lg).
   Columna derecha:   3 cards normales apiladas (.c-loop1-stack).
   ============================================================ */
.page-portfolio .c-section--projects {
  padding: 20px 48px 80px;
}
.page-portfolio .c-loop1-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: stretch;
}
.page-portfolio .c-loop1-stack {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
/* Las cards del stack se reparten la altura de la columna a partes iguales. */
.page-portfolio .c-loop1-stack .c-project-card {
  flex: 1;
}


/* ============================================================
   PROJECT CARD — BASE
   Compartida por Loop 1 (stack + --lg), Loop 2 y Loop 3.
   ============================================================ */
.page-portfolio .c-project-card {
  background: var(--color-blanco);
  border: 1px solid var(--color-gris-50);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(2,9,10,0.06), 0 2px 8px rgba(2,9,10,0.04);
  display: flex;
  flex-direction: column;
  transition: transform 0.25s, box-shadow 0.25s;
}
.page-portfolio .c-project-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 48px rgba(22,129,150,0.15);
}

/* BL-18 — La entrada escalonada de las cards de Loop 1/2/3 al hacer
   scroll la maneja GSAP desde main.js (mismo staggerIn() de BL-17,
   disparado ahora también por IntersectionObserver sobre cada
   .c-scroll-reveal-group). Este opacity:0 es solo el estado de partida
   antes de que GSAP tome el control — evita el flash de contenido
   visible mientras se espera a que el grupo entre al viewport.
   .visible es el escape permanente: staggerIn() la agrega a toda card
   que anima (por scroll o por cambio de filtro), así que una card que
   nunca cruzó el viewport no vuelve a opacity:0 después del clearProps
   de un tween posterior (p. ej. al volver a "Todos los proyectos"). */
.page-portfolio .c-project-card.c-scroll-reveal {
  opacity: 0;
}
.page-portfolio .c-project-card.c-scroll-reveal.visible {
  opacity: 1;
}

/* Imagen de portada */
.page-portfolio .c-project-card__image-wrap {
  aspect-ratio: 16/9;
  overflow: hidden;
  position: relative;
}
.page-portfolio .c-project-card__image-wrap a   { display: block; width: 100%; height: 100%; }
.page-portfolio .c-project-card__image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.page-portfolio .c-project-card:hover .c-project-card__image-wrap img { transform: scale(1.04); }
.page-portfolio .c-project-card__placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--color-turquesa-50) 0%, var(--color-menta-50) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.page-portfolio .c-project-card__placeholder svg { width: 32px; height: 32px; color: var(--color-turquesa-400); opacity: 0.4; }

/* Ícono candado NDA */
.page-portfolio .c-project-card__lock {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(2,9,10,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.page-portfolio .c-project-card__lock svg { width: 14px; height: 14px; color: var(--color-blanco); }

/* Cuerpo */
.page-portfolio .c-project-card__body {
  padding: 22px 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.page-portfolio .c-project-card__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.3;
  margin: 0;
}
/* Hereda el estilo global de anchors en main.css — sin override propio, homologado con el patrón de home.css */
.page-portfolio .c-project-card__excerpt {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  color: var(--color-gris-600);
  line-height: 1.65;
  margin: 0;
  text-wrap: pretty;
}
.page-portfolio .c-project-card__link {
  margin-top: auto;
  padding-top: 4px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13.5px;
  color: var(--color-turquesa-500);
  text-decoration: none;
  transition: gap 0.2s, color 0.18s;
  align-self: flex-start;
}
.page-portfolio .c-project-card__link:hover { gap: 10px; color: var(--color-turquesa-700); }
.page-portfolio .c-project-card__link svg   { width: 15px; height: 15px; flex-shrink: 0; }


/* ============================================================
   PROJECT CARD — MODIFICADORES --lg / --md
   --lg: Loop 1, fila superior a ancho completo (horizontal).
   --md: Loop 1, fila 2 columna izquierda (vertical, imagen crece).
   Cuerpo, tipografía y bloque de meta son compartidos entre ambas;
   la imagen y el layout general son específicos de cada variante.
   ============================================================ */
/* La card destacada ocupa las 12 columnas y pasa a layout horizontal:
   imagen izquierda (55%) / cuerpo derecha. */
.page-portfolio .c-project-card--lg {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 55% 1fr;
}
/* La imagen --lg no tiene aspect-ratio fijo; crece para llenar el card. */
.page-portfolio .c-project-card--lg .c-project-card__image-wrap {
  aspect-ratio: unset;
  height: 100%;
  min-height: 320px;
}
/* La imagen --md sí crece con flex:1 (layout vertical). */
.page-portfolio .c-project-card--md .c-project-card__image-wrap {
  aspect-ratio: unset;
  flex: 1;
  min-height: 260px;
}
/* Body no compite con flex:1 de la imagen — toma su altura natural. */
.page-portfolio .c-project-card--lg .c-project-card__body,
.page-portfolio .c-project-card--md .c-project-card__body {
  flex: 0 0 auto;
  padding: 28px 28px 32px;
  gap: 14px;
}
.page-portfolio .c-project-card--lg .c-project-card__title,
.page-portfolio .c-project-card--md .c-project-card__title   { font-size: 20px; }
.page-portfolio .c-project-card--lg .c-project-card__excerpt,
.page-portfolio .c-project-card--md .c-project-card__excerpt { font-size: 15px; }

/* Meta — se renderiza en todas las variantes. Oculto por defecto;
   visible en lg/md en desktop y en TODAS las cards bajo 991px. */
.page-portfolio .c-project-card__meta {
  display: none;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  border-top: 1px solid var(--color-gris-50);
  padding-top: 16px;
  margin-top: 4px;
}
.page-portfolio .c-project-card--lg .c-project-card__meta,
.page-portfolio .c-project-card--md .c-project-card__meta { display: grid; }
.page-portfolio .c-project-card__meta-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.page-portfolio .c-project-card__meta-item svg {
  width: 18px;
  height: 18px;
  color: var(--color-turquesa-500);
  flex-shrink: 0;
  margin-top: 1px;
}
.page-portfolio .c-project-card__meta-stack {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.page-portfolio .c-project-card__meta-label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-gris-400);
}
.page-portfolio .c-project-card__meta-value {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13px;
  color: var(--color-negro);
}


/* ============================================================
   GRIDS DE PROYECTOS
   ============================================================ */
/* 2 columnas — Loop 2, grupo 1 */
.page-portfolio .c-project-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
/* 3 columnas — Loop 2 grupo 2 y Loop 3 */
.page-portfolio .c-project-grid--3col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
/* Espacio entre grids consecutivos dentro del mismo section */
.page-portfolio .c-project-grid   + .c-project-grid--3col { margin-top: 24px; }
.page-portfolio .c-project-grid--3col + .c-project-grid   { margin-top: 24px; }


/* ============================================================
   ESTADO VACÍO
   .c-portfolio-empty          — sin proyectos publicados (PHP).
   BL-31 — Se eliminó la variante .c-portfolio-empty--filtered (filtro
   sin resultados). Ya no existe filtro client-side, y un archivo de
   disciplina sin proyectos devuelve 404 (pf_project_type_empty_404 en
   inc/cpt.php) en vez de renderizar vacío.

   La regla [hidden] garantiza que card.hidden=true y
   emptyFiltered.hidden=true prevalezcan sobre display:flex/grid,
   que tiene mayor especificidad que el atributo nativo del navegador.
   ============================================================ */
.page-portfolio .c-project-card[hidden],
.page-portfolio .c-portfolio-empty[hidden] { display: none; }

.page-portfolio .c-portfolio-empty {
  text-align: center;
  padding: 64px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.page-portfolio .c-portfolio-empty p {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  color: var(--color-gris-500);
  margin: 0;
}


/* ============================================================
   ABOUT — "Strategic Consulting Built for Real-World Complexity"
   Layout 2 columnas: imagen izquierda / texto derecha.
   Fondo vía .c-section--tint.
   ============================================================ */
.page-portfolio .c-about-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 88px;
  align-items: center;
}
.page-portfolio .c-about-split__image {
  aspect-ratio: 3/2;
  border-radius: 14px;
  overflow: hidden;
  position: relative;
  background: linear-gradient(135deg, var(--color-turquesa-100) 0%, var(--color-menta-100) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.page-portfolio .c-about-split__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 14px;
}
.page-portfolio .c-about-split__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  opacity: 0.5;
}
.page-portfolio .c-about-split__placeholder svg { width: 44px; height: 44px; color: var(--color-turquesa-500); }
.page-portfolio .c-about-split__text {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.page-portfolio .c-about-split__text .c-rte p {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 15px;
  color: var(--color-gris-600);
  line-height: 1.72;
  margin: 0 0 16px;
  text-wrap: pretty;
}
.page-portfolio .c-about-split__text .c-rte p:last-child { margin-bottom: 0; }


/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 991px) {
  .page-portfolio .c-section              { padding: 16px 24px; }
  .page-portfolio .c-section--pills       { padding: 32px 24px; }
  .page-portfolio .c-pill                 { font-weight: 700; }
  .page-portfolio .c-pill--active         { font-weight: 700; }
  .page-portfolio .c-pills-nav            { gap: 12px; }
  .page-portfolio .c-hero                 { padding: 60px 24px 72px; }
  .page-portfolio .c-hero__title          { font-size: 2.5rem; }
  /* BL-33: en mobile el patrón se veía casi imperceptible al 5% (mismo
     valor que desktop) — pedido explícito, sube a 25%. */
  .page-portfolio .c-hero .bg-hero        { background-size: 25%; }
  .page-portfolio .c-loop1-grid           { grid-template-columns: 1fr; }
  /* En mobile el --lg vuelve a tener imagen con ratio fijo */
  .page-portfolio .c-project-card--lg     { grid-template-columns: 1fr; }
  .page-portfolio .c-project-card--lg .c-project-card__image-wrap,
  .page-portfolio .c-project-card--md .c-project-card__image-wrap { aspect-ratio: 16/9; flex: unset; height: auto; min-height: 0; }
  /* Todas las variantes de card comparten 17px en mobile — el override a
     20px de --lg/--md (línea ~332) es exclusivo de desktop. --h ya está
     en 17px siempre, sin override propio. */
  .page-portfolio .c-project-card--lg .c-project-card__title,
  .page-portfolio .c-project-card--md .c-project-card__title { font-size: 17px; }
  .page-portfolio .c-project-card__meta   { display: grid; grid-template-columns: 1fr 1fr; }
  .page-portfolio .c-project-grid--3col   { grid-template-columns: repeat(2, 1fr); }
  .page-portfolio .c-about-split          { grid-template-columns: 1fr; gap: 48px; }
  /* BL-15 / BL-05 / BL-30 — Último bloque visible antes del footer (About en
     la vista curada, ahora visible también en mobile; contador+botón en la
     vista filtrada). El padding-bottom base de 16px queda muy apretado
     contra la sección de contacto. */
  .page-portfolio .c-section--tail        { padding-bottom: 40px; }
}
@media (max-width: 767px) {
  .page-portfolio .c-project-grid         { grid-template-columns: 1fr; }
  .page-portfolio .c-project-grid--3col   { grid-template-columns: 1fr; }
  .page-portfolio .c-project-card__meta   { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .page-portfolio .c-pills-nav            { justify-content: flex-start; }
}


/* ============================================================
   VISTA CURADA / FILTRADA — alternancia de vistas
   ============================================================ */



/* ============================================================
   ARCHIVOS DE DISCIPLINA — .c-filtered-grid
   Grid virtual de 6 columnas.

   BL-31 — Antes esta grilla la poblaba main.js con clases de span
   calculadas en el cliente (vista filtrada). Ahora las clases las escribe
   taxonomy-project_type.php en PHP, según el patrón ordinal
   2h/3v/2h/3v/2h. La grilla en sí no cambió: mismas 6 columnas, mismos
   spans.
   ============================================================ */

/* BL-15 / BL-31 — En desktop, la grilla arranca con el mismo padding-top
   que el Bloque A (20px) en vez del .c-section base (80px), para que el
   espacio bajo el menú de pills sea idéntico al de la vista curada. Con
   min-width para no bleedear sobre el padding mobile de .c-section
   (16px), que tiene la misma especificidad y depende del orden en el
   media query. */
@media (min-width: 992px) {
  .page-portfolio .c-filtered-grid-section {
    padding-top: 20px;
  }
}

.page-portfolio .c-filtered-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 24px;
}

/* Clases asignadas en PHP según posición ordinal (BL-31):
   .c-fcol-3 → span 2 de 6 = 3 tarjetas por fila  (posiciones 2,3,4 / 7,8,9)
   .c-fcol-2 → span 3 de 6 = 2 tarjetas por fila  (posiciones 0,1 / 5,6 / 10,11)

   NOTA: el patrón asume 12 cards. Con menos (hoy máx. 3 por disciplina)
   la última fila queda incompleta y sobra ancho. Es intencional —
   decisión explícita de Felipe en BL-31, ver el comentario largo en
   taxonomy-project_type.php antes de "arreglarlo". */
.page-portfolio .c-fcol-3 { grid-column: span 2; }
.page-portfolio .c-fcol-2 { grid-column: span 3; }

/* Tarjeta horizontal — usada en filas de 2 de la vista filtrada.
   Imagen izquierda (~45%) / cuerpo derecha. */
.page-portfolio .c-project-card--h {
  display: grid;
  grid-template-columns: 45% 1fr;
  flex-direction: unset; /* anula el flex-column de la card base */
}
.page-portfolio .c-project-card--h .c-project-card__image-wrap {
  aspect-ratio: unset;
  height: 100%;
  min-height: 220px;
}
.page-portfolio .c-project-card--h .c-project-card__image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px 0 0 12px;
}
.page-portfolio .c-project-card--h .c-project-card__image-wrap a {
  display: block;
  height: 100%;
}
.page-portfolio .c-project-card--h .c-project-card__placeholder {
  height: 100%;
  min-height: 220px;
  border-radius: 12px 0 0 12px;
}
.page-portfolio .c-project-card--h .c-project-card__body {
  border-radius: 0 12px 12px 0;
}


/* ============================================================
   CONTADOR DE PROYECTOS — .c-filtered-summary
   BL-31 (revisión) — Reincorporado a pedido de Felipe. Antes lo poblaba
   main.js con dos data-tpl (BL-14); ahora es texto estático que arma
   taxonomy-project_type.php en PHP. Sin botón "Show all projects" — no se
   pidió en esta revisión.
   ============================================================ */
.page-portfolio .c-filtered-summary {
  display: flex;
  flex-direction: column;
  align-items: center;
  border-top: 1px solid var(--color-gris-50);
  margin-top: 32px;
  padding-top: 32px;
}
.page-portfolio .c-filtered-count {
  text-align: center;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: var(--color-gris-600);
  margin: 0;
}
.page-portfolio .c-filtered-count__main,
.page-portfolio .c-filtered-count__filter {
  display: block;
}
.page-portfolio .c-filtered-count__filter {
  margin-top: 4px;
}
.page-portfolio .c-filtered-showall {
  display: grid;
  margin-top: 16px;
}


/* ============================================================
   RESPONSIVE — grilla de archivos de disciplina
   ============================================================ */

@media (max-width: 991px) {
  .page-portfolio .c-filtered-grid         { grid-template-columns: repeat(2, 1fr); }
  .page-portfolio .c-fcol-3,
  .page-portfolio .c-fcol-2               { grid-column: span 1; }
  .page-portfolio .c-project-card--h      { grid-template-columns: 1fr; }
  .page-portfolio .c-project-card--h .c-project-card__image-wrap img  { border-radius: 12px 12px 0 0; }
  .page-portfolio .c-project-card--h .c-project-card__placeholder     { border-radius: 12px 12px 0 0; }
  .page-portfolio .c-project-card--h .c-project-card__body            { border-radius: 0 0 12px 12px; }
}

@media (max-width: 767px) {
  .page-portfolio .c-filtered-grid         { grid-template-columns: 1fr; }
}