/* mybeautyNewsDisplay.css */

/* base */
.mbqNewsArticle{overflow:hidden;border-radius:18px}

/* cover */
.mbqNewsCover{
  position:relative;
  overflow:hidden;
  border-radius:18px;
  background:#111;
  min-height:360px;
}
.mbqNewsCover:before{
  content:"";
  position:absolute;inset:0;
  background:
    radial-gradient(1200px 500px at 20% 20%, rgba(255,255,255,.12), rgba(0,0,0,0) 55%),
    linear-gradient(to bottom, rgba(0,0,0,.10), rgba(0,0,0,.78) 65%, rgba(0,0,0,.92));
  z-index:2;
  pointer-events:none;
}
.mbqNewsCoverImg{
  position:absolute;inset:-2px;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  filter:saturate(1.05) contrast(1.05);
  transform:scale(1.02);
  z-index:1;
}
.mbqNewsCoverFade{
  position:absolute;inset:0;
  background:linear-gradient(to bottom, rgba(0,0,0,0) 35%, rgba(0,0,0,.65) 70%, rgba(0,0,0,.92) 100%);
  z-index:2;
  pointer-events:none;
}
.mbqNewsCoverInner{
  position:relative;
  z-index:3;
  padding:26px 26px 22px 26px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  min-height:360px;
  gap:10px;
}
.mbqNewsKickerRow{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.mbqNewsPill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.16);
  color:#fff;
  font-size:13px;
  letter-spacing:.2px;
  backdrop-filter:blur(10px);
}
.mbqNewsTitle{
  margin:0;
  color:#fff;
  font-weight:900;
  line-height:1.1;
  font-size:clamp(22px, 3.2vw, 42px);
  text-shadow:0 10px 30px rgba(0,0,0,.45);
}

/* meta (ajustado para pill lectura sin huecos) */
.mbqNewsMeta{
  display:inline-flex !important;   /* clave: evita empujes y espacios raros */
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-start !important;
  width:auto !important;
  color:rgba(255,255,255,.88);
  font-size:14px;
}
.mbqNewsMeta > *{
  flex:0 0 auto !important;
  margin-left:0 !important;
}
.mbqNewsMeta strong{color:#fff;font-weight:800}
.mbqNewsDot{opacity:.9}
.mbqNewsMeta time{display:inline !important; width:auto !important; margin:0 !important;}

/* fallback cover */
.mbqNewsCoverFallback{
  min-height:260px;
  display:flex;
  align-items:flex-end;
  padding:22px;
  background:
    radial-gradient(900px 420px at 20% 20%, rgba(139,47,163,.35), rgba(0,0,0,0) 58%),
    linear-gradient(135deg, rgba(17,17,17,1), rgba(43,16,52,1));
  position:relative;
  overflow:hidden;
  border-radius:18px;
}
.mbqNewsCoverFallback:before{
  content:"";
  position:absolute;inset:-1px;
  background:linear-gradient(to bottom, rgba(0,0,0,.08), rgba(0,0,0,.75));
  pointer-events:none;
}
.mbqNewsCoverFallback .mbqNewsCoverInner{min-height:260px;padding:0;z-index:2}

/* body */
.mbqNewsBody{padding:18px 18px 8px 18px}
.mbqNewsAuthor{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:14px 14px;
  border-radius:16px;
  background:linear-gradient(to bottom, rgba(0,0,0,.02), rgba(0,0,0,.04));
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 10px 25px rgba(0,0,0,.06);
  margin-top:-28px;
  position:relative;
  z-index:5;
  backdrop-filter:blur(8px);
}
.mbqNewsAuthorLeft{display:flex;align-items:center;gap:12px;min-width:0}
.mbqNewsAuthorText{min-width:0;line-height:1.15}
.mbqNewsAuthorName{font-weight:900;margin:0}
.mbqNewsAuthorTime{color:rgba(0,0,0,.55);font-size:13px;margin-top:2px}

/* espacio autor -> contenido */
.mbqNewsContentWrap{
  margin-top:18px;
  padding-top:16px;
  border-top:1px solid rgba(0,0,0,.08);
}

/* contenido tipo revista */
.mbqMagazineContent{
  font-size:16px;
  line-height:1.75;
  letter-spacing:.15px;
  color:rgba(0,0,0,.86);
  max-width:760px;
}
@media (min-width: 980px){
  .mbqMagazineContent{margin-left:auto;margin-right:auto;}
}
.mbqMagazineContent p{margin:0 0 14px 0}
.mbqMagazineContent h2{
  margin:22px 0 10px 0;
  font-weight:900;
  font-size:20px;
  line-height:1.25;
  letter-spacing:.2px;
}
.mbqMagazineContent h3{
  margin:18px 0 8px 0;
  font-weight:800;
  font-size:17px;
  line-height:1.25;
  letter-spacing:.2px;
}
.mbqMagazineContent ul,
.mbqMagazineContent ol{margin:8px 0 16px 22px}
.mbqMagazineContent li{margin:6px 0}
.mbqMagazineContent blockquote{
  margin:16px 0;
  padding:14px 16px;
  border-left:4px solid rgba(0,0,0,.18);
  background:rgba(0,0,0,.03);
  border-radius:14px;
}
.mbqMagazineContent a{
  text-decoration:none;
  border-bottom:1px solid rgba(0,0,0,.25);
}
.mbqMagazineContent a:hover{border-bottom-color:rgba(0,0,0,.45)}
.mbqMagazineContent img{border-radius:16px}

/* inline media (magazine) */
.mbqInlineWrap{min-width:0}
.mbqInlineMedia{
  width:360px;
  max-width:100%;
  float:right;
  margin:6px 0 14px 18px;
}
.mbqInlineMedia.isLeft{
  float:left;
  margin:6px 18px 14px 0;
}
.mbqInlineCard{
  border-radius:16px;
  overflow:hidden;
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 10px 25px rgba(0,0,0,.06);
}
.mbqInlineHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  background:linear-gradient(to bottom, rgba(0,0,0,.02), rgba(0,0,0,.04));
  border-bottom:1px solid rgba(0,0,0,.06);
}
.mbqInlineTitle{
  font-weight:900;
  font-size:13px;
  letter-spacing:.2px;
  opacity:.9;
  display:flex;
  align-items:center;
  gap:8px;
  text-transform:lowercase;
}
.mbqInlineBody{padding:12px}
.mbqInlineBody iframe{
  width:100% !important;
  max-width:100% !important;
  border:0;
  border-radius:14px;
  height:auto;
}
.mbqInlineBody blockquote{
  margin:0 !important;
  width:100% !important;
  max-width:100% !important;
}
.mbqInlineBody iframe[src*="youtube.com/embed"]{aspect-ratio:16/9}
.mbqClear{clear:both}

/* footer */
.mbqNewsFooter{
  display:flex;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
  margin-top:16px;
}
.mbqNewsActions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

@media (max-width: 979px){
  .mbqNewsBody{padding:16px 14px 8px 14px}
  .mbqNewsCoverInner{padding:22px 16px 18px 16px}
  .mbqNewsAuthor{margin-top:-22px}
  .mbqNewsContentWrap{margin-top:16px;padding-top:14px}
  .mbqMagazineContent{font-size:15.5px;line-height:1.72}

  .mbqInlineMedia,
  .mbqInlineMedia.isLeft{
    float:none !important;
    width:100% !important;
    margin:10px 0 14px 0 !important;
  }
}

/* ===== lectura inline pill ===== */
.mbqReadTimeInline{
  display:inline-flex;
  align-items:center;
  gap:7px;
  background:#fff;
  padding:5px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  color:#24112f;
  border:1px solid rgba(255,255,255,.45);
  box-shadow:0 10px 25px rgba(0,0,0,.10);
  backdrop-filter: blur(8px);
  margin-left:0 !important;
  white-space:nowrap;
}
.mbqReadTimeInline i{font-size:12px;opacity:.7}
.mbqReadTimeUnitInline{
  font-weight:800;
  font-size:11px;
  opacity:.75;
  margin-left:-3px;
}
.mbqNewsCover .mbqReadTimeInline{
  border:1px solid rgba(255,255,255,.30);
  background:rgba(255,255,255,.92);
}

/* recursos y fuentes */
.mbqResourcesBox{
  margin-top:18px;
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  border-radius:18px;
  box-shadow:0 10px 30px rgba(0,0,0,.06);
  overflow:hidden;
}

.mbqResourcesHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:14px 14px;
  background:
    radial-gradient(900px 280px at 15% 10%, rgba(139,47,163,.14), rgba(0,0,0,0) 55%),
    linear-gradient(to bottom, rgba(0,0,0,.02), rgba(0,0,0,0));
  border-bottom:1px solid rgba(0,0,0,.06);
}

.mbqResourcesHeadLeft{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}

.mbqResourcesIcon{
  width:40px;height:40px;
  display:grid;place-items:center;
  border-radius:14px;
  background:linear-gradient(135deg, rgba(139,47,163,.18), rgba(255,255,255,.9));
  border:1px solid rgba(139,47,163,.18);
  box-shadow:0 10px 22px rgba(0,0,0,.06);
  flex:0 0 auto;
}
.mbqResourcesIcon i{font-size:16px;color:#2b1034;}

.mbqResourcesHeadText{min-width:0;}
.mbqResourcesTitle{
  margin:0;
  font-weight:900;
  letter-spacing:.2px;
  text-transform:lowercase;
  color:#2b1034;
  line-height:1.1;
}
.mbqResourcesSub{
  margin-top:2px;
  font-size:12px;
  color:rgba(0,0,0,.55);
}

.mbqResourcesCount{
  flex:0 0 auto;
  font-size:12px;
  font-weight:800;
  color:#2b1034;
  background:rgba(139,47,163,.10);
  border:1px solid rgba(139,47,163,.18);
  padding:7px 10px;
  border-radius:999px;
}

.mbqResourcesGrid{
  padding:14px;
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
}

@media (max-width: 767px){
  .mbqResourcesGrid{grid-template-columns:1fr;}
}

.mbqResourceItem{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 12px;
  border-radius:16px;
  background:
    radial-gradient(700px 180px at 10% 20%, rgba(139,47,163,.10), rgba(0,0,0,0) 55%),
    linear-gradient(to bottom, rgba(0,0,0,.02), rgba(0,0,0,0));
  border:1px solid rgba(0,0,0,.06);
  text-decoration:none !important;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  box-shadow:0 8px 18px rgba(0,0,0,.05);
}

.mbqResourceItem:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 28px rgba(0,0,0,.08);
  border-color:rgba(139,47,163,.22);
}

.mbqResourceLeft{
  display:flex;
  align-items:flex-start;
  gap:10px;
  min-width:0;
}

.mbqResourceIco{
  width:34px;height:34px;
  display:grid;place-items:center;
  border-radius:12px;
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 10px 22px rgba(0,0,0,.06);
  flex:0 0 auto;
}
.mbqResourceIco i{
  font-size:15px;
  color:#8b2fa3;
}

.mbqResourceMeta{min-width:0;}
.mbqResourceTitle{
  font-size:13px;
  font-weight:900;
  color:#2b1034;
  line-height:1.2;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  max-width:520px;
}
.mbqResourceSub{
  font-size:12px;
  color:rgba(0,0,0,.55);
  margin-top:3px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  max-width:520px;
}

.mbqResourceRight{flex:0 0 auto;}
.mbqResourceGo{
  width:32px;height:32px;
  border-radius:999px;
  display:grid;place-items:center;
  background:rgba(0,0,0,.04);
  border:1px solid rgba(0,0,0,.06);
  color:rgba(0,0,0,.65);
  transition:transform .18s ease, background .18s ease;
}
.mbqResourceItem:hover .mbqResourceGo{
  transform:translateX(2px);
  background:rgba(139,47,163,.10);
  border-color:rgba(139,47,163,.18);
  color:#2b1034;
}