* =========================================================
   SOLO MÓVIL (no desktop, no tablets)
   Relacionados + TPTN con el MISMO formato
   Breakpoint móvil: <= 600px
   ========================================================= */
@media (max-width: 600px){

  /* ---------- BASE “card” compartida ---------- */
  :root{
    /* nada aquí, solo por claridad */
  }

  /* =====================================================
     1) RELACIONADOS — ul.related-posts.group
     HTML: li.related > article > .post-thumbnail + .related-inner
     ===================================================== */
  ul.related-posts.group{
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    display: grid !important;
    gap: 12px !important;
  }

  ul.related-posts.group > li{
    margin: 0 !important;
    padding: 0 !important;
  }

  ul.related-posts.group > li > article{
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;

    padding: 12px !important;
    border-radius: 16px !important;
    border: 1px solid rgba(0,0,0,.10) !important;
    background: #fff !important;
    box-shadow: 0 10px 26px rgba(0,0,0,.06) !important;

    overflow: hidden !important;
  }

  /* Imagen grande (móvil) */
  ul.related-posts.group .post-thumbnail{
    position: relative !important;
    flex: 0 0 160px !important;
    width: 160px !important;
    margin: 0 !important;
  }

  ul.related-posts.group .post-thumbnail img{
    width: 160px !important;
    height: 120px !important;
    object-fit: cover !important;
    border-radius: 14px !important;
    display: block !important;
  }

  /* Burbuja comentarios encima de la imagen */
  ul.related-posts.group .post-comments{
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    z-index: 2 !important;

    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;

    padding: 6px 10px !important;
    border-radius: 999px !important;
    background: rgba(0,0,0,.72) !important;
    color: #fff !important;
    text-decoration: none !important;
    font-size: 12px !important;
    line-height: 1 !important;
  }

  /* Texto */
  ul.related-posts.group .related-inner{
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  /* Tu HTML tiene <h4"> roto, así que apuntamos al enlace del título */
  ul.related-posts.group .related-inner a[rel="bookmark"]{
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;

    font-size: 16px !important;
    line-height: 1.25 !important;
    text-decoration: none !important;
    color: inherit !important;
  }

  ul.related-posts.group .related-inner a[rel="bookmark"]:hover{
    text-decoration: underline !important;
  }

  ul.related-posts.group .post-meta{
    margin-top: 8px !important;
  }

  ul.related-posts.group .post-date{
    margin: 0 !important;
    font-size: 12px !important;
    opacity: .7 !important;
  }


  /* =====================================================
     2) TPTN — div.tptn_posts_daily...tptn-left-thumbs
     HTML: li > a(img) + span.tptn_after_thumb (title+date)
     ===================================================== */
  div.tptn_posts_daily.tptn_posts_widget.tptn-left-thumbs{
    /* No tocamos el “widget” global, solo el listado interno */
  }

  div.tptn_posts_daily.tptn_posts_widget.tptn-left-thumbs ul{
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    display: grid !important;
    gap: 12px !important;
  }

  /* Cada item como la MISMA card que relacionados */
  div.tptn_posts_daily.tptn_posts_widget.tptn-left-thumbs li{
    height: 150px;
    margin: 0 !important;
    padding: 12px !important;

    display: flex !important;
    align-items: center !important;
    gap: 12px !important;

    border-radius: 16px !important;
    border: 1px solid rgba(0,0,0,.10) !important;
    background: #fff !important;
    box-shadow: 0 10px 26px rgba(0,0,0,.06) !important;

    overflow: hidden !important;
  }

  /* En tu HTML hay dos <a class="tptn_link">: uno con imagen y otro con título.
     El primero (imagen) lo hacemos “thumb grande”. */
  div.tptn_posts_daily.tptn_posts_widget.tptn-left-thumbs li > a.tptn_link{
    flex: 0 0 160px !important;
    width: 160px !important;
    display: block !important;
  }

  div.tptn_posts_daily.tptn_posts_widget.tptn-left-thumbs img.tptn_thumb{
    width: 160px !important;
    height: 120px !important;
    object-fit: cover !important;
    border-radius: 14px !important;
    display: block !important;
  }

  /* Texto (título + fecha) */
  div.tptn_posts_daily.tptn_posts_widget.tptn-left-thumbs .tptn_after_thumb{
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: block !important;
  }

  div.tptn_posts_daily.tptn_posts_widget.tptn-left-thumbs .tptn_title{
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;

    font-size: 16px !important;
    line-height: 1.25 !important;
    color: inherit !important;
  }

  div.tptn_posts_daily.tptn_posts_widget.tptn-left-thumbs .tptn_after_thumb a.tptn_link{
    text-decoration: none !important;
    color: inherit !important;
  }

  div.tptn_posts_daily.tptn_posts_widget.tptn-left-thumbs .tptn_after_thumb a.tptn_link:hover{
    text-decoration: underline !important;
  }

  div.tptn_posts_daily.tptn_posts_widget.tptn-left-thumbs .tptn_date{
    display: block !important;
    margin-top: 8px !important;
    font-size: 12px !important;
    opacity: .7 !important;
  }
}
/* =========================================================
   FIX “ESPACIO VACÍO” — SOLO MÓVIL (<=600px)
   PISA el bloque anterior
   ========================================================= */
@media (max-width: 600px){

  /* ---------- RELACIONADOS ---------- */
  ul.related-posts.group{
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    display: grid !important;
    gap: 12px !important;
  }

  ul.related-posts.group > li,
  ul.related-posts.group > li > article{
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  ul.related-posts.group > li > article{
    display: grid !important;
    grid-template-columns: 140px 1fr !important;
    align-items: start !important;
    gap: 12px !important;

    padding: 12px !important;
    border-radius: 16px !important;
    border: 1px solid rgba(0,0,0,.10) !important;
    background: #fff !important;
    box-shadow: 0 10px 26px rgba(0,0,0,.06) !important;

    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  ul.related-posts.group .post-thumbnail{
    position: relative !important;
    width: 140px !important;
    margin: 0 !important;
  }

  ul.related-posts.group .post-thumbnail a{
    display: block !important;
  }

  ul.related-posts.group .post-thumbnail img{
    display: block !important;
    width: 140px !important;
    height: 110px !important;
    object-fit: cover !important;
    border-radius: 14px !important;
  }

  ul.related-posts.group .post-comments{
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    z-index: 2 !important;

    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;

    padding: 6px 10px !important;
    border-radius: 999px !important;
    background: rgba(0,0,0,.72) !important;
    color: #fff !important;
    text-decoration: none !important;
    font-size: 12px !important;
    line-height: 1 !important;
  }

  ul.related-posts.group .related-inner{
    min-width: 0 !important;
  }

  /* Tu <h4"> está mal formado -> estilamos el enlace del título */
  ul.related-posts.group .related-inner a[rel="bookmark"]{
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;

    font-size: 16px !important;
    line-height: 1.25 !important;
    text-decoration: none !important;
    color: inherit !important;
  }

  ul.related-posts.group .post-date{
    margin: 8px 0 0 !important;
    font-size: 12px !important;
    opacity: .7 !important;
  }


  /* ---------- TPTN (POPULARES) ---------- */
  div.tptn_posts_daily.tptn_posts_widget.tptn-left-thumbs ul{
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    display: grid !important;
    gap: 12px !important;
  }

  div.tptn_posts_daily.tptn_posts_widget.tptn-left-thumbs li{
    min-height: 0 !important;
    max-height: none !important;
height: 150px;
    display: grid !important;
    grid-template-columns: 140px 1fr !important;
    align-items: start !important;
    gap: 12px !important;

    padding: 12px !important;
    border-radius: 16px !important;
    border: 1px solid rgba(0,0,0,.10) !important;
    background: #fff !important;
    box-shadow: 0 10px 26px rgba(0,0,0,.06) !important;

    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  /* Primer enlace = imagen */
  div.tptn_posts_daily.tptn_posts_widget.tptn-left-thumbs li > a.tptn_link{
    display: block !important;
    width: 140px !important;
  }

  div.tptn_posts_daily.tptn_posts_widget.tptn-left-thumbs img.tptn_thumb{
    display: block !important;
    width: 140px !important;
    height: 110px !important;
    object-fit: cover !important;
    border-radius: 14px !important;
  }

  /* Texto (título + fecha) */
  div.tptn_posts_daily.tptn_posts_widget.tptn-left-thumbs .tptn_after_thumb{
    min-width: 0 !important;
    display: block !important;
  }

  div.tptn_posts_daily.tptn_posts_widget.tptn-left-thumbs .tptn_after_thumb a.tptn_link{
    text-decoration: none !important;
    color: inherit !important;
  }

  div.tptn_posts_daily.tptn_posts_widget.tptn-left-thumbs .tptn_title{
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;

    font-size: 16px !important;
    line-height: 1.25 !important;
  }

  div.tptn_posts_daily.tptn_posts_widget.tptn-left-thumbs .tptn_date{
    display: block !important;
    margin-top: 8px !important;
    font-size: 12px !important;
    opacity: .7 !important;
  }
}
/* =========================================================
   FIX espacio vacío en RELACIONADOS — SOLO MÓVIL (<=600px)
   Anula heights/min-heights que venga metiendo el tema
   ========================================================= */
@media (max-width: 600px){

  /* Mata cualquier altura fija que venga del tema */
  ul.related-posts.group > li.related.post-hover,
  ul.related-posts.group > li.related.post-hover > article{
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  /* Si el tema usa "unset" / "fit-content", forzamos también: */
  ul.related-posts.group > li.related.post-hover,
  ul.related-posts.group > li.related.post-hover > article{
    height: unset !important;
    min-height: unset !important;
  }

  /* Reaplicamos un layout compacto (sin crecer de más) */
  ul.related-posts.group > li.related.post-hover > article{
    display: grid !important;
    grid-template-columns: 140px 1fr !important;
    align-items: start !important;
    align-content: start !important;     /* clave */
    grid-auto-rows: min-content !important;

    gap: 12px !important;
    padding: 12px !important;

    border-radius: 16px !important;
    border: 1px solid rgba(0,0,0,.10) !important;
    background: #fff !important;
    box-shadow: 0 10px 26px rgba(0,0,0,.06) !important;

    overflow: hidden !important;
  }

  /* Evita que algún padding/margen interno “infle” el alto */
  ul.related-posts.group .related-inner,
  ul.related-posts.group .post-meta{
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;
    min-height: 0 !important;
  }

  /* Thumb y su contenedor sin alturas raras */
  ul.related-posts.group .post-thumbnail{
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
  }

  ul.related-posts.group .post-thumbnail img{
    display: block !important;
    width: 140px !important;
    height: 110px !important;
    object-fit: cover !important;
    border-radius: 14px !important;
  }
}