.post {
    padding-top: 130px;
}

.post .title {
    margin: 2rem 0;
    text-align: center;
}

.post .blog-meta-item {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
}

.post .descript {
    margin: 2rem 0;
    padding: 0;
}
.post .descript a {
  display: inline !important;
  color: var(--principal);
}
.blog { padding-block: var(--section-padding); }

.blog :is(.section-subtitle, .section-title) { text-align: center; }

.blog .section-title { margin-bottom: 40px; }

.blog-list {
  display: grid;
  gap: 25px;
}

.blog-card {
  background: var(--white);
  box-shadow: 0 2px 25px 10px hsla(0, 0%, 0%, 0.1);
  border-radius: var(--radius-12);
  overflow: hidden;
}

.blog-banner {
  aspect-ratio: 2 / 1.3;
  overflow: hidden;
}

.blog-banner :is(a, img) { height: 100%; }

.blog-banner img {
  object-fit: cover;
  transition: var(--transition-2);
}

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

.blog-content { padding: 20px; }

.blog-meta-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 15px;
  margin-bottom: 15px;
}

.blog-meta-item {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--black-coral);
  font-size: var(--fs-5);
  text-transform: uppercase;
}

.blog-meta-item > ion-icon {
  color: var(--principal);
  --ionicon-stroke-width: 45px;
}

.blog-meta-item .blog-meta-link {
  color: var(--black-coral);
  transition: var(--transition);
}

.blog-meta-item .blog-meta-link:is(:hover, :focus) { color: var(--principal); }

.blog-title > a {
  color: inherit;
  transition: var(--transition);
}

.blog-title > a:is(:hover, :focus) { color: var(--principal); }
.blog .page{
  margin-top: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.blog .page span.active{
   display: flex;
  gap: 8px;
  background-color: var(--principal);
  padding: 8px 12px;
  border-radius: 9999px;
  width: fit-content;
  font-family: Arial, sans-serif;
  user-select: none;

}
.blog .page a,
.blog .page span{
  font-size: 1.3rem;
  cursor: pointer;
  margin: 0 10px;
}
.blog .page a.active,
.blog .page span.active{
  color: var(--blue-ryb);
}
.blog .link-blog{
  display: flex;
  justify-content: end;
  margin-top: 2rem;
}
.breadcrumb {
  display: flex;
  gap: 2px;
  font-size: 0.9rem;
}
.relacion{
  margin-bottom: 2rem;
}
.relacion .section-title{
  margin-bottom: 1rem;
}