/* ======================================================
   HERO – PORTAFOLIO (COMPACTO)
====================================================== */

.hero_single.inner_pages {
  height: 220px;
  padding: 40px 0;
}

.hero_single.inner_pages h1 {
  font-size: 36px;
}

.hero_single.inner_pages h1:before {
  width: 200px;
  height: 80px;
  margin-bottom: 6px;
}

.hero_single.inner_pages h2 {
  font-size: 16px;
  margin-top: 6px;
  margin-bottom: 18px;
}

.modal-body iframe {
    width: 100% !important; margin: auto !important
}

.preview span { font-size: 16px; text-transform: uppercase; font-weight: bolder; color: #fff !important; background: #1f263e !important; border: solid 2px #ffffff}
/* ======================================================
   CARD / BLOG – VIDEO PORTFOLIO (4:5 REAL)
====================================================== */

.blog {
  margin-bottom: 16px;
  border-radius: 14px;
  overflow: hidden;
}

/* Área de imagen 4:5 */
.blog figure {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  margin: 0;
  overflow: hidden;
  background: #e0e0e0;
}

.blog figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ======================================================
   INFO CARD
====================================================== */

.blog .post_info {
  padding: 14px 16px;
}

/* Contenedor avatar + texto */
.post_info .post_meta {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Avatar */
.post_info .thumb {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

.post_info .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Texto */
.post_info .meta_text {
  display: flex;
  flex-direction: column;
}

/* Username */
.post_info .meta_text h2 {
  font-size: 15px;
  margin: 0;
  line-height: 1;        /* 🔥 evita desbalance vertical */
  display: flex;
  align-items: center;  /* 🔥 centra visualmente */
}

/* Fecha */
.post_info .meta_text small {
  margin-top: 6px;
  font-size: 11px;
  opacity: 0.65;
  line-height: 1.2;
}


.min-h-c{
    min-height: calc(100vh - 450px);
}
.venoratio-9x16 {
    padding-top: 0;
    padding-bottom: 0;
    height: 80vh;
}



/* ======================================================
   MOBILE OPTIMIZACIONES
====================================================== */


@media (max-width: 991px) {
    article.blog figure img {
        height: inherit;
        width: 100%;
    }
}




@media (max-width: 768px) {

  /* =========================
     HERO / HEADER (ESTABLE)
     ========================= */

  .hero_single,
  .hero_single.inner_pages {
    padding-top: 60px !important;
    padding-bottom: 28px !important;
    min-height: 200px !important;
    height: auto !important;
  }

  /* LOGO (before del h1) */
  .hero_single.inner_pages h1:before {
    width: 140px !important;
    margin: 0 auto 10px !important;
  }

  /* TITULO */
  .hero_single.inner_pages h1 {
    font-size: 22px !important;
    line-height: 1.15 !important;
    margin: 0 0 8px !important;
  }

  /* SUBTITULO */
  .hero_single.inner_pages p {
    font-size: 12.5px !important;
    line-height: 1.35 !important;
    margin: 0 !important;
  }

  /* =========================
     GRID / CARDS
     ========================= */

  .blog {
    margin-bottom: 18px !important;
  }

  .blog figure {
    margin-bottom: 0 !important;
  }

  .blog .post_info {
    padding: 12px 12px 14px !important;
  }

  /* =========================
     META (AVATAR + USER + DATE)
     ========================= */

  .post_info .post_meta {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
  }

  .post_info .thumb {
    width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    flex-shrink: 0;
  }

  .post_info .thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block;
  }

  .post_info .meta_text h2 {
    font-size: 13px !important;
    line-height: 1.1 !important;
    margin: 0 !important;
  }

  .post_info .meta_text small {
    display: block;
    font-size: 10px !important;
    margin-top: 4px !important;
    opacity: 0.75;
  }

}