:root {
  --pub-purple: #52398C;
  --pub-light-purple: #f3f0ff;
  --pub-border-purple: #d1c8eb;
  --pub-text-dark: #333;
  --pub-text-grey: #666;
  --pub-bg: #f5f5f5;
  --pub-border-light: #f0f0f0;
}

.pubs-wrap {
  width: 100% !important;
  max-width: 1200px !important;
  margin: 0 !important;
  padding: 40px 0 !important;
  background-color: transparent !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  text-align: left !important;
}

.pubs-head {
  margin-bottom: 30px !important;
  text-align: left !important;
  width: 100% !important;
}

.pubs-header-top {
  display: flex !important;
  justify-content: flex-start !important;
  align-items: center !important;
  margin-bottom: 8px !important;
}

/* Ensure the title-competencias doesn't introduce extra spacing that looks centered */
.title-competencias {
  margin: 0 !important;
  padding: 0 !important;
  display: inline-block !important;
  float: none !important;
}

.pubs-link {
  margin-left: 20px !important;
  /* Push "Ver todas" to the right if needed, but the user image shows it near the top right */
  color: #7d6caf !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  text-decoration: none !important;
}

.pubs-grid:before {
  display: none;
}

.pubs-header-bottom p {
  margin: 0 !important;
  font-size: 15px !important;
  color: #333 !important;
  text-align: left !important;
}

.pubs-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
  width: 100% !important;
  margin: 0 !important;
  justify-content: start !important;
  justify-items: start !important;
}


.pub-card:hover {
  transform: translateY(-4px) !important;
}

.pub-card a {
  display: block !important;
  color: inherit !important;
  text-decoration: none !important;
}

.pub-img {
  height: 180px !important;
  background-size: cover !important;
  background-position: center !important;
}

.pub-body {
  padding: 24px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  text-align: left !important;
}

.pub-title {
  display: block !important;
  width: 100% !important;
  margin: 0 0 24px 0 !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  font-size: 17px !important;
  line-height: 1.4 !important;
  color: var(--pub-purple) !important;
  font-weight: 500 !important;
  height: 2.8em !important;
  text-align: left !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

.pub-meta {
  display: flex !important;
  width: 100% !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  padding-top: 18px !important;
  margin: 0 !important;
  margin-top: 0 !important;
  border-top: 1px solid var(--pub-border-light) !important;
}

.pub-meta-left {
  display: flex !important;
  flex: 1 !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  margin: 0 !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  text-align: left !important;
}
a.pubs-link {
    right: 0;
    position: absolute;
    font-size: 20px !important;
}
.title-competencias.wpb_text_column.wpb_content_element {
    margin-bottom: 11px !important;
}
.pub-chips {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  justify-content: flex-start !important;
  margin: 0 !important;
  padding: 0 !important;
  /* Explicitly reset padding */
  margin-left: -8px !important;
  margin-right: auto !important;
  width: 100% !important;
}

/* Ensure no child elements introduce a left margin on the first row */
.pub-chips>.pub-chip:first-child {
  margin-left: 0 !important;
}

.pub-date {
  display: block !important;
  width: 100% !important;
  font-size: 13px !important;
  color: #888 !important;
  font-weight: 600 !important;
  margin: 0 0 4px 0 !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  text-align: left !important;
}

/* Decorative ::before for the first element in the grid */
.pubs-grid>article:first-child::before {
  content: "" !important;
  display: block !important;
  width: 40px !important;
  height: 4px !important;
  background-color: var(--pub-purple) !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  z-index: 10 !important;
  border-radius: 0 0 4px 0 !important;
}

.pub-card {
  position: relative !important;
  /* Ensure ::before is positioned correctly */
  background: #ffffff !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06) !important;
  transition: transform 0.2s ease !important;
  width: 100% !important;
  margin: 0 !important;
}

.pub-chip {
  font-size: 11px !important;
  color: var(--pub-purple) !important;
  background-color: var(--pub-light-purple) !important;
  border: 1px solid var(--pub-border-purple) !important;
  padding: 3px 14px !important;
  border-radius: 100px !important;
  /* Pill shape */
  text-transform: capitalize !important;
  display: inline-block !important;
  white-space: nowrap !important;
}

.pub-avatar {
  width: 42px !important;
  height: 42px !important;
  border-radius: 50% !important;
  border: 2px solid #a6a6a6 !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #fff !important;
  flex-shrink: 0 !important;
}

.pub-avatar img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.wpb_wrapper::after {
  content: "" !important;
  display: table !important;
  clear: both !important;
}

@media (max-width: 980px) {
  .pubs-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 600px) {
  .pubs-grid {
    grid-template-columns: 1fr !important;
  }

  .pubs-header-top {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .pubs-link {
    margin-left: 0 !important;
  }
}