/* =========================================================
   Encontrados v1.8.12 · Artículo: relacionados 16:9 + share premium
   Hoja aislada para corregir desde cero estos dos módulos.
   ========================================================= */

/* ---------- RELACIONADOS: imagen estrictamente 16:9 ---------- */
.article-page .related-premium-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
  align-items:stretch;
}
.article-page .related-premium-card{
  display:flex;
  flex-direction:column;
  min-width:0;
  overflow:hidden;
  border:1px solid #e1e6ec;
  border-radius:11px;
  background:#fff;
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
.article-page .related-premium-card:hover{
  transform:translateY(-4px);
  border-color:#d3dae4;
  box-shadow:0 14px 34px rgba(16,27,43,.10);
}
.article-page .related-premium-media{
  position:relative;
  display:block;
  width:100%;
  aspect-ratio:16/9;
  flex:0 0 auto;
  overflow:hidden;
  background:#edf1f5;
}
.article-page .related-premium-media img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  max-height:none!important;
  aspect-ratio:auto!important;
  object-fit:cover!important;
  object-position:center center!important;
  border-radius:0!important;
  transition:transform .35s ease;
}
.article-page .related-premium-card:hover .related-premium-media img{
  transform:scale(1.035);
}
.article-page .related-premium-copy{
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
  padding:13px 14px 15px;
}
.article-page .related-premium-copy h3{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  overflow:hidden;
}
.article-page .related-premium-copy small{margin-top:auto;padding-top:4px}

/* ---------- COMPARTIR: logos reconocibles, color de marca y animación ---------- */
.article-page .article-share-sticky.article-share-brands{
  gap:10px;
}
.article-page .article-share-brands .share-brand{
  position:relative;
  display:grid;
  place-items:center;
  overflow:hidden;
  text-decoration:none;
  isolation:isolate;
  transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s ease,filter .22s ease;
}
.article-page .article-share-brands .share-brand::after{
  content:"";
  position:absolute;
  inset:-1px;
  z-index:-1;
  opacity:0;
  border-radius:inherit;
  background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.55),transparent 48%);
  transition:opacity .22s ease;
}
.article-page .article-share-brands .share-brand:hover::after{opacity:1}
.article-page .article-share-brands .share-brand:hover{
  transform:translateY(-3px) scale(1.07);
  filter:saturate(1.06);
  box-shadow:0 10px 22px rgba(18,28,45,.18);
}
.article-page .article-share-brands .share-brand:active{
  transform:translateY(0) scale(.96);
}
.article-page .article-share-brands .share-brand svg{
  width:18px;
  height:18px;
  display:block;
  fill:currentColor;
  transition:transform .22s ease;
}
.article-page .article-share-brands .share-brand:hover svg{transform:scale(1.08)}
.article-page .article-share-sticky .share-brand{
  width:40px;
  height:40px;
  border-radius:50%;
  border:0;
  color:#fff;
  cursor:pointer;
}
.article-page .share-facebook{background:#1877F2!important;color:#fff!important;border-color:#1877F2!important}
.article-page .share-x{background:#050505!important;color:#fff!important;border-color:#050505!important}
.article-page .share-whatsapp{background:#25D366!important;color:#fff!important;border-color:#25D366!important}
.article-page .share-copy{background:#fff!important;color:#152035!important;border:1px solid #d8e0e9!important}
.article-page .share-copy:hover{color:#6b35cf!important;border-color:#bfa9e8!important}
.article-page .share-whatsapp{
  animation:encSharePulse 3.2s ease-in-out infinite;
}
.article-page .share-whatsapp:hover{animation:none}
@keyframes encSharePulse{
  0%,72%,100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}
  82%{box-shadow:0 0 0 7px rgba(37,211,102,.12)}
  92%{box-shadow:0 0 0 12px rgba(37,211,102,0)}
}
@media (prefers-reduced-motion:reduce){
  .article-page .share-whatsapp{animation:none}
  .article-page .article-share-brands .share-brand,
  .article-page .article-share-brands .share-brand svg,
  .article-page .related-premium-media img{transition:none}
}

/* Mobile share: icon + texto, limpio y táctil */
.article-page .article-share-mobile.article-share-brands{
  gap:7px;
}
.article-page .article-share-mobile.article-share-brands .share-brand{
  min-height:39px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:0 10px;
  border-radius:999px;
  font:800 9px/1 Inter,Arial,sans-serif;
}
.article-page .article-share-mobile.article-share-brands .share-brand svg{
  width:16px;
  height:16px;
  flex:0 0 16px;
}
.article-page .article-share-mobile.article-share-brands .share-brand span{display:inline}

/* ---------- Responsive relacionados manteniendo 16:9 ---------- */
@media(max-width:930px){
  .article-page .related-premium-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
}
@media(max-width:700px){
  .article-page .related-premium-grid{grid-template-columns:1fr;gap:10px}
  .article-page .related-premium-card{
    display:grid;
    grid-template-columns:128px minmax(0,1fr);
    gap:0;
    align-items:start;
    border-radius:9px;
  }
  .article-page .related-premium-media{
    width:128px;
    aspect-ratio:16/9;
    margin:9px 0 9px 9px;
    border-radius:7px;
  }
  .article-page .related-premium-media img{border-radius:7px!important}
  .article-page .related-premium-copy{padding:10px 11px 10px 12px}
  .article-page .related-premium-copy h3{font-size:16px;line-height:1.24;margin:6px 0 7px}
  .article-page .article-share-mobile.article-share-brands{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
  .article-page .article-share-mobile.article-share-brands .share-brand{
    min-width:0;
    padding:0 6px;
  }
  .article-page .article-share-mobile.article-share-brands .share-brand span{font-size:8px;overflow:hidden;text-overflow:ellipsis}
}
@media(max-width:430px){
  .article-page .related-premium-card{grid-template-columns:112px minmax(0,1fr)}
  .article-page .related-premium-media{width:112px}
  .article-page .article-share-mobile.article-share-brands .share-brand span{display:none}
  .article-page .article-share-mobile.article-share-brands .share-brand{min-height:42px}
  .article-page .article-share-mobile.article-share-brands .share-brand svg{width:19px;height:19px}
}
