/* ===================================
    Cover
====================================== */

.body-blog{
  position: relative;
  min-height: 100vh;
  background:url("../../assets/img/blog/fondo-blog.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.body-blog-detalle{
  position: relative;
  min-height: 100vh;
  background:url("../../assets/img/blog/fondo-detalle-blog.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* ===================================
    Global
====================================== */

.grid-main{
  display: grid;
  grid-template-columns: 1fr;
  gap:20px;
}

/* contenedor */
.section-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  flex-wrap: wrap;
}

/* título */
.section-title{
  position: relative;
  display: inline-block;
  font-weight: 500;
  color: #6D6D6D;
  padding-bottom: 8px;
  margin-bottom: 0px;
}

/* línea azul */
.section-title::after{
  content:"";
  position: absolute;
  left: 0;
  bottom: 0;

  width: 28px;
  height: 2px;
  border-radius: 2px;
  background: #4657A3;
}

.content-section-select{
  min-width: 100%;
}

/* select */
.section-select{
  padding: 6px 12px;
  font-weight: 500;
  color: #4657A3;
  background-color: #fff;
  border: 1px solid rgba(42,91,215,.25);
  border-radius: 999px;

  outline: none;
  cursor: pointer;

  transition: border-color .2s ease, box-shadow .2s ease;
}

/* focus / hover */
.section-select:hover,
.section-select:focus{
  border-color: #4657A3;
  box-shadow: 0 0 0 2px rgba(42,91,215,.12);
}

/* ===================================
    Blog detalle
====================================== */
.bg-detalle{
  border: 1px solid;
border-image-source: linear-gradient(96.21deg, #EFEFEF 0.85%, #CFCFCF 53.28%, #F5F4F4 100%);
backdrop-filter: blur(50px);
background: #FFFFFF;
border-radius: 16px;
}

.stiky{
  position: sticky;
top: 100px;
}

.video{
  width: 100%;
  height: 250px;
  border-radius: 16px;
}

#blog-detalle .deco{
  width: 65px;
  height: 2px;
  background: #4657A3;
  margin-top: 10px;
  margin-bottom: 10px;
}

#blog-detalle h2{
  color: #1E2022;
}

#blog-detalle h5{
  color: #6D6D6D
}

#blog-detalle .fecha{
  color:#4657A3;
  font-style: italic;
}

.img-portada{
  width: 100%;
  height: 550px;
  border-radius: 16px;
}

.img-portada img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
}

.gallery-card{
  width: 100%;

}

.gallery-item{
  display:block;
  overflow:hidden;
  border-radius: 16px;
  background: #f3f6fb;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 18px 50px rgba(0,0,0,.10);
  transform: translateZ(0);
}

.gallery-item img{
  width: 100%;
  height: 100%;
  display:block;
  object-fit: cover;
  transition: transform .45s ease;
}

/* HERO */
.gallery-hero{
  height: 300px;
  border-radius: 16px;
  box-shadow: 0 22px 60px rgba(0,0,0,.14);
}

.gallery-hero img{
  border-radius: inherit;
}

/* THUMBS */
.gallery-thumbs{
  margin-top: 14px;
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.gallery-thumbs .gallery-item{
  aspect-ratio: 1 / 1;   /* o 1 / 1, 16 / 9 */
  width: 100%;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: 0 16px 35px rgba(0,0,0,.10);
}

/* Hover */
.gallery-item:hover img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.06);
}


/* ===================================
    Responsive
====================================== */

/* xxs */ @media (max-width: 430px) {}
/* xs  */ @media (min-width: 431px) {

.content-section-select{
  min-width: 250px;
}

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

} /* @media (max-width: 575px) {} */
/* sm  */ @media (min-width: 576px) {

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

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

}
/* md  */ @media (min-width: 768px) {

.gallery-hero{
  height: 450px;
}

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

} /* ipad Portrait */
/* lg  */ @media (min-width: 992px) {

.gallery-hero{
  height: 550px;
}

.grid-main{grid-template-columns: repeat(4,1fr);}

} /* ipad Landscape */
/* xl  */ @media (min-width: 1200px) {}
/* xxl */ @media (min-width: 1400px) {}