/* ---------------------------------------------------------------------------
   1. CONFIGURACIÓN: Bootstrap Container Queries
   --------------------------------------------------------------------------- */

/* IMPORTANTE: Añadir esto después de importar Bootstrap */
.col, 
[class*="col-"] {
  container-type: inline-size;
  container-name: post-container;
}


/* ---------------------------------------------------------------------------
   2. VARIABLES: Sistema de diseño unificado (BOOTSTRAP BREAKPOINTS)
   
   Bootstrap 5 Breakpoints:
   - XS: <576px (móviles pequeños)
   - SM: ≥576px (móviles grandes)
   - MD: ≥768px (tablets)
   - LG: ≥992px (laptops)
   - XL: ≥1200px (desktops)
   - XXL: ≥1400px (pantallas grandes)
   --------------------------------------------------------------------------- */

:root {
  /* Espaciado modular */
  --post-spacing-xs: var(--space-xs);
  --post-spacing-sm: 0.75rem;
  --post-spacing-md: var(--space-sm);
  --post-spacing-lg: 1.5rem;
  --post-spacing-xl: var(--space-md);
  --post-spacing-2xl: 2.5rem;
  --post-spacing-3xl: var(--space-lg);

  /* --- CATEGORÍAS --- */
  --fs-category-large: 0.75rem;
  --fs-category-medium: 0.7rem;
  --fs-category-small: 0.65rem;
  
  /* --- EXTRACTOS --- */
  --fs-excerpt-large: 0.9rem;
  --fs-excerpt-medium: 0.85rem;
  --fs-excerpt-small: 0.75rem;
  
  /* --- METADATA --- */
  --fs-meta-large: 0.7rem;
  --fs-meta-medium: 0.65rem;
  --fs-meta-small: 0.6rem;
  
  /* Tamaños de imagen lateral */
  --image-side-width: 70px;
  --image-grid-width: 80px;
  
  /* Efectos hover */
  --hover-elevation: -1px;
  --hover-lateral: 1px;
}


/* ---------------------------------------------------------------------------
   3. CLASES BASE: Contenedores y estructura de post
   --------------------------------------------------------------------------- */

.posts-layout {
  margin-bottom: var(--post-spacing-3xl);
  container-type: inline-size;
}

.post-item {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: var(--color-white);
}


/* ---------------------------------------------------------------------------
   4. IMÁGENES: Componentes base
   --------------------------------------------------------------------------- */

.post-image {
  position: relative;
  overflow: hidden;
  z-index: 10;
}

/* Imágenes con margen inferior */
.post-image-mb-md {
  margin-bottom: var(--post-spacing-md);
}

.post-image-mb-lg {
  margin-bottom: var(--post-spacing-lg);
}

/* Imágenes laterales con ancho fijo */
.post-side-image,
.post-stack-horizontal .post-stack-item-image {
  flex-shrink: 0;
  width: var(--image-side-width);
}

/* Imágenes de altura completa */
.post-index-image {
  height: 100%;
}

/* ---------------------------------------------------------------------------
   5. ÁREAS DE CONTENIDO: Clases base y variantes
   --------------------------------------------------------------------------- */

.post-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

/* Padding específico por tipo */
.post-card-content {
  padding: 0 var(--post-spacing-xs);
}

.post-content--up {
  margin: -11.5rem 1rem 0;
  padding: 2rem 3rem 0 !important;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background-color: var(--color-white);
}

.post-list-content,
.post-featured-content {
  padding: var(--post-spacing-md);
  padding-top: none;
}

.post-duo-item-content,
.post-hero-stack-content {
  padding: 0 var(--post-spacing-md) var(--post-spacing-md);
}

.post-grid-small-content {
  padding: 0 var(--post-spacing-sm) var(--post-spacing-sm);
}

.post-hero-grid-content {
  position: relative;
  z-index: 1;
  padding: var(--post-spacing-xl);
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}

.post-stack-vertical .post-stack-item-content {
  position: relative;
  z-index: 1;
  padding: 0 var(--post-spacing-xs);
}


/* ---------------------------------------------------------------------------
   6. CATEGORÍAS: Sistema base con modificadores
   --------------------------------------------------------------------------- */

.post-category {
  text-transform: uppercase;
  font-weight: 700;
  z-index: 10;
  position: relative;
  margin-bottom: var(--post-spacing-xs);
}

/* Tamaños */
.post-category--small {
  font-size: var(--fs-category-small);
}

.post-category--medium {
  font-size: var(--fs-category-medium);
}

.post-category--large {
  font-size: var(--fs-category-large);
}

/* Links */
.post-category a {
  text-decoration: none;
}

body.body-posts-index .post-category {
  display: none;
}


/* ---------------------------------------------------------------------------
   7. EXTRACTOS: Sistema base con modificadores
   --------------------------------------------------------------------------- */

.post-excerpt {
  color: var(--color-gray-dark);
  line-height: 1.5;
  margin-bottom: var(--post-spacing-xs);
}

/* Tamaños */
.post-excerpt--small,
.post-grid-small-excerpt {
  font-size: var(--fs-excerpt-small);
}

.post-excerpt--medium,
.post-card-excerpt,
.post-grid-item-excerpt,
.post-stack-item-excerpt {
  font-size: var(--fs-excerpt-medium);
}

.post-excerpt--large,
.post-main-excerpt,
.post-index-excerpt,
.post-featured-excerpt,
.post-hero-grid-excerpt,
.post-duo-item-excerpt,
.post-hero-stack-excerpt {
  font-size: var(--fs-excerpt-large);
  line-height: 1.6;
  margin-bottom: var(--post-spacing-md);
}


/* ---------------------------------------------------------------------------
   8. METADATA: Sistema base con modificadores
   --------------------------------------------------------------------------- */

.post-meta {
  color: var(--color-gray);
}

/* Tamaños */
.post-meta--small,
.post-grid-small-meta {
  font-size: var(--fs-meta-small);
}

.post-meta--medium,
.post-list-meta,
.post-side-meta,
.post-grid-item-meta,
.post-stack-item-meta {
  font-size: var(--fs-meta-medium);
}

.post-meta--large,
.post-main-meta,
.post-index-meta,
.post-featured-meta,
.post-hero-grid-meta,
.post-duo-item-meta,
.post-hero-stack-meta {
  font-size: var(--fs-meta-large);
}

/* Comportamiento específico */
.post-list-meta,
.post-grid-item-meta,
.post-grid-small-meta {
  margin-top: auto;
}

.post-index-date {
  font-size: var(--font-sm);
  margin-top: var(--post-spacing-xs);
}

.post-index-author {
  float: left;
  margin-right: var(--post-spacing-md);
  margin-bottom: var(--post-spacing-xs);
}

.post-index-location {
  color: var(--color-black);
  font-weight: 600;
}


/* ---------------------------------------------------------------------------
   9. EFECTOS HOVER
   --------------------------------------------------------------------------- */

/* Elevación vertical */
.post-item:hover {
  transform: translateY(var(--hover-elevation));
}

/* Elevación lateral */
.post-side:hover,
.post-stack-horizontal:hover {
  transform: translateX(var(--hover-lateral));
}


/* ---------------------------------------------------------------------------
   10. UTILIDADES: Modificadores de título y helpers opcionales
   --------------------------------------------------------------------------- */

.post-title--xs  { font-size: var(--fs-tiny)     !important; }
.post-title--sm  { font-size: var(--fs-small)    !important; }
.post-title--md  { font-size: var(--fs-medium)   !important; }
.post-title--lg  { font-size: var(--fs-large)    !important; }
.post-title--xl  { font-size: var(--fs-featured) !important; }
.post-title--2xl { font-size: var(--fs-hero)     !important; }

/* Modificadores de extracto */
.post-excerpt--hide-mobile {
  display: none;
}


/* ==========================================================================
   LAYOUTS ESPECÍFICOS
   ========================================================================== */


/* ---------------------------------------------------------------------------
   LAYOUT 1: MAIN-SIDE (Principal + Laterales)
   --------------------------------------------------------------------------- */

.post-main {
  position: relative;
  height: 100%;
  background-color: var(--color-white);
}

.posts-side-container {
  height: 100%;
}

.post-side {
  position: relative;
  background-color: var(--color-white);
  transition: transform var(--transition-base);
  border-bottom: var(--border-width) solid var(--border-color);
  padding-bottom: var(--post-spacing-md);
  margin-bottom: var(--post-spacing-md);
}

.post-side:last-child {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}

.post-side-inner {
  display: flex;
  gap: var(--post-spacing-md);
  align-items: flex-start;
}


/* ---------------------------------------------------------------------------
   LAYOUT 2: FEATURED-LIST (Destacado + Grid)
   --------------------------------------------------------------------------- */

.featured-post-wrapper {
  margin-bottom: var(--post-spacing-xl);
}

/* Cursor pointer para todos los tipos de card que contienen un overlay link
   o usan event delegation con data-clickable */
.post-featured,
.post-list-item,
.post-grid-item,
.post-card,
.post-hero-grid {
  cursor: pointer;
}

.post-featured {
  position: relative;
  background-color: var(--color-white);
}

.posts-list-grid {
  margin-top: var(--post-spacing-xl);
}


/* ---------------------------------------------------------------------------
   LAYOUT 3: INDEX (Listado con imagen lateral)
   --------------------------------------------------------------------------- */

.post-index-row {
  margin-bottom: var(--post-spacing-2xl);
  padding-bottom: var(--post-spacing-2xl);
  border-bottom: var(--border-width) solid var(--border-color);
}

.post-index-row:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}


/* ---------------------------------------------------------------------------
   LAYOUT 4: HERO-GRID (Hero + Grid 2x2)
   --------------------------------------------------------------------------- */

.hero-grid-featured {
  margin-bottom: var(--post-spacing-xl);
}

.post-hero-grid {
  position: relative;
  background-color: var(--color-white);
  overflow: hidden;
}

.post-hero-grid-image {
  position: relative;
  overflow: hidden;
}


/* ---------------------------------------------------------------------------
   LAYOUT 5: DUO-GRID (2 Heroes + Grid 4)
   --------------------------------------------------------------------------- */

.duo-grid-featured {
  margin-bottom: var(--post-spacing-xl);
}


/* ---------------------------------------------------------------------------
   LAYOUT 6: HERO-STACK (Hero Left + Stack Right)
   --------------------------------------------------------------------------- */

.posts-stack-container {
  height: 100%;
}

.post-stack-item {
  position: relative;
  background-color: var(--color-white);
  transition: transform var(--transition-base);
  padding-bottom: var(--post-spacing-md);
  border-bottom: var(--border-width) solid var(--border-color);
}

.post-stack-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

/* Stack Horizontal Layout */
.post-stack-horizontal .post-stack-inner {
  display: flex;
  gap: var(--post-spacing-md);
  align-items: flex-start;
}

.post-stack-horizontal .post-stack-item-content {
  flex-grow: 1;
  position: relative;
  z-index: 1;
}

/* Stack Vertical Layout */
.post-stack-vertical {
  display: flex;
  flex-direction: column;
}

.post-stack-vertical .post-stack-item-image {
  position: relative;
  overflow: hidden;
}


/* ---------------------------------------------------------------------------
   LAYOUT 7: EVENTS LIST
   --------------------------------------------------------------------------- */

.event-past {
  position: relative;
}

.event-past .img-container {
  filter: grayscale(100%);
  opacity: 0.6;
}

.event-past .img-container:hover {
  filter: grayscale(5%);
  opacity: 0.7;
}

.event-past .post-content {
  opacity: 0.7;
}

.event-past .post-content:hover {
  opacity: 1;
}

.event-past .event-list-title,
.event-past .event-featured-title {
  color: var(--color-gray-dark);
}

/* Contenedor: eliminar aspect-ratio fijo */
.posts-layout-events-list .event-list-image .img-container,
.posts-layout-events-list .event-list-image .img-container-landscape,
.posts-layout-events-list .event-featured-image .img-container,
.posts-layout-events-list .event-featured-image .img-container-landscape {
  aspect-ratio: unset !important;
  height: auto !important;
  overflow: hidden;
}

/* Imagen: salir del sistema absolute y mostrar completa */
.posts-layout-events-list .event-list-image .img-container img,
.posts-layout-events-list .event-list-image .img-container-landscape img,
.posts-layout-events-list .event-featured-image .img-container img,
.posts-layout-events-list .event-featured-image .img-container-landscape img {
  position: static !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  width: 100% !important;
  height: auto !important;
  object-fit: unset !important;
}

/* Separador de eventos */
.events-separator {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 2rem 0;
}

.separator-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--bg-solitude), transparent);
}

.separator-text {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-gray-dark);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.875rem;
  letter-spacing: 0.05em;
}

/* Badges de estado */
.event-status-badge {
  position: absolute;
  top: 1rem;
  right: 1rem;
  color: var(--color-gray-dark);
  background: var(--color-white);
  padding: 0.5rem 1rem;
  border-radius: var(--radius-full);
  font-size: 0.875rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  z-index: 10;
}

.event-status-badge.event-concluded-small {
  padding: 0.375rem 0.75rem;
  font-size: 0.75rem;
}

/* Fechas de eventos */
.event-dates-wrapper {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  color: var(--color-form-text);
  font-weight: 500;
}

.event-dates--large {
  font-size: 1.125rem;
}

.event-dates--medium {
  font-size: 0.9375rem;
}

.event-date-icon,
.event-date-icon-small {
  color: var(--bs-primary);
  font-size: 1.25rem;
  margin-top: 0.125rem;
}

.event-date-icon-small {
  font-size: 1rem;
}

.event-date-range {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.date-separator {
  color: var(--color-gray);
}

.event-time {
  color: var(--color-gray-dark);
  font-size: 0.875em;
  margin-top: 0.25rem;
}

/* Tiempo relativo */
.event-relative {
  display: inline-flex;
  align-items: center;
  padding: 0.375rem 0.875rem;
  border-radius: var(--radius-full);
  font-size: 0.875rem;
  font-weight: 600;
}

.event-today {
  background: #d1e7dd;
  color: #0f5132;
}

.event-tomorrow {
  background: #cfe2ff;
  color: #084298;
}

.event-this-week {
  background: #fff3cd;
  color: #664d03;
}

.event-this-month,
.event-future {
  background: var(--bs-light);
  color: var(--color-gray-dark);
}

/* Ubicación */
.event-location {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-gray-dark);
  font-size: 0.9375rem;
}

.event-location i {
  color: var(--bs-primary);
}

.event-location--small {
  font-size: 0.875rem;
}

/* CTA Button */
.event-cta .btn {
  white-space: nowrap;
}

.event-cta .btn,
.event-cta .btn-lg {
  padding: var(--btn-lg-padding-y) var(--btn-lg-padding-x);
}


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */


/* ---------------------------------------------------------------------------
   CONTAINER QUERIES: Ajustes por tamaño de contenedor
   --------------------------------------------------------------------------- */

/* Contenedores muy pequeños (< 280px) - Ejemplo: 6 columnas en móvil */
@container post-container (max-width: 280px) {
  .post-excerpt {
    display: none;
  }
  
  .post-side-image,
  .post-stack-horizontal .post-stack-item-image {
    width: 60px;
  }
}

/* Contenedores pequeños (280px - 400px) - Ejemplo: 4-5 columnas */
@container post-container (min-width: 280px) and (max-width: 400px) {
  .post-title--xl {
    font-size: 1.1rem;
    margin-bottom: var(--post-spacing-xs);
  }
  
  .post-excerpt--large {
    font-size: var(--font-sm);
  }
  
  .post-side-image,
  .post-stack-horizontal .post-stack-item-image {
    width: 70px;
  }
}

/* Contenedores medianos (400px - 600px) - Ejemplo: 2-3 columnas */
@container post-container (min-width: 400px) and (max-width: 600px) {
  .post-title--md {
    font-size: 1.2rem;
    line-height: 1.4rem;
  }
  
  .post-hero-grid-content,
  .post-duo-item-content {
    padding: var(--post-spacing-md);
  }
  
  .post-side-image {
    width: 100px;
  }
  
  .post-grid-horizontal .post-grid-item-image {
    width: 120px;
  }
}

/* Contenedores grandes (> 600px) - Ejemplo: 1-2 columnas */
@container post-container (min-width: 600px) {
  .post-hero-grid-content {
    padding: var(--post-spacing-xl);
  }
  
  .post-excerpt {
    display: block;
  }
}


/* ---------------------------------------------------------------------------
   MEDIA QUERY: ≥768px — Extractos ocultos en móvil
   --------------------------------------------------------------------------- */

@media (min-width: 768px) {
  .post-excerpt--hide-mobile {
    display: block;
  }
}


/* ---------------------------------------------------------------------------
   MEDIA QUERY: ≤991px — Events List
   --------------------------------------------------------------------------- */

@media (max-width: 991.98px) {
  .event-dates--large {
    font-size: 1rem;
  }
  
  .events-separator {
    padding: 1.5rem 0;
  }
}


/* ---------------------------------------------------------------------------
   MEDIA QUERY: ≤768px — Vista móvil compacta
   --------------------------------------------------------------------------- */

@media (max-width: 768px) {

  /* ------------------------------------------------------------------
     1. CONTENEDOR: resetear gutters de Bootstrap en los layouts de post
     ------------------------------------------------------------------ */

  .posts-layout-featured-list .row,
  .posts-layout-hero-grid .row,
  .posts-layout-cards .row,
  .posts-layout-index .row {
    --bs-gutter-x: 0;
    --bs-gutter-y: 0;
  }

  /* ------------------------------------------------------------------
     2. ESTRUCTURA UNIFICADA: artículos en columna vertical con borde
     ------------------------------------------------------------------ */

  .post-featured,
  .post-list-item,
  .post-hero-grid,
  .post-grid-item,
  .post-card,
  .post-index-row {
    display: flex;
    flex-direction: column;
    width: 100%;
    border-bottom: 1px solid var(--border-color, #e5e5e5);
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  /* Quitar borde al último elemento de cada sección */
  .posts-layout > *:last-child .post-featured,
  .posts-layout > *:last-child .post-list-item,
  .posts-layout > *:last-child .post-card,
  .post-index-row:last-child {
    border-bottom: none;
  }

  /* Eliminar margin-bottom de los wrappers intermedios */
  .featured-post-wrapper,
  .posts-list-grid,
  .hero-grid-featured,
  .hero-grid-posts,
  .posts-layout {
    margin-bottom: 0 !important;
  }

  /* ------------------------------------------------------------------
     3. COLUMNAS BOOTSTRAP: sin padding lateral en móvil
     ------------------------------------------------------------------ */

  .post-featured > .row > [class*="col-"],
  .post-hero-grid > .row > [class*="col-"],
  .post-grid-item > .post-grid-item-inner > .row > [class*="col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .post-hero-grid > .row,
  .post-grid-item > .post-grid-item-inner > .row {
    --bs-gutter-x: 0;
    margin-left: 0;
    margin-right: 0;
  }

  .post-grid-item-inner {
    width: 100%;
  }

  /* ------------------------------------------------------------------
     4. IMÁGENES: 100% del ancho, aspect-ratio 16/9, sin bordes
     ------------------------------------------------------------------ */

  .post-featured-image,
  .post-list-image,
  .post-hero-grid-image,
  .post-grid-item-image,
  .post-card-image,
  .post-index-image {
    width: calc(100% + (var(--bs-gutter-x, 1.5rem)));
    margin-left: calc(-1 * var(--bs-gutter-x, 1.5rem) / 2);
    margin-right: calc(-1 * var(--bs-gutter-x, 1.5rem) / 2);
    margin-bottom: 0.75rem !important;
    height: auto !important;
  }

  /* Forzar aspect-ratio 16/9 en todos los contenedores de imagen */
  .post-featured-image .img-container,
  .post-list-image .img-container,
  .post-hero-grid-image .img-container,
  .post-grid-item-image .img-container,
  .post-card-image .img-container,
  .post-index-image .img-container {
    aspect-ratio: 16 / 9 !important;
  }

  /* Anular aspect-ratio cuadrado en algunas cards */
  .post-list-image .img-container-square,
  .post-card-image .img-container-square {
    aspect-ratio: 16 / 9 !important;
  }

  /* ------------------------------------------------------------------
     5. ORDEN: imagen siempre arriba, contenido siempre abajo
     ------------------------------------------------------------------ */

  /* featured-list: imagen (col-lg-7) arriba, texto (col-lg-5) abajo */
  .post-featured > .row > .col-lg-7 { order: 1 !important; }
  .post-featured > .row > .col-lg-5 { order: 2 !important; }

  /* hero-grid principal */
  .post-hero-grid > .row > .order-last  { order: 1 !important; }
  .post-hero-grid > .row > .order-first { order: 2 !important; }

  /* post-grid-item horizontal */
  .post-grid-item .row > .col-lg-7 { order: 1 !important; }
  .post-grid-item .row > .col-lg-5 { order: 2 !important; }

  /* Forzar columnas internas al 100% en móvil */
  .post-grid-item .post-grid-item-inner .row {
    display: flex;
    flex-direction: column;
  }

  .post-grid-item .post-grid-item-inner .row > .col-lg-7,
  .post-grid-item .post-grid-item-inner .row > .col-lg-5 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .post-grid-item-image {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .post-grid-item-image .img-container {
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
  }

  /* ------------------------------------------------------------------
     6. CONTENIDO: padding lateral mínimo
     ------------------------------------------------------------------ */

  .post-featured-content,
  .post-list-content,
  .post-hero-grid-content,
  .post-grid-item-content,
  .post-card-content,
  .post-index-content {
    padding: 0.5rem 0.75rem 1rem !important;
    height: auto !important;
    justify-content: flex-start !important;
  }

  /* ------------------------------------------------------------------
     7. TÍTULOS: tamaño único para todos los niveles
     ------------------------------------------------------------------ */

  .post-title,
  .post-title--xs,
  .post-title--sm,
  .post-title--md,
  .post-title--lg,
  .post-title--xl,
  .post-title--2xl {
    font-size: 1rem !important;
    line-height: 1.4 !important;
    margin-bottom: 0.35rem !important;
    font-weight: 700;
  }

  /* ------------------------------------------------------------------
     8. FECHA: visible, tamaño uniforme
     ------------------------------------------------------------------ */

  .post-date,
  .pub-date,
  .post-index-date,
  .post-meta,
  .post-meta--large,
  .post-meta--medium,
  .post-meta--small,
  .post-featured-meta,
  .post-hero-grid-meta,
  .post-list-meta,
  .post-grid-item-meta,
  .post-card-meta {
    font-size: 0.7rem !important;
    color: var(--color-gray, #888) !important;
    margin-top: 0.25rem !important;
    margin-bottom: 0 !important;
  }

  /* ------------------------------------------------------------------
     9. OCULTAR: extractos, sumarios, descripción, ubicación
     ------------------------------------------------------------------ */

  .post-index-excerpt,
  .post-featured-excerpt,
  .post-hero-grid-excerpt,
  .post-card-excerpt,
  .post-excerpt,
  .post-excerpt--large,
  .post-excerpt--medium,
  .post-excerpt--small,
  .post-index-location,
  .summary {
    display: none !important;
  }

  /* ------------------------------------------------------------------
     10. CATEGORÍAS: ocultar (redundantes en vista compacta)
     ------------------------------------------------------------------ */

  .post-category {
    display: none !important;
  }

  /* ------------------------------------------------------------------
     11. HOVER: desactivar transformaciones (no hay hover real en móvil)
     ------------------------------------------------------------------ */

  .post-item:hover {
    transform: none !important;
  }

  /* ------------------------------------------------------------------
     12. SEPARACIÓN entre secciones (layouts sucesivos)
     ------------------------------------------------------------------ */

  .posts-layout-section {
    margin-bottom: 0 !important;
  }

  .posts-layout-section + .posts-layout-section {
    border-top: 2px solid var(--border-color-dark, #ccc);
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* ------------------------------------------------------------------
     13. PAGINACIÓN: ocultar primer paginador
     ------------------------------------------------------------------ */

  .paginator-row:first-of-type {
    display: none !important;
  }

  /* ------------------------------------------------------------------
     14. BORDES: eliminar todos los bordes y sombras en móvil
     ------------------------------------------------------------------ */

  .post-featured,
  .post-list-item,
  .post-hero-grid,
  .post-grid-item,
  .post-card,
  .post-index-row,
  .post-grid-item-inner,
  .post-stack-item,
  .post-side {
    border: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
  }

  .posts-layout-section + .posts-layout-section {
    border-top: none !important;
  }

}


/* ===========================================================================
   PGRID — Grid de tarjetas con scroll infinito
   (posts-layout-grid.php)
   =========================================================================== */


/* ── Toolbar / Contador ──────────────────────────────────────────────────── */

.pgrid-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 0 0.75rem;
}

.pgrid-count {
  font-size: var(--fs-meta-medium, 0.65rem);
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--color-gray, #888);
  margin: 0;
}

.pgrid-count-shown {
  color: var(--color-gray-dark, #444);
}


/* ── Grid base ───────────────────────────────────────────────────────────── */

.pgrid {
  display: grid;
  gap: 1.25rem;
}

.pgrid--3col {
  grid-template-columns: repeat(3, 1fr);
}

.pgrid--2col {
  grid-template-columns: repeat(2, 1fr);
}


/* ── Tarjeta ─────────────────────────────────────────────────────────────── */

.pgrid-card {
  background: var(--color-white, #fff);
  border-radius: var(--radius-md, 4px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  box-shadow: 0 1px 6px var(--shadow-xs, rgba(0,0,0,.06));

  /* Animación de entrada: empieza invisible y desplazada hacia abajo */
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .55s ease-out, transform .35s var(--ease-standard, cubic-bezier(.4,0,.2,1)), box-shadow .25s ease;
  will-change: opacity, transform;
}

.pgrid-card--in {
  opacity: 1;
  transform: translateY(0);
}

.pgrid-card[data-clickable] {
  cursor: pointer;
}

.pgrid-card--in:hover {
  box-shadow: var(--shadow-md, 0 8px 24px rgba(0,0,0,.12));
  transform: translateY(-3px);
  /* Sin cambio de opacity — la animación de entrada ya la usa */
}

/* Sweep del título al hover de la card — igual que .post-card:hover h2 a en _links.css.
   Necesario porque h2 > a:hover solo dispara cuando el ratón está encima del texto. */
.pgrid-card:hover .pgrid-card-title a {
  color: var(--color-text-link, var(--bs-primary, #0d6efd)) !important;
  background-size: 100% 2px;
  background-position: left bottom;
}


/* Tarjeta destacada: ocupa 2 columnas × 2 filas (grid 3col) */
.pgrid--3col .pgrid-card--featured {
  grid-column: span 2;
  grid-row: span 2;
}

/* La tarjeta featured en 2col solo ocupa 2 columnas (sin doble fila) */
.pgrid--2col .pgrid-card--featured {
  grid-column: span 2;
}


/* ── Shimmer de entrada ──────────────────────────────────────────────────── */

.pgrid-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 35%,
    rgba(255,255,255,.55) 50%,
    transparent 65%
  );
  background-size: 250% 100%;
  background-position: -100% 0;
  pointer-events: none;
  opacity: 0;
  z-index: 3;
}

.pgrid-card--shimmer::after {
  animation: pgrid-shimmer .6s ease forwards;
}

@keyframes pgrid-shimmer {
  0%   { opacity: 1; background-position: -100% 0; }
  100% { opacity: 0; background-position: 210% 0; }
}


/* ── Imagen ──────────────────────────────────────────────────────────────── */

.pgrid-card-img {
  flex-shrink: 0;
  overflow: hidden;
}

.pgrid-card-img .img-container {
  /* Sobreescribe el aspect-ratio de img-container si hace falta */
}

.pgrid-card-img img,
.pgrid-card-img .img-container img {
  transition: transform .4s ease;
}

/* ── Cuerpo ──────────────────────────────────────────────────────────────── */

.pgrid-card-body {
  padding: .85rem 1rem 1rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* ── Categoría ───────────────────────────────────────────────────────────── */

.pgrid-card-cat {
  font-size: var(--fs-category-small, .65rem);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: .3rem;
}

.pgrid-card-cat .tag,
.pgrid-card-cat strong {
  color: var(--bs-primary, #0d6efd);
}


/* ── Fecha ───────────────────────────────────────────────────────────────── */

.pgrid-card-date {
  font-size: var(--fs-meta-medium, .65rem);
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--bs-primary, #0d6efd);
  margin-bottom: .35rem;
}

.pgrid-card-date .pub-date {
  /* la fecha ya viene envuelta en <span class="pub-date"> del helper */
  font-size: inherit;
  color: inherit;
}


/* ── Título ──────────────────────────────────────────────────────────────── */

.pgrid-card-title {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
  flex: 1;
  margin-bottom: .5rem;
}

/* .pgrid-card-title a — color e hover manejados por _links.css (h2 > a) */

/* Tarjeta featured: título más grande */
.pgrid-card--featured .pgrid-card-title {
  font-size: var(--fs-medium, 1.35rem);
  line-height: 1.2;
}


/* ── Ubicación ───────────────────────────────────────────────────────────── */

.pgrid-card-location {
  font-size: var(--fs-meta-small, .6rem);
  color: var(--color-gray, #888);
  margin-bottom: .3rem;
}


/* ── Extracto ────────────────────────────────────────────────────────────── */

.pgrid-card-excerpt {
  font-size: var(--fs-excerpt-small, .75rem);
  color: var(--color-gray-dark, #555);
  line-height: 1.5;
  margin-bottom: .5rem;
  /* Limitar a 3 líneas */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Las dos cards que conviven con la featured en el grid 3col
   no necesitan excerpt — la featured ya ocupa ese espacio vertical */
.pgrid--3col .pgrid-card:nth-child(2) .pgrid-card-excerpt,
.pgrid--3col .pgrid-card:nth-child(3) .pgrid-card-excerpt {
  display: none;
}

/* ── "Leer más →" ────────────────────────────────────────────────────────── */

.pgrid-card-read {
  font-size: .72rem;
  font-weight: 700;
  color: var(--bs-primary, #0d6efd);
  margin-top: auto;
  padding-top: .5rem;
  letter-spacing: .02em;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: gap .2s;
}

.pgrid-card--in:hover .pgrid-card-read {
  gap: 8px;
}



/* ── Sentinel y mensaje de fin ───────────────────────────────────────────── */

.pgrid-sentinel {
  height: 1px;
  margin-top: 1rem;
}

.pgrid-end {
  text-align: center;
  padding: 2rem 0;
  font-size: var(--fs-meta-medium, .65rem);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-gray, #999);
  opacity: .55;
}


/* ── Responsive ──────────────────────────────────────────────────────────── */

/* Tablet: 3col → 2col */


/* ── Featured: escala tipográfica en desktop ───────────────────────────── */

@media (min-width: 768px) {
  .pgrid-card--featured .pgrid-card-title {
    font-size: 1.25rem;
    line-height: 1.25;
  }
  .pgrid-card--featured .pgrid-card-excerpt {
    font-size: .82rem;
    -webkit-line-clamp: 4;
  }
  .pgrid-card--featured .pgrid-card-date {
    font-size: .75rem;
  }
  .pgrid-card--featured .pgrid-card-read {
    font-size: .8rem;
  }
}

@media (max-width: 992px) {
  .pgrid--3col {
    grid-template-columns: repeat(2, 1fr);
  }

  .pgrid--3col .pgrid-card--featured {
    grid-column: span 2;
    grid-row: span 1; /* sin doble fila en tablet */
  }
}

/* Móvil: cualquier grid → 1col */
@media (max-width: 576px) {
  .pgrid--3col,
  .pgrid--2col {
    grid-template-columns: 1fr;
  }

  .pgrid--3col .pgrid-card--featured,
  .pgrid--2col .pgrid-card--featured {
    grid-column: span 1;
    grid-row: span 1;
  }

  .pgrid-card-excerpt {
    display: none; /* más limpio en móvil muy pequeño */
  }
}



/* ===========================================================================
   PGRID — Barra de filtros (pgrid-filters)
   =========================================================================== */

.pgrid-filters {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .75rem 0 1.25rem;
  flex-wrap: wrap;
}

/* ── Search ─────────────────────────────────────────────────────────────── */

.pgrid-filters-search-wrap {
  position: relative;
  flex: 1 1 200px;
  min-width: 160px;
  max-width: 340px;
}

.pgrid-search-icon {
  position: absolute;
  left: .75rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-gray, #999);
  pointer-events: none;
  display: flex;
}

.pgrid-search {
  width: 100%;
  padding: .5rem .75rem .5rem 2.2rem;
  border: 1.5px solid var(--border-color, #e0ddd8);
  border-radius: var(--radius-sm, 3px);
  background: var(--color-white, #fff);
  font-size: .8rem;
  font-family: inherit;
  color: var(--color-black, var(--color-black, #1a1a1a));
  transition: border-color var(--motion-fast, 150ms);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

.pgrid-search:focus {
  border-color: var(--bs-primary, #0d6efd);
}

.pgrid-search::placeholder {
  color: var(--color-gray, #aaa);
}

/* Ocultar el × nativo de search en WebKit */
.pgrid-search::-webkit-search-cancel-button { display: none; }

/* ── Spinner de carga activa ────────────────────────────────────────────── */

.pgrid-spinner {
  position: absolute;
  right: .65rem;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  border: 2px solid var(--border-color, #ddd);
  border-top-color: var(--bs-primary, #0d6efd);
  border-radius: 50%;
  animation: pgrid-spin .7s linear infinite;
}

@keyframes pgrid-spin {
  to { transform: translateY(-50%) rotate(360deg); }
}

/* ── Lado derecho: year + contador ─────────────────────────────────────── */

.pgrid-filters-right {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-shrink: 0;
}

.pgrid-year-select {
  padding: .45rem .9rem .45rem .6rem;
  border: 1.5px solid var(--border-color, #e0ddd8);
  border-radius: var(--radius-sm, 3px);
  background: var(--color-white, #fff);
  font-size: .78rem;
  font-family: inherit;
  color: var(--color-gray-dark, #555);
  cursor: pointer;
  outline: none;
  transition: border-color var(--motion-fast, 150ms);
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .55rem center;
  padding-right: 1.6rem;
}

.pgrid-year-select:focus {
  border-color: var(--bs-primary, #0d6efd);
}

/* ── Contador en modo filtro ────────────────────────────────────────────── */

.pgrid-count {
  font-size: var(--fs-meta-medium, .65rem);
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--color-gray, #888);
  margin: 0;
  white-space: nowrap;
}

.pgrid-count-shown {
  color: var(--color-gray-dark, #444);
}

/* ── Cards filtradas ocultas ────────────────────────────────────────────── */

.pgrid-card--hidden {
  display: none !important;
}

/* ── Responsive filtros ─────────────────────────────────────────────────── */

@media (max-width: 576px) {
  .pgrid-filters {
    flex-wrap: nowrap;       /* todo en una línea */
    align-items: center;
    gap: .4rem;
    padding-bottom: .75rem;
  }
  .pgrid-filters-search-wrap {
    flex: 1 1 0;             /* toma el espacio disponible */
    min-width: 0;
    max-width: none;
  }
  .pgrid-filters-right {
    flex-shrink: 0;
    gap: .4rem;
  }
  .pgrid-year-select {
    max-width: 90px;         /* compacto en móvil */
    font-size: .7rem;
  }
  .pgrid-count {
    font-size: .7rem;
    white-space: nowrap;
  }
}


/* ===========================================================================
   PGRID — Estilos por canal
   =========================================================================== */


/* ── Variables de canal ─────────────────────────────────────────────────── */

:root {
  --pgrid-event-date-bg:    #009A29;  /* verde corporativo */
  --pgrid-event-date-fg:    #ffffff;
  --pgrid-event-date-w:     68px;   /* suficiente para "31" cómodo */
  --pgrid-event-date-w-lg:  104px;  /* featured */
  --pgrid-event-accent:     #009A29;  /* verde = mismo que fecha */
  --pgrid-invest-bg:        color-mix(in srgb, var(--color-white, #fff) 97%, var(--bs-primary, #0d6efd) 3%);
  --pgrid-action-bg:        var(--bs-warning, #ffc107);
  --pgrid-action-fg:        var(--color-black, #1a1a1a);
}


/* ════════════════════════════════════════════════════════════════════════════
   CHANNEL: EVENT (4)
════════════════════════════════════════════════════════════════════════════ */

/* La imagen de evento ocupa todo el ancho sin recorte de aspect-ratio */
.pgrid-card--ch-event .pgrid-card-img--event {
  position: relative;
  overflow: visible; /* el bloque de fecha sobresale */
}

.pgrid-event-img-clip {
  position: relative;
  overflow: hidden;
  width: 100%;
  line-height: 0;
}

.pgrid-event-img-clip img {
  width: 100%;
  height: auto;
  display: block;
  transition: filter .4s ease;
}

.pgrid-card--ch-event:hover .pgrid-event-img-clip img {
  filter: brightness(.91);
}

/* Imagen desaturada para eventos pasados */
.pgrid-card--past .pgrid-event-img-clip img {
  filter: grayscale(85%) brightness(.88);
}
.pgrid-card--past:hover .pgrid-event-img-clip img {
  filter: grayscale(60%) brightness(.92);
}

/* ── Bloque de fecha flotante ───────────────────────────────────────────── */

.pgrid-event-pub {
  position: absolute;
  bottom: 0;
  left: 0;
  transform: translateY(40%);
  width: var(--pgrid-event-date-w);
  min-width: var(--pgrid-event-date-w);  /* ancho fijo: 1 o 2 dígitos = mismo bloque */
  z-index: 3;
  display: flex;
  flex-direction: column;
  background: var(--pgrid-event-date-bg);
  box-shadow: 2px 2px 0 rgba(0,0,0,.18);
}

/* Featured: bloque más ancho */
.pgrid-card--featured .pgrid-event-pub {
  width: var(--pgrid-event-date-w-lg);
}

.pgrid-event-pub--past {
  background: var(--color-gray, #888);
}

.pgrid-event-dm {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: transparent;
  color: var(--pgrid-event-date-fg);
  padding: 10px 0 8px;
}

.pgrid-card--featured .pgrid-event-dm { padding: 14px 0 12px; }

.pgrid-event-dm-from {
  border-bottom: none;
}

/* Cuando hay rango, separar las dos fechas */
.pgrid-event-pub--range .pgrid-event-dm-from {
  border-bottom: 1.5px solid rgba(255,255,255,.1);
  padding-bottom: 8px;
}

.pgrid-event-dm-to {
  position: relative;
  padding-top: 10px;
}

/* Flecha › entre fechas */
.pgrid-event-pub--range .pgrid-event-dm-to::before {
  content: "›";
  position: absolute;
  top: 0; left: 50%;
  transform: translate(-50%, -50%);
  width: 14px; height: 14px;
  background: var(--color-white, #fff);
  color: var(--color-gray, #888);
  font-size: 10px; font-weight: 700;
  text-align: center; line-height: 14px;
  border-radius: 50%;
  z-index: 1;
}

.pgrid-event-day-name {
  font-size: .6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: rgba(255,255,255,.85);
  line-height: 1;
  margin-bottom: 3px;
}

.pgrid-event-day-num {
  font-size: 1.75rem;
  line-height: 1;
  font-weight: 700;
  color: var(--pgrid-event-date-fg);
  font-variant-numeric: tabular-nums;  /* 1 y 31 ocupan el mismo ancho */
}

.pgrid-card--featured .pgrid-event-day-num { font-size: 2.1rem; }

.pgrid-event-month {
  font-size: .6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: rgba(255,255,255,.88);
  line-height: 1;
  margin-top: 3px;
}

/* ── Cuerpo del evento ──────────────────────────────────────────────────── */

.pgrid-card-body--event {
  padding-left: calc(var(--pgrid-event-date-w) + 12px);
  padding-top: 18px;
  display: flex;
  flex-direction: column;
}

.pgrid-card--featured .pgrid-card-body--event {
  padding-left: calc(var(--pgrid-event-date-w-lg) + 16px);
}

/* ── Meta franja (tiempo + lugar + días) ────────────────────────────────── */

.pgrid-event-meta {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .35rem 0 0;
  /* sin border-top — el where-when ya tiene su separador */
  margin-top: auto;
  flex-wrap: nowrap;
}

.pgrid-event-meta-left {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.pgrid-event-time,
.pgrid-event-place {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-family-body);
  font-size: var(--font-xs, .7rem);
  font-weight: 600;
  color: var(--color-gray-dark, #444);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pgrid-event-time svg,
.pgrid-event-place svg {
  flex-shrink: 0;
  opacity: .95;
}

.pgrid-event-days-until {
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--pgrid-event-accent);
  white-space: nowrap;
  flex-shrink: 0;
}

.pgrid-event-days-until--past {
  color: var(--color-gray, #999);
}

/* ── Badge "Finalizado" sobre la imagen ─────────────────────────────────── */

.pgrid-event-finished-badge {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: rgba(180,0,0,.88);
  color: #fff;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: center;
  height: 28px;
  line-height: 28px;
  padding: 0 .5rem;
  z-index: 2;
}

/* ── Categoría solo en hover ────────────────────────────────────────────── */

.pgrid-event-cat-hover {
  position: absolute;
  top: 8px; right: 8px;
  z-index: var(--z-raised, 4);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .22s ease, transform .22s ease;
  pointer-events: none;
}

.pgrid-event-cat-hover .tag,
.pgrid-event-cat-hover strong {
  background: var(--color-white, #fff);
  color: var(--bs-primary, #0d6efd);
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: var(--radius-full, 9999px);
  display: inline-block;
}

.pgrid-card--ch-event:hover .pgrid-event-cat-hover {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}


/* ════════════════════════════════════════════════════════════════════════════
   CHANNEL: BLOG (5)
════════════════════════════════════════════════════════════════════════════ */

/* Avatar del autor */
.pgrid-card-author {
  margin: .35rem 0 .4rem;
}

.pgrid-card-author-link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  text-decoration: none !important;
  border-bottom: none !important;
}

.pgrid-card-author-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 1.5px solid var(--border-color, #e0ddd8);
}

.pgrid-card-author-name {
  font-size: .72rem;
  font-weight: 600;
  color: var(--color-gray-dark, #555);
  transition: color .2s;
}

.pgrid-card-author-link:hover .pgrid-card-author-name {
  color: var(--bs-primary, #0d6efd);
}


/* ════════════════════════════════════════════════════════════════════════════
   CHANNEL: INVESTIGATION (6)
════════════════════════════════════════════════════════════════════════════ */

.pgrid-card--ch-investigation {
  background: var(--pgrid-invest-bg);
}

/* Imagen sin recorte de aspect-ratio (ocupa más espacio) */
.pgrid-img-investigation {
  aspect-ratio: 4 / 3;  /* más alto que landscape = más imagen visible */
}
/* La img hereda position:absolute + object-fit de .img-container img */

/* Hover de investigación — movido al bloque de fixes (con translate correcto) */

/* Ícono de play centrado en la imagen */
.pgrid-card-play-icon {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 44px; height: 44px;
  transition: transform .2s ease;
  pointer-events: none;
}

.pgrid-card--ch-investigation:hover .pgrid-card-play-icon {
  transform: translate(-50%, -50%) scale(1.12);
}

/* Badge "Investigación" */
.pgrid-card-cat--investigation .pgrid-invest-badge {
  display: inline-block;
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--bs-primary, #0d6efd);
  border: 1.5px solid currentColor;
  border-radius: var(--radius-sm, 3px);
  padding: 2px 7px;
}



/* ── Investigación: header fecha+badge en una línea ─────────────────────── */

.pgrid-card--ch-investigation .pgrid-card-body {
  display: flex;
  flex-direction: column;
}

.pgrid-card--ch-investigation .pgrid-card-cat-date-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .3rem;
}

.pgrid-card--ch-investigation .pgrid-card-date {
  margin: 0;
  text-align: right;
}

.pgrid-card--ch-investigation .pgrid-card-title {
  font-size: var(--fs-small, 1.05rem);
}

.pgrid-card--featured.pgrid-card--ch-investigation .pgrid-card-title {
  font-size: var(--fs-medium, 1.25rem);
}

/* ════════════════════════════════════════════════════════════════════════════
   BADGE DE ACCIÓN (petition / letter / registration)
════════════════════════════════════════════════════════════════════════════ */

/* ── Badge CTA: icono cuadrado → expande con texto al hover ─────────────── */

.pgrid-card-action-count {
  position: absolute;
  bottom: 0; right: 0;
  background-color: var(--pgrid-action-bg);
  color: #fff;
  height: var(--pgrid-badge-size, 44px);
  width: var(--pgrid-badge-size, 44px);  /* cuadrado en reposo */
  border-radius: var(--radius-md, 4px) 0 0 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
  z-index: var(--z-overlay, 5);
  overflow: hidden;
  cursor: pointer;
  transition: width var(--pgrid-badge-expand-duration, .38s) var(--pgrid-badge-expand-ease),
              padding var(--pgrid-badge-expand-duration, .38s) var(--pgrid-badge-expand-ease),
              filter .25s ease;
  white-space: nowrap;
}

/* Icono FA */
.pgrid-action-icon {
  flex-shrink: 0;
  font-size: .95rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--pgrid-badge-size, 44px);
  min-width: var(--pgrid-badge-size, 44px);
}

/* Texto: oculto en reposo, aparece al expandir */
.pgrid-action-cta,
.pgrid-action-label-wrap {
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: 0;
  max-width: 0;
  overflow: hidden;
  transition: opacity .25s ease .1s,
              max-width .38s var(--ease-decelerate, cubic-bezier(0,0,.2,1)) .05s;
  padding-right: 0;
}

.pgrid-action-num {
  font-size: .9rem;
  font-weight: 800;
  display: block;
  opacity: 0;
  max-width: 0;
  overflow: hidden;
  transition: opacity .25s ease .1s,
              max-width .38s var(--ease-decelerate, cubic-bezier(0,0,.2,1)) .05s;
}

/* Estado expandido: hover en desktop */
@media (hover: hover) and (pointer: fine) {
  .pgrid-card:hover .pgrid-card-action-count {
    width: auto;
    min-width: 100px;
    padding: 0 .9rem 0 0;
  }
  .pgrid-card:hover .pgrid-action-cta,
  .pgrid-card:hover .pgrid-action-label-wrap,
  .pgrid-card:hover .pgrid-action-num {
    opacity: 1;
    max-width: 140px;
    padding-right: .1rem;
  }
  /* Oscurecer solo el fondo (::after overlay), el texto queda igual */
  .pgrid-card:hover .pgrid-card-action-count::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.15);
    pointer-events: none;
    z-index: 0;
  }
  /* El contenido del badge sobre el overlay */
  .pgrid-card:hover .pgrid-card-action-count > * {
    position: relative;
    z-index: 1;
  }
}

/* Móvil: siempre expandido, icono grande, sin animación de hover */
@media (max-width: 767px) {
  .pgrid-card-action-count {
    width: auto !important;
    height: auto !important;
    padding: .8rem 1rem .8rem .8rem !important;
    min-width: 100px;
    flex-direction: row;
    align-items: center;
    gap: .45rem;
    transition: none !important;  /* sin animación en touch */
  }
  .pgrid-action-icon {
    width: auto;
    min-width: auto;
    font-size: 1.25rem;  /* icono más grande en móvil */
  }
  .pgrid-action-cta,
  .pgrid-action-label-wrap,
  .pgrid-action-num {
    opacity: 1 !important;
    max-width: 180px !important;
    padding-right: 0;
    transition: none !important;
    font-size: .72rem;
  }
  .pgrid-action-num {
    font-size: .95rem;
  }
  /* En touch, nunca aplicar el estado hover de desktop */
  .pgrid-card:active .pgrid-card-action-count {
    filter: brightness(.88);
  }
}

.pgrid-action-num {
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -.01em;
  display: block;
}

.pgrid-action-label {
  font-size: .55rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .75;
}

.pgrid-action-cta {
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* Color por tipo */
.pgrid-card-action-count--petition     { background: #e63946; color: #fff; }
.pgrid-card-action-count--letter       { background: #457b9d; color: #fff; }
.pgrid-card-action-count--registration { background: var(--pgrid-cta-registration-bg, #009A29); color: #fff; }
.pgrid-card--ch-event .pgrid-card-action-count { background: var(--pgrid-cta-registration-bg, #009A29); color: #fff; }
.pgrid-card-action-count--download     { background: #6a4c93; color: #fff; }

/* Espacio en el cuerpo de la card para no solapar el badge CTA (position:absolute) */
.pgrid-card--type-petition .pgrid-card-body,
.pgrid-card--type-letter .pgrid-card-body,
.pgrid-card--type-registration .pgrid-card-body,
.pgrid-card--type-download .pgrid-card-body {
  padding-bottom: 3rem;
}

/* En eventos: el meta y el badge son ambos absolute — el body necesita altura mínima */
.pgrid-card--ch-event .pgrid-card-body--event {
  padding-bottom: 44px;  /* espacio para el meta+badge en la base */
}


/* ════════════════════════════════════════════════════════════════════════════
   RESPONSIVE — canales
════════════════════════════════════════════════════════════════════════════ */


/* Las dos cards de evento junto a la featured: hora y lugar en la misma línea */
.pgrid--3col .pgrid-card--ch-event:nth-child(2) .pgrid-event-where-when,
.pgrid--3col .pgrid-card--ch-event:nth-child(3) .pgrid-event-where-when {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 .8rem;
}

/* Featured event: título grande */
.pgrid-card--featured.pgrid-card--ch-event .pgrid-card-title {
  font-size: var(--fs-medium, 1.35rem);
  line-height: 1.2;
}

@media (min-width: 768px) {
  .pgrid-card--featured.pgrid-card--ch-event .pgrid-card-title {
    font-size: var(--fs-large, 1.6rem);
  }
}

@media (max-width: 992px) {
  :root {
    --pgrid-event-date-w:    56px;
    --pgrid-event-date-w-lg: 84px;
  }
  .pgrid-event-day-num { font-size: 1.5rem; }
  .pgrid-card--featured .pgrid-event-day-num { font-size: 1.8rem; }
}

@media (max-width: 576px) {
  :root {
    --pgrid-event-date-w:    72px;   /* más grande en móvil — golpe de vista */
    --pgrid-event-date-w-lg: 72px;
  }
  .pgrid-card-body--event,
  .pgrid-card--featured .pgrid-card-body--event {
    padding-left: calc(var(--pgrid-event-date-w) + 12px);
    padding-top: 44px;
  }
  .pgrid-event-day-num { font-size: 1.75rem; }
  .pgrid-event-day-name,
  .pgrid-event-month { font-size: .65rem; }
}


/* ===========================================================================
   PGRID — Fixes de visualización (ronda 4)
   =========================================================================== */


/* ── 1. Evento: hora/lugar — mismo tamaño y color que .pub-location ─────── */

.pgrid-event-where-when {
  margin: .25rem 0 .35rem; /* pegado al título */
  padding-top: .4rem;
  border-top: 1px solid var(--color-border-subtle, rgba(0,0,0,.08));
  display: flex;
  flex-direction: column;
  gap: 3px;
}

/* ── 2. Evento: espacio entre excerpt y badge CTA ───────────────────────── */

.pgrid-card-body--event .pgrid-card-excerpt--event {
  margin-bottom: .65rem;
}

.pgrid-card-body--event .pgrid-card-excerpt--event {
  flex-shrink: 0;
}
/* "Faltan N días": position absolute alineado con el badge CTA.
   Ambos son position:absolute en la card, referenciados al mismo contenedor. */
.pgrid-card--ch-event .pgrid-card-body--event {
  position: static;  /* el absolute se referencia a .pgrid-card */
}

.pgrid-card-body--event .pgrid-event-meta {
  position: absolute;
  bottom: 0;
  /* Aligned con el padding-left del body del evento */
  left: calc(var(--pgrid-event-date-w, 68px) + 12px);
  right: 44px;  /* deja espacio para el badge CTA */
  height: 44px;
  display: flex;
  align-items: center;
  padding: 0;
  margin: 0;
}

/* Sin badge CTA: ocupa hasta el borde derecho */
.pgrid-card:not([class*="pgrid-card--type-"]) .pgrid-card-body--event .pgrid-event-meta {
  right: 0;
}

/* Evento pasado: sin meta en el body (el badge rojo lo indica) */
.pgrid-card--past .pgrid-card-body--event .pgrid-event-meta { display: none; }
.pgrid-card--past .pgrid-card-action-count { display: none; }


/* ── 3. Evento featured — textos más grandes en desktop ─────────────────── */

@media (min-width: 768px) {
  .pgrid-card--featured.pgrid-card--ch-event .pgrid-card-title {
    font-size: 1.35rem;
    line-height: 1.2;
  }

  .pgrid-card--featured.pgrid-card--ch-event .pgrid-event-time,
  .pgrid-card--featured.pgrid-card--ch-event .pgrid-event-place {
    font-size: .8rem !important;
  }

  .pgrid-card--featured.pgrid-card--ch-event .pgrid-card-excerpt--event {
    font-size: .82rem;
    -webkit-line-clamp: 4;
  }

  .pgrid-card--featured.pgrid-card--ch-event .pgrid-card-action-count {
    padding: .85rem 1.1rem;
    font-size: 1.05rem;
    min-width: 90px;
  }

  .pgrid-card--featured.pgrid-card--ch-event .pgrid-action-cta {
    font-size: .75rem;
  }
}


/* ── 4. Evento móvil — más espacio arriba para que la fecha no tape título */

@media (max-width: 576px) {
  .pgrid-card-body--event {
    padding-top: 36px !important;  /* más que los 28px base */
  }
}


/* ── 5. Investigación: hover sin escapes ────────────────────────────────── */
/* El transform debe incluir el translate base de .img-container img */

.pgrid-card--ch-investigation .pgrid-img-investigation img {
  /* Asegurar que el img tenga la posición estándar de img-container */
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(1);
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .45s ease;
}

@media (hover: hover) and (pointer: fine) {
  .pgrid-card--ch-investigation:hover .pgrid-img-investigation img {
    transform: translate(-50%, -50%) scale(1.04) !important;
  }
}

/* En touch: nunca escalar */
@media (hover: none) {
  .pgrid-card--ch-investigation:hover .pgrid-img-investigation img {
    transform: translate(-50%, -50%) scale(1) !important;
  }
}


/* ── 6. Buscador móvil: contener el icono correctamente ─────────────────── */

@media (max-width: 576px) {
  .pgrid-filters {
    gap: .5rem;
  }

  .pgrid-filters-search-wrap {
    /* Garantizar que el icono absoluto quede dentro */
    position: relative !important;
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .pgrid-search-icon {
    /* Reforzar posición absoluta para que no se desborde */
    position: absolute !important;
    left: .7rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
  }

  .pgrid-search {
    width: 100%;
    display: block;
  }
}



/* ── Buscador móvil: icono dentro del campo ────────────────────────────── */
@media (max-width: 576px) {
  .pgrid-filters-search-wrap {
    position: relative !important;
    display: block;
    width: 100%;
    max-width: 100%;
  }
  .pgrid-search-icon {
    position: absolute !important;
    left: .7rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    z-index: 2;
  }
  .pgrid-search {
    padding-left: 2.2rem;
    width: 100%;
    box-sizing: border-box;
  }
}

/* ===========================================================================
   PGRID — Chip de categoría en hover (todos los canales excepto event)
   =========================================================================== */

/* El contenedor de imagen necesita position:relative */
.pgrid-card-img--has-cat-hover {
  position: relative;
}

.pgrid-cat-hover {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: var(--z-raised, 4);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .22s ease, transform .22s ease;
  pointer-events: none;
}

.pgrid-cat-hover .tag,
.pgrid-cat-hover strong {
  background: rgba(255,255,255,.92);
  color: var(--bs-primary, #0d6efd);
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: var(--radius-full, 9999px);
  display: inline-block;
}

/* Variante investigación */
.pgrid-cat-hover--invest .pgrid-invest-badge {
  background: rgba(255,255,255,.92);
  border: 1.5px solid var(--bs-primary, #0d6efd);
  color: var(--bs-primary, #0d6efd);
  border-radius: var(--radius-sm, 3px);
  padding: 2px 7px;
}

@media (hover: hover) and (pointer: fine) {
  .pgrid-card:hover .pgrid-cat-hover {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
}

/* En touch nunca mostrar — se quedaría pegado */
@media (hover: none) {
  .pgrid-cat-hover { display: none !important; }
}

/* También el evento usa su propia clase */
@media (hover: hover) and (pointer: fine) {
  .pgrid-card--ch-event:hover .pgrid-event-cat-hover {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
}

@media (hover: none) {
  .pgrid-event-cat-hover { display: none !important; }
}


/* ===========================================================================
   PGRID — Featured: tipografía más grande en desktop
   =========================================================================== */

@media (min-width: 768px) {
  .pgrid-card--featured .pgrid-card-title {
    font-size: var(--fs-large, 1.6rem);
    line-height: 1.15;
  }

  .pgrid-card--featured .pgrid-card-excerpt {
    font-size: var(--fs-excerpt-medium, .9rem);
    -webkit-line-clamp: 5;
  }

  .pgrid-card--featured .pgrid-card-date {
    font-size: var(--fs-meta-large, .78rem);
  }

  .pgrid-card--featured .pgrid-card-cat .tag,
  .pgrid-card--featured .pgrid-card-cat strong {
    font-size: var(--fs-category-medium, .78rem);
  }

  /* Event featured: hora/lugar también más grande */
  .pgrid-card--featured.pgrid-card--ch-event .pgrid-event-time,
  .pgrid-card--featured.pgrid-card--ch-event .pgrid-event-place {
    font-size: var(--fs-meta-medium, .78rem);
  }
}


/* ===========================================================================
   PGRID — Móvil: padding extra para que la fecha no tape el título
   =========================================================================== */

@media (max-width: 576px) {
  .pgrid-card-body--event {
    padding-top: 36px;
  }
}



/* ── Filtros sticky ─────────────────────────────────────────────────────── */

/* Sticky base: oculto */
.pgrid-filters-sticky-wrap {
  display: none;
  pointer-events: none;
}

/* Sticky fixed: ocupa 100vw, contenido alineado al container */
.pgrid-filters-sticky-fixed {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-sticky, 1020);
  background: var(--color-bg-body, var(--color-white, #fff));
  box-shadow: var(--shadow-sm, 0 2px 8px rgba(0,0,0,.08));
  /* Oculto hasta que el JS añade pgrid-sticky--visible */
  transform: translateY(-120%);
  transition: transform .28s cubic-bezier(.4,0,.2,1);
  pointer-events: none;
}

.pgrid-filters-sticky-fixed .pgrid-filters {
  /* Limitar el ancho del contenido al mismo que el container de Bootstrap */
  max-width: var(--bs-container-max-width, 1320px);
  margin-left: auto;
  margin-right: auto;
  padding-left: calc(var(--bs-gutter-x, 1.5rem) / 2);
  padding-right: calc(var(--bs-gutter-x, 1.5rem) / 2);
}

.pgrid-filters-sticky-wrap.pgrid-sticky--visible {
  transform: translateY(0);
  pointer-events: auto;
}


/* ===========================================================================
   DARK MODE — pgrid y posts
   Detecta prefers-color-scheme:dark Y el toggle manual [data-theme="dark"].
   Para el sitio completo se gestionará desde _variables.css.
   =========================================================================== */

@media (prefers-color-scheme: dark) {
  :root {
    /* ── Fondos de cards ──────────────────────────────────────────────── */
    --pgrid-card-bg:          #1e2025;
    --pgrid-card-bg-hover:    #252830;
    --pgrid-invest-bg:        #1a1f2b;

    /* ── Textos ───────────────────────────────────────────────────────── */
    --pgrid-text-primary:     #e8e6e1;
    --pgrid-text-secondary:   #9a9892;
    --pgrid-text-muted:       #6e6c68;
    --pgrid-text-link:        #5bb8f5;

    /* ── Bordes y separadores ─────────────────────────────────────────── */
    --pgrid-border:           rgba(255,255,255,.08);

    /* ── Evento: fecha verde, ligeramente más oscura ──────────────────── */
    --pgrid-event-date-bg:    #007a20;
    --pgrid-event-accent:     #4dc45a;

    /* ── Filtros sticky ───────────────────────────────────────────────── */
    --pgrid-filters-bg:       #16181c;
  }
}

/* El toggle manual también activa dark (JS añade data-theme="dark" al html) */
[data-theme="dark"] {
  --pgrid-card-bg:          #1e2025;
  --pgrid-card-bg-hover:    #252830;
  --pgrid-invest-bg:        #1a1f2b;
  --pgrid-text-primary:     #e8e6e1;
  --pgrid-text-secondary:   #9a9892;
  --pgrid-text-muted:       #6e6c68;
  --pgrid-text-link:        #5bb8f5;
  --pgrid-border:           rgba(255,255,255,.08);
  --pgrid-event-date-bg:    #007a20;
  --pgrid-event-accent:     #4dc45a;
  --pgrid-filters-bg:       #16181c;
}

/* ── Aplicar variables dark a los componentes pgrid ────────────────────── */

@media (prefers-color-scheme: dark), (color: transparent) {
  /* El segundo media query nunca se cumple — el bloque es un hack para
     poder usar :is() sin @layer. Usamos una clase helper en su lugar. */
}

.pgrid-card {
  background: var(--pgrid-card-bg, var(--color-white, #fff));
  border: 1px solid var(--pgrid-border, transparent);
}

.pgrid-card--ch-investigation {
  background: var(--pgrid-invest-bg, #f8f7ff);
}

.pgrid-card-title a {
  color: var(--pgrid-text-primary, var(--color-text-primary, inherit));
}

.pgrid-card-date .pub-date,
.pgrid-card-location .pub-location,
.pgrid-card-date,
.pgrid-card-excerpt {
  color: var(--pgrid-text-secondary, var(--color-gray-dark, #6c757d));
}

.pgrid-card-read {
  color: var(--pgrid-text-link, var(--color-text-link, inherit));
}

/* Filtros */
.pgrid-filters {
  background: var(--pgrid-filters-bg, transparent);
}

.pgrid-search {
  background: var(--pgrid-card-bg, #fff);
  color: var(--pgrid-text-primary, inherit);
  border-color: var(--pgrid-border, var(--border-color, #e0ddd8));
}

/* Dark mode: aplicar cuando sistema o toggle están activos */
@media (prefers-color-scheme: dark) {
  .pgrid-card {
    background: var(--pgrid-card-bg);
    box-shadow: 0 1px 6px rgba(0,0,0,.4);
  }
  .pgrid-card--in:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,.5);
  }
  .pgrid-card-title a {
    color: var(--pgrid-text-primary) !important;
  }
  .pgrid-card-title a:hover {
    color: var(--pgrid-text-link) !important;
  }
  .pgrid-card-date .pub-date,
  .pgrid-card-location,
  .pgrid-card-excerpt {
    color: var(--pgrid-text-secondary);
  }
  .pgrid-card-read {
    color: var(--pgrid-text-link);
  }
  .pgrid-search {
    background: #252830;
    color: var(--pgrid-text-primary);
    border-color: var(--pgrid-border);
  }
  .pgrid-search::placeholder {
    color: var(--pgrid-text-muted);
  }
  .pgrid-filters-sticky-wrap {
    background: var(--pgrid-filters-bg);
  }
  /* Cat hover sobre imagen: fondo oscuro en dark */
  .pgrid-cat-hover .tag,
  .pgrid-cat-hover strong {
    background: rgba(30,32,37,.92);
    color: var(--pgrid-text-link);
  }
  /* Shimmer de entrada en dark */
  .pgrid-card--shimmer::after {
    background: linear-gradient(
      90deg,
      transparent 0%,
      rgba(255,255,255,.04) 50%,
      transparent 100%
    );
  }
}

/* Toggle manual hereda el mismo dark */
[data-theme="dark"] .pgrid-card { background: var(--pgrid-card-bg); box-shadow: 0 1px 6px rgba(0,0,0,.4); }
[data-theme="dark"] .pgrid-card--in:hover { box-shadow: 0 8px 24px rgba(0,0,0,.5); }
[data-theme="dark"] .pgrid-card-title a { color: var(--pgrid-text-primary) !important; }
[data-theme="dark"] .pgrid-card-title a:hover { color: var(--pgrid-text-link) !important; }
[data-theme="dark"] .pgrid-card-date .pub-date,
[data-theme="dark"] .pgrid-card-location,
[data-theme="dark"] .pgrid-card-excerpt { color: var(--pgrid-text-secondary); }
[data-theme="dark"] .pgrid-card-read { color: var(--pgrid-text-link); }
[data-theme="dark"] .pgrid-search { background: #252830; color: var(--pgrid-text-primary); border-color: var(--pgrid-border); }
[data-theme="dark"] .pgrid-filters-sticky-wrap { background: var(--pgrid-filters-bg); }


/* ===========================================================================
   PGRID — Botón "Cargar más" (fallback cuando el auto-load falla)
   =========================================================================== */

.pgrid-load-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: 100%;
  margin: 1.5rem 0;
  padding: .85rem 2rem;
  background: transparent;
  border: 2px solid var(--color-primary, #009A29);
  border-radius: var(--radius-md, 4px);
  color: var(--color-primary, #009A29);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}

.pgrid-load-more:hover {
  background: var(--color-primary, #009A29);
  color: var(--color-white, #fff);
}

.pgrid-load-more-icon {
  font-size: 1.1rem;
  line-height: 1;
  display: inline-block;
  transition: transform .4s ease;
}

.pgrid-load-more--loading .pgrid-load-more-icon {
  animation: pgrid-spin .8s linear infinite;
}

@keyframes pgrid-spin {
  to { transform: rotate(360deg); }
}

.pgrid-load-more-count {
  font-weight: 400;
  opacity: .7;
  font-size: .75rem;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  .pgrid-load-more {
    border-color: var(--pgrid-event-accent, #4dc45a);
    color: var(--pgrid-event-accent, #4dc45a);
  }
  .pgrid-load-more:hover {
    background: var(--pgrid-event-accent, #4dc45a);
    color: #1e2025;
  }
}
[data-theme="dark"] .pgrid-load-more {
  border-color: var(--pgrid-event-accent, #4dc45a);
  color: var(--pgrid-event-accent, #4dc45a);
}
[data-theme="dark"] .pgrid-load-more:hover {
  background: var(--pgrid-event-accent, #4dc45a);
  color: #1e2025;
}