/* VARIABLES POR DEFECTO */
:root{
  --pss-primary:#3534FF;
  --pss-title:#262626;
  --pss-text:#666666;
}

/* ==========================================
   WRAPPER
========================================== */

.blog-card-wrapper{
  display:flex;
  flex-direction:column;
  height:100%;
}

.blog-card-wrapper:hover .blog-card-content{
  transform:translateY(-10px);
  box-shadow:0 25px 50px rgba(0,0,0,0.08);
}


.blog-card-wrapper:hover .blog-card-title a{
  color:var(--pss-primary);
}

/* ==========================================
   IMAGEN
========================================== */

.pss-wrapper .blog-card-image{
  position:relative;
  overflow:hidden;
  height:var(--pss-image-height, 350px);
}

.blog-card-image img{
  width:100%;
  display:block;
  transition:transform .6s ease;
  object-fit:cover;
  height:100%;
}

.blog-card-wrapper:hover .blog-card-image img{
  transform:scale(1.1);
}

/* ==========================================
   FECHA
========================================== */

.blog-card-date{
  position:absolute;
  top:-40px;
  left:30px;
  background:var(--pss-primary);
  color:#ffffff;
  padding:8px 18px;
  font-size:14px;
  font-weight:500;
}

/* ==========================================
   CONTENIDO
========================================== */

.blog-card-content{
  padding:30px;
  display:flex;
  flex-direction:column;
  flex:1;
  background:#ffffff;
  z-index:9;
  border:1px solid #f5f5ff;
  position:relative;
  transition:transform .6s ease;
  border-radius: var(--pss-radius);
}

/* ==========================================
   META
========================================== */

.blog-card-meta{
  font-size:13px;
  letter-spacing:1px;
  text-transform:uppercase;
  margin-bottom:20px;
  color:var(--pss-text);
}

.blog-card-meta a{
  color:var(--pss-primary);
  text-decoration:none;
}

/* ==========================================
   TITULO
========================================== */

.blog-card-title{
  font-size:22px;
  font-weight:600;
  line-height:1.3;
  text-transform:uppercase;
}

.blog-card-title a{
  color:var(--pss-title);
  text-decoration:none;
  text-transform:capitalize;
  font-family:'Aeonik-Regular', Helvetica, Arial, Lucida, sans-serif;
  font-weight:400;
  transition:color .3s ease;
}

/* ==========================================
   EXTRACTO
========================================== */

.blog-card-excerpt{
  font-size:15px;
  line-height:1.8;
  color:var(--pss-text);
  margin-bottom:auto;
}

/* ==========================================
   LEER MAS
========================================== */

.blog-card-readmore{
  margin-top:25px;
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:1px;
  color:var(--pss-title);
  position:relative;
  text-decoration:none;
}

.blog-card-readmore:after{
  content:"";
  display:block;
  width:20px;
  height:2px;
  background:var(--pss-primary);
  margin-top:6px;
  transition:width .3s ease;
}

.blog-card-readmore:hover:after{
  width:40px;
}

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

.blog-card-grid{
  display:grid;
  gap: var(--pss-gap);
}

/* Tablet */
@media(max-width:1024px){

}

/* Mobile */
@media(max-width:768px){

}

.pss-filter{
display:flex;
margin-bottom:40px;
flex-wrap: wrap;
justify-content: center;
}

.pss-filter-item{
	border: none;
    background: none;
    cursor: pointer;
    padding: 8px 18px;
    font-weight: 400;
    font-size: 24px;
    text-transform: capitalize;
	opacity: 0.6;
	transition: all 300ms ease;
}

.pss-filter-item.active{
background:var(--pss-primary,#3534FF);
color:#fff;
opacity:1;
}
.pss-filter-item:hover{
opacity:1;
}

.pss-card h3,
.pss-card p{
display:-webkit-box;
-webkit-box-orient:vertical;
overflow:hidden;
}

.pss-pagination{
margin-top:40px;
display:flex;
gap:10px;
justify-content: center;
    flex-wrap: wrap;
}

.pss-page{
padding: 6px 12px;
    cursor: pointer;
    width: 50px;
    height: 50px;
    background: transparent;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    color: #000;
    border: 1px solid #E9E9E9;
    transition: 0.3s;
}
.pss-card{
    border-radius: var(--pss-radius);
    overflow:hidden;
}

button.pss-page.active, button.pss-page:hover{
	background: var(--pss-primary);
    color: #fff;
}