/* ============================================================
   TVN · Copa Mundial FIFA 2026 · article-fwc.css
   ============================================================
   Estilos para notas internas y listados del Mundial 2026,
   alineados a la línea gráfica de los componentes LFDF
   (navy + dorado + Bebas Neue + Inter).

   Versión: 2026-05-18 · v3.0 — clean & epic
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@400;500;600;700;800;900&display=swap");

/* ============================================================
   0. FONDO EDGE-TO-EDGE — body
   ============================================================ */
body.tvn,
body.web-mode,
body.tvn.web-mode {
  background: linear-gradient(180deg, #050816 0%, #0a1024 38%, #050816 100%) !important;
  background-attachment: fixed !important;
}

/* ============================================================
   1. CONTENEDOR PRINCIPAL
   ============================================================ */
#content-body.bbnx-main,
.bbnx-main.grid,
main.bbnx-main {
  display: block !important;
  width: 100% !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: clamp(24px, 4vw, 56px) clamp(20px, 4vw, 48px) !important;
  background: transparent !important;
  color: rgba(255, 255, 255, 0.92) !important;
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  line-height: 1.65 !important;
  grid-template-columns: 1fr !important;
  grid-template-areas: none !important;
}

.bbnx-template,
.grid-main,
.bbnx-main.home {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  grid-template-columns: 1fr !important;
  background: transparent !important;
}

/* ============================================================
   2. OCULTAR AD IN-ARTICLE
   ============================================================ */
.bbnx-body > aside[data-ad-type="list"],
.bbnx-body aside[data-ad-type="list"],
aside[data-ad-type="list"],
.bbnx-body .advertising.rectangle.list {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* ============================================================
   3. ARTÍCULO INDIVIDUAL — .bbnx-opening
   ============================================================ */
.bbnx-opening,
.bbnx-opening.under_70,
.bbnx-opening.under_50,
.bbnx-opening.under_80,
.bbnx-opening.under_90,
.bbnx-opening.under_100 {
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 0 clamp(20px, 3vw, 32px) 0 !important;
  flex: 1 1 100% !important;
  grid-column: 1 / -1 !important;
}

.bbnx-opening > .header,
.bbnx-opening > .image,
.bbnx-opening > .footer {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Header card */
.bbnx-opening .header {
  position: relative !important;
  padding: clamp(20px, 3vw, 36px) clamp(20px, 3vw, 40px) !important;
  margin: 0 0 clamp(24px, 3vw, 36px) 0 !important;
  border: 1px solid rgba(212, 175, 55, 0.35) !important;
  background: linear-gradient(180deg, rgba(252, 211, 77, 0.06) 0%, transparent 40%),
              linear-gradient(180deg, rgba(13, 22, 42, 0.95), rgba(5, 8, 22, 0.98)) !important;
  border-radius: 0 !important;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.4) !important;
}
.bbnx-opening .header::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 14% !important;
  right: 14% !important;
  height: 2px !important;
  background: linear-gradient(90deg, transparent, rgba(252, 211, 77, 0.9), transparent) !important;
}

.bbnx-opening .title {
  margin: 0 0 14px 0 !important;
  color: #fff !important;
  font-family: "Bebas Neue", "Arial Narrow", Impact, sans-serif !important;
  font-size: clamp(28px, 4.4vw, 52px) !important;
  font-weight: 400 !important;
  line-height: 1.05 !important;
  letter-spacing: 0.012em !important;
  text-transform: uppercase !important;
  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.55) !important;
}

.bbnx-opening .subtitles .subtitle,
.bbnx-opening .subtitle {
  margin: 0 !important;
  color: rgba(253, 230, 138, 0.85) !important;
  font-family: "Inter", sans-serif !important;
  font-size: clamp(14px, 1.7vw, 17px) !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
  letter-spacing: 0.01em !important;
}

/* Imagen hero */
.bbnx-opening .image {
  position: relative !important;
  margin: 0 0 clamp(20px, 3vw, 30px) 0 !important;
  border: 1px solid rgba(212, 175, 55, 0.3) !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5) !important;
}
.bbnx-opening .image::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 14% !important;
  right: 14% !important;
  height: 2px !important;
  background: linear-gradient(90deg, transparent, rgba(252, 211, 77, 0.85), transparent) !important;
  z-index: 2 !important;
  pointer-events: none !important;
}
.bbnx-opening .image picture,
.bbnx-opening .image img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
}
.bbnx-opening .image .caption {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  padding: 12px 16px !important;
  background: linear-gradient(180deg, rgba(5, 8, 22, 0.85), rgba(5, 8, 22, 0.95)) !important;
  border-top: 1px solid rgba(212, 175, 55, 0.25) !important;
  color: rgba(255, 255, 255, 0.7) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
  line-height: 1.4 !important;
}
.bbnx-opening .image .caption .text { color: rgba(255, 255, 255, 0.85) !important; }
.bbnx-opening .image .caption .signature {
  color: #fcd34d !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  font-size: 10px !important;
}

/* Footer del header */
.bbnx-opening .footer {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px 24px !important;
  margin: 0 0 clamp(24px, 3vw, 36px) 0 !important;
  padding: 14px 18px !important;
  border-top: 1px solid rgba(212, 175, 55, 0.25) !important;
  border-bottom: 1px solid rgba(212, 175, 55, 0.25) !important;
  background: rgba(13, 22, 42, 0.55) !important;
}
.bbnx-opening .footer .authors,
.bbnx-opening .footer .author,
.bbnx-opening .footer .author-content {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.bbnx-opening .footer .author-content-name {
  color: #fcd34d !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
}
.bbnx-opening .footer .date .published {
  color: rgba(255, 255, 255, 0.55) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}

/* ============================================================
   4. SHARE BAR INLINE (footer del header)
   ============================================================ */
.bbnx-opening .footer .share-bar {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  flex-wrap: nowrap !important;
}
.bbnx-opening .footer .share-bar > li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
.bbnx-opening .footer .share-bar > li > a,
.bbnx-opening .footer .share-bar > li.more {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  height: 38px !important;
  border: 1px solid rgba(212, 175, 55, 0.55) !important;
  border-radius: 999px !important;
  background: rgba(5, 8, 22, 0.92) !important;
  color: #fcd34d !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35),
              inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
  transition: transform 0.25s ease, background 0.25s ease,
              border-color 0.25s ease, box-shadow 0.25s ease !important;
}
.bbnx-opening .footer .share-bar svg {
  width: 16px !important;
  height: 16px !important;
}
.bbnx-opening .footer .share-bar .facebook svg path[fill="#3b5998"] {
  fill: #fcd34d !important;
}
.bbnx-opening .footer .share-bar .twitter svg path {
  fill: #fff !important;
}
.bbnx-opening .footer .share-bar .whatsapp svg path[fill="#25d366"] {
  fill: #25d366 !important;
}
.bbnx-opening .footer .share-bar .link svg path,
.bbnx-opening .footer .share-bar .more svg path {
  fill: #fcd34d !important;
}

/* ============================================================
   5. SHARE BAR ÉPICA — sticky mobile
   ============================================================
   Botones sólidos con gradiente radial brand (Facebook azul,
   X negro, WhatsApp verde, Link/More dorado). Sin inner
   highlight blanco. Sin borde visible. Solo glow box-shadow
   con el color brand para sensación premium.
   ============================================================ */

.aside-bar.sticky,
section.aside-bar.sticky {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 14px clamp(12px, 3vw, 20px) !important;
  background: linear-gradient(180deg, rgba(5, 8, 22, 0.96), rgba(13, 22, 42, 0.94)) !important;
  border-top: 1px solid rgba(212, 175, 55, 0.4) !important;
  border-bottom: 1px solid rgba(212, 175, 55, 0.28) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.15) !important;
  backdrop-filter: blur(10px) saturate(1.15) !important;
  z-index: 100 !important;
  overflow: visible !important;
}
.aside-bar.sticky::before,
section.aside-bar.sticky::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 14% !important;
  right: 14% !important;
  height: 2px !important;
  background: linear-gradient(90deg, transparent, rgba(252, 211, 77, 0.95), transparent) !important;
  pointer-events: none !important;
}

.aside-bar.sticky .share-bar,
section.aside-bar.sticky .share-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  flex-wrap: nowrap !important;
}
.aside-bar.sticky .share-bar > li,
section.aside-bar.sticky .share-bar > li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

/* Botón base — círculo sólido sin highlight ni borde */
.aside-bar.sticky .share-bar > li > a,
.aside-bar.sticky .share-bar > li.more,
section.aside-bar.sticky .share-bar > li > a,
section.aside-bar.sticky .share-bar > li.more {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 999px !important;
  border: 0 !important;
  outline: none !important;
  overflow: hidden !important;
  isolation: isolate !important;
  transition: transform 0.22s cubic-bezier(0.2, 0.7, 0.2, 1),
              box-shadow 0.22s ease,
              filter 0.22s ease !important;
}

/* Eliminamos cualquier ::after que pueda generar recuadros raros */
.aside-bar.sticky .share-bar > li > a::after,
.aside-bar.sticky .share-bar > li.more::after,
section.aside-bar.sticky .share-bar > li > a::after,
section.aside-bar.sticky .share-bar > li.more::after,
.aside-bar.sticky .share-bar > li > a::before,
.aside-bar.sticky .share-bar > li.more::before,
section.aside-bar.sticky .share-bar > li > a::before,
section.aside-bar.sticky .share-bar > li.more::before {
  content: none !important;
  display: none !important;
}

.aside-bar.sticky .share-bar svg,
section.aside-bar.sticky .share-bar svg {
  position: relative !important;
  z-index: 1 !important;
  width: 22px !important;
  height: 22px !important;
}

/* ─── FACEBOOK ─────────────────────────────────────────── */
.aside-bar.sticky .share-bar .facebook > a,
section.aside-bar.sticky .share-bar .facebook > a {
  background: radial-gradient(circle at 30% 25%, #5b7bd6 0%, #4267B2 35%, #3b5998 65%, #2d4373 100%) !important;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35),
              0 10px 26px rgba(59, 89, 152, 0.55),
              inset 0 -3px 8px rgba(0, 0, 0, 0.22),
              inset 0 2px 4px rgba(255, 255, 255, 0.28) !important;
}
/* SOLO el path "F" (fill="#3b5998") se pone blanco. El path rect (sin fill) queda transparente */
.aside-bar.sticky .share-bar .facebook svg path[fill="#3b5998"],
section.aside-bar.sticky .share-bar .facebook svg path[fill="#3b5998"] {
  fill: #ffffff !important;
}

/* ─── TWITTER / X ──────────────────────────────────────── */
.aside-bar.sticky .share-bar .twitter > a,
section.aside-bar.sticky .share-bar .twitter > a {
  background: radial-gradient(circle at 30% 25%, #2a2a2a 0%, #0a0a0a 50%, #000 100%) !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12),
              0 10px 26px rgba(0, 0, 0, 0.7),
              inset 0 -3px 8px rgba(0, 0, 0, 0.4),
              inset 0 2px 4px rgba(255, 255, 255, 0.18) !important;
}
.aside-bar.sticky .share-bar .twitter svg path,
section.aside-bar.sticky .share-bar .twitter svg path {
  fill: #ffffff !important;
}

/* ─── WHATSAPP ─────────────────────────────────────────── */
.aside-bar.sticky .share-bar .whatsapp > a,
section.aside-bar.sticky .share-bar .whatsapp > a {
  background: radial-gradient(circle at 30% 25%, #4ee388 0%, #25d366 40%, #1ebe5b 70%, #128c7e 100%) !important;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3),
              0 10px 26px rgba(37, 211, 102, 0.6),
              inset 0 -3px 8px rgba(0, 0, 0, 0.18),
              inset 0 2px 4px rgba(255, 255, 255, 0.32) !important;
}
/* Path blanco outline → transparente; path verde → transparente; path teléfono interno → blanco */
.aside-bar.sticky .share-bar .whatsapp svg g path:nth-of-type(1),
section.aside-bar.sticky .share-bar .whatsapp svg g path:nth-of-type(1) {
  fill: transparent !important;
}
.aside-bar.sticky .share-bar .whatsapp svg path[fill="#25d366"],
section.aside-bar.sticky .share-bar .whatsapp svg path[fill="#25d366"] {
  fill: transparent !important;
}
.aside-bar.sticky .share-bar .whatsapp svg g path:last-of-type,
section.aside-bar.sticky .share-bar .whatsapp svg g path:last-of-type {
  fill: #ffffff !important;
}

/* ─── LINK (cadena) ────────────────────────────────────── */
.aside-bar.sticky .share-bar .link > a,
.aside-bar.sticky .share-bar .link > span,
section.aside-bar.sticky .share-bar .link > a,
section.aside-bar.sticky .share-bar .link > span {
  background: radial-gradient(circle at 30% 25%, #fff3b8 0%, #fde68a 30%, #fcd34d 60%, #d4af37 100%) !important;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25),
              0 10px 26px rgba(212, 175, 55, 0.6),
              inset 0 -3px 8px rgba(0, 0, 0, 0.18),
              inset 0 2px 4px rgba(255, 255, 255, 0.45) !important;
}
.aside-bar.sticky .share-bar .link svg path,
section.aside-bar.sticky .share-bar .link svg path {
  fill: #050816 !important;
}

/* ─── MORE (•••) ───────────────────────────────────────── */
.aside-bar.sticky .share-bar .more,
section.aside-bar.sticky .share-bar .more {
  background: radial-gradient(circle at 30% 25%, #fff3b8 0%, #fde68a 30%, #fcd34d 60%, #d4af37 100%) !important;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25),
              0 10px 26px rgba(212, 175, 55, 0.6),
              inset 0 -3px 8px rgba(0, 0, 0, 0.18),
              inset 0 2px 4px rgba(255, 255, 255, 0.45) !important;
}
.aside-bar.sticky .share-bar .more svg path,
section.aside-bar.sticky .share-bar .more svg path {
  fill: #050816 !important;
}

/* Hover / active */
.aside-bar.sticky .share-bar > li > a:hover,
.aside-bar.sticky .share-bar > li.more:hover,
section.aside-bar.sticky .share-bar > li > a:hover,
section.aside-bar.sticky .share-bar > li.more:hover {
  transform: translateY(-3px) scale(1.06) !important;
  filter: brightness(1.08) saturate(1.08) !important;
}
.aside-bar.sticky .share-bar > li > a:active,
.aside-bar.sticky .share-bar > li.more:active,
section.aside-bar.sticky .share-bar > li > a:active,
section.aside-bar.sticky .share-bar > li.more:active {
  transform: scale(0.92) !important;
}

/* ============================================================
   6. CUERPO DEL ARTÍCULO — .bbnx-body
   ============================================================ */
.bbnx-body {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  color: rgba(255, 255, 255, 0.88) !important;
  font-size: clamp(15px, 1.6vw, 17px) !important;
  line-height: 1.78 !important;
  grid-column: 1 / -1 !important;
}
.bbnx-body p {
  margin: 0 0 1.1em 0 !important;
  color: rgba(255, 255, 255, 0.86) !important;
}
.bbnx-body p strong {
  color: #fff !important;
  font-weight: 800 !important;
}
.bbnx-body .place {
  display: inline-block !important;
  padding: 3px 10px !important;
  margin-right: 8px !important;
  border-radius: 999px !important;
  background: rgba(252, 211, 77, 0.16) !important;
  color: #fcd34d !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  line-height: 1.4 !important;
}
.bbnx-body a {
  color: #fcd34d !important;
  text-decoration: none !important;
  background-image: linear-gradient(90deg, rgba(252, 211, 77, 0.55), rgba(252, 211, 77, 0.55)) !important;
  background-repeat: no-repeat !important;
  background-position: 0 100% !important;
  background-size: 100% 1px !important;
  transition: color 0.25s ease, background-size 0.25s ease !important;
}
.bbnx-body a:hover {
  color: #fde68a !important;
  background-size: 100% 2px !important;
}
.bbnx-body a strong { color: inherit !important; }

.bbnx-body h2,
.bbnx-body .heading {
  margin: 1.6em 0 0.6em 0 !important;
  padding-bottom: 10px !important;
  border-bottom: 1px solid rgba(212, 175, 55, 0.3) !important;
  color: #fff !important;
  font-family: "Bebas Neue", sans-serif !important;
  font-size: clamp(22px, 2.4vw, 28px) !important;
  font-weight: 400 !important;
  letter-spacing: 0.02em !important;
  line-height: 1.15 !important;
  text-transform: uppercase !important;
}
.bbnx-body h2 strong,
.bbnx-body .heading strong {
  color: #fcd34d !important;
  font-weight: 400 !important;
}

/* ============================================================
   7. EMBEDS REDES SOCIALES — sin badge flotante
   ============================================================ */
.bbnx-body .embed,
.bbnx-body .embed-rrss {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  max-width: 620px !important;
  margin: clamp(28px, 4vw, 44px) auto !important;
  padding: clamp(16px, 2.2vw, 22px) clamp(14px, 2vw, 18px) !important;
  border: 1px solid rgba(212, 175, 55, 0.42) !important;
  border-radius: 0 !important;
  background: linear-gradient(180deg, rgba(13, 22, 42, 0.94), rgba(5, 8, 22, 0.98)) !important;
  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.55),
              0 0 0 1px rgba(212, 175, 55, 0.08) !important;
  isolation: isolate !important;
}
.bbnx-body .embed::before,
.bbnx-body .embed-rrss::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 14% !important;
  right: 14% !important;
  height: 2px !important;
  background: linear-gradient(90deg, transparent, rgba(252, 211, 77, 0.95), transparent) !important;
  pointer-events: none !important;
  z-index: 2 !important;
}
/* Sin badge flotante */
.bbnx-body .embed::after,
.bbnx-body .embed-rrss::after {
  content: none !important;
  display: none !important;
}

.bbnx-body .embed-container {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  margin: 0 auto !important;
}
.bbnx-body .embed iframe,
.bbnx-body .embed-rrss iframe,
.bbnx-body .embed iframe.instagram-media,
.bbnx-body .embed-rrss iframe.instagram-media {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 280px !important;
  margin: 0 auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45),
              0 0 0 1px rgba(212, 175, 55, 0.18) !important;
}

/* ============================================================
   8. NEWSLETTER MODULE — centrado
   ============================================================ */
.newsletter-module {
  position: relative !important;
  width: 100% !important;
  max-width: 720px !important;
  margin: 36px auto !important;
  padding: clamp(22px, 2.6vw, 32px) clamp(18px, 2.4vw, 32px) !important;
  border: 1px solid rgba(212, 175, 55, 0.4) !important;
  background: linear-gradient(180deg, rgba(252, 211, 77, 0.06), transparent 40%),
              linear-gradient(180deg, rgba(13, 22, 42, 0.95), rgba(5, 8, 22, 0.98)) !important;
  border-radius: 0 !important;
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.5) !important;
}
.newsletter-module::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 14% !important;
  right: 14% !important;
  height: 2px !important;
  background: linear-gradient(90deg, transparent, rgba(252, 211, 77, 0.9), transparent) !important;
}
.newsletter-module-header,
.newsletter-module-title {
  display: block !important;
  margin-bottom: 14px !important;
  color: #fff !important;
  font-family: "Bebas Neue", sans-serif !important;
  font-size: clamp(20px, 2.4vw, 28px) !important;
  font-weight: 400 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  text-align: center !important;
}
.newsletter-module-title2 {
  display: block !important;
  margin: 18px 0 12px !important;
  color: rgba(253, 230, 138, 0.85) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  text-align: center !important;
}
.newsletter-module-form__wrapper {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}
.newsletter-module-inputs {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 10px 20px !important;
}

/* Inputs / labels */
.bbnx-input-text__label,
.bbnx-input-checkbox__label,
.bbnx-input-radio__label {
  color: rgba(255, 255, 255, 0.78) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}
.bbnx-input-text__input {
  width: 100% !important;
  padding: 14px 16px !important;
  background: rgba(5, 8, 22, 0.85) !important;
  border: 1px solid rgba(212, 175, 55, 0.35) !important;
  border-radius: 0 !important;
  color: #fff !important;
  font-size: 14px !important;
  font-family: inherit !important;
  outline: none !important;
  transition: border-color 0.25s ease, box-shadow 0.25s ease !important;
}
.bbnx-input-text__input::placeholder { color: rgba(255, 255, 255, 0.4) !important; }
.bbnx-input-text__input:focus {
  border-color: #fcd34d !important;
  box-shadow: 0 0 0 3px rgba(252, 211, 77, 0.15) !important;
}

.bbnx-input-checkbox__check,
.bbnx-input-radio__check {
  width: 18px !important;
  height: 18px !important;
  background: rgba(5, 8, 22, 0.85) !important;
  border: 1px solid rgba(212, 175, 55, 0.45) !important;
  border-radius: 0 !important;
}
.bbnx-input-checkbox__input:checked + .bbnx-input-checkbox__check,
.bbnx-input-radio__input:checked + .bbnx-input-radio__check {
  background: #fcd34d !important;
  border-color: #fcd34d !important;
}

/* Botón submit */
.newsletter-module .bbnx-btn,
.bbnx-modal-window .bbnx-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 8px auto 0 !important;
  padding: 14px 28px !important;
  border: 2px solid #f4d76b !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, #fde68a 0%, #fcd34d 35%, #d4af37 75%, #b8941f 100%) !important;
  color: #050816 !important;
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  box-shadow: 0 10px 24px rgba(212, 175, 55, 0.5),
              inset 0 2px 0 rgba(255, 255, 255, 0.5),
              inset 0 -3px 0 rgba(0, 0, 0, 0.2) !important;
  transition: transform 0.25s ease, filter 0.25s ease !important;
}
.newsletter-module .bbnx-btn:hover,
.bbnx-modal-window .bbnx-btn:hover {
  transform: translateY(-2px) !important;
  filter: brightness(1.06) saturate(1.05) !important;
}
.newsletter-module .bbnx-btn.disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  filter: saturate(0.6) !important;
}

/* Modal */
.bbnx-modal-window__box {
  background: linear-gradient(180deg, #0d162a, #050816) !important;
  border: 1px solid rgba(212, 175, 55, 0.4) !important;
  border-radius: 0 !important;
  color: #fff !important;
}
.bbnx-modal-window__title,
.bbnx-modal-window__content { color: #fff !important; }
.bbnx-modal-window__close { color: #fcd34d !important; }
.bbnx-modal-window__close svg path { fill: #fcd34d !important; }

/* ============================================================
   9. TAGS AL PIE
   ============================================================ */
.bbnx-tags {
  width: 100% !important;
  max-width: 100% !important;
  margin: 36px 0 0 0 !important;
  padding: 22px clamp(16px, 2.2vw, 26px) !important;
  border-top: 1px solid rgba(212, 175, 55, 0.3) !important;
  grid-column: 1 / -1 !important;
}
.bbnx-tags-title {
  display: block !important;
  margin: 0 0 14px 0 !important;
  color: #fcd34d !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: 0.3em !important;
  text-transform: uppercase !important;
  font-family: "Inter", sans-serif !important;
}
.bbnx-tags-wrapper {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}
.bbnx-tags-wrapper .tag,
.bbnx-tags .tag {
  display: inline-flex !important;
  align-items: center !important;
  padding: 7px 14px !important;
  border: 1px solid rgba(212, 175, 55, 0.4) !important;
  border-radius: 999px !important;
  background: rgba(252, 211, 77, 0.08) !important;
  color: #fde68a !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  background-image: none !important;
  transition: background 0.25s ease, transform 0.25s ease, border-color 0.25s ease !important;
}
.bbnx-tags-wrapper .tag:hover,
.bbnx-tags .tag:hover {
  background: rgba(252, 211, 77, 0.2) !important;
  border-color: rgba(252, 211, 77, 0.75) !important;
  color: #fff !important;
  transform: translateY(-2px) !important;
}

/* ============================================================
   10. LISTADO DE NOTAS — article.content.text-side
   ============================================================ */
.content-list {
  display: block !important;
  width: 100% !important;
}
.content-list-content {
  display: flex !important;
  flex-direction: column !important;
  gap: clamp(14px, 2vw, 22px) !important;
}

article.content.text-side,
.content-list-content > article.content {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(220px, 38%) 1fr !important;
  gap: clamp(16px, 2.4vw, 28px) !important;
  align-items: stretch !important;
  width: 100% !important;
  margin: 0 !important;
  padding: clamp(14px, 2vw, 20px) !important;
  border: 1px solid rgba(212, 175, 55, 0.32) !important;
  border-radius: 0 !important;
  background: linear-gradient(180deg, rgba(252, 211, 77, 0.05) 0%, transparent 35%),
              linear-gradient(180deg, rgba(13, 22, 42, 0.95), rgba(5, 8, 22, 0.98)) !important;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.38) !important;
  overflow: hidden !important;
  isolation: isolate !important;
  cursor: pointer !important;
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1),
              border-color 0.3s ease, box-shadow 0.3s ease !important;
}
article.content.text-side::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 14% !important;
  right: 14% !important;
  height: 2px !important;
  background: linear-gradient(90deg, transparent, rgba(252, 211, 77, 0.9), transparent) !important;
  z-index: 2 !important;
  pointer-events: none !important;
}
article.content.text-side:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(252, 211, 77, 0.65) !important;
  box-shadow: 0 22px 44px rgba(0, 0, 0, 0.5),
              0 0 0 1px rgba(252, 211, 77, 0.18) !important;
}

article.content.text-side .multimedia {
  position: relative !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(212, 175, 55, 0.25) !important;
  background: #050816 !important;
}
article.content.text-side .multimedia a,
article.content.text-side .multimedia .empty-div {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
article.content.text-side .multimedia picture,
article.content.text-side .multimedia img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  object-fit: cover !important;
  aspect-ratio: 16 / 9 !important;
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1), filter 0.45s ease !important;
}
article.content.text-side:hover .multimedia img {
  transform: scale(1.06) !important;
  filter: brightness(1.05) saturate(1.08) !important;
}
article.content.text-side .multimedia::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(180deg, rgba(5, 8, 22, 0) 60%, rgba(5, 8, 22, 0.55) 100%) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

article.content.text-side .content-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  min-width: 0 !important;
  padding: 4px 4px 4px 0 !important;
}
article.content.text-side .content-info .date {
  display: inline-flex !important;
  align-self: flex-start !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 5px 12px !important;
  border: 1px solid rgba(212, 175, 55, 0.4) !important;
  border-radius: 999px !important;
  background: rgba(252, 211, 77, 0.1) !important;
  color: #fcd34d !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
}
article.content.text-side .content-info .date::before {
  content: "" !important;
  display: inline-block !important;
  width: 5px !important;
  height: 5px !important;
  background: #fcd34d !important;
  transform: rotate(45deg) !important;
  box-shadow: 0 0 8px rgba(252, 211, 77, 0.6) !important;
}
article.content.text-side .content-info .title,
article.content.text-side .content-info a.title {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  text-decoration: none !important;
  background: none !important;
  color: inherit !important;
}
article.content.text-side .content-info .title h2,
article.content.text-side .content-info a.title h2 {
  margin: 0 !important;
  color: #fff !important;
  font-family: "Bebas Neue", "Arial Narrow", Impact, sans-serif !important;
  font-size: clamp(18px, 2.4vw, 26px) !important;
  font-weight: 400 !important;
  line-height: 1.1 !important;
  letter-spacing: 0.014em !important;
  text-transform: uppercase !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5) !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  transition: color 0.25s ease !important;
}
article.content.text-side:hover .content-info .title h2,
article.content.text-side:hover .content-info a.title h2 {
  color: #fde68a !important;
}
article.content.text-side .content-info .description {
  margin: 0 !important;
  color: rgba(255, 255, 255, 0.68) !important;
  font-family: "Inter", sans-serif !important;
  font-size: clamp(13px, 1.5vw, 15px) !important;
  font-weight: 500 !important;
  line-height: 1.55 !important;
  letter-spacing: 0.005em !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
article.content.text-side .content-info::after {
  content: "Leer nota →" !important;
  display: inline-flex !important;
  align-self: flex-start !important;
  margin-top: 6px !important;
  padding: 6px 14px !important;
  border: 1px solid rgba(212, 175, 55, 0.35) !important;
  border-radius: 999px !important;
  color: #fcd34d !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  transition: background 0.25s ease, transform 0.25s ease, border-color 0.25s ease !important;
}
article.content.text-side:hover .content-info::after {
  background: rgba(252, 211, 77, 0.18) !important;
  border-color: rgba(252, 211, 77, 0.7) !important;
  transform: translateX(4px) !important;
}

/* ============================================================
   11. SELECCIÓN DE TEXTO
   ============================================================ */
.bbnx-main ::selection,
.bbnx-opening ::selection,
.bbnx-body ::selection,
article.content ::selection {
  background: rgba(252, 211, 77, 0.35) !important;
  color: #fff !important;
}

/* ============================================================
   12. DESKTOP ≥1100px
   ============================================================ */
@media (min-width: 1100px) {
  .bbnx-opening > .header {
    padding: clamp(32px, 3.4vw, 48px) clamp(36px, 3.6vw, 56px) !important;
  }
  .bbnx-opening > .header .title {
    font-size: clamp(36px, 3.6vw, 56px) !important;
  }
  .bbnx-opening > .image {
    margin-bottom: 0 !important;
  }
  .bbnx-opening > .image img {
    max-height: 640px !important;
    object-fit: cover !important;
  }
  .bbnx-body {
    font-size: 17px !important;
    line-height: 1.8 !important;
  }
  .bbnx-body > p {
    max-width: 780px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .bbnx-body > h2,
  .bbnx-body > .heading {
    max-width: 880px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .bbnx-body > .newsletter-module {
    max-width: 720px !important;
  }
  .bbnx-body > .embed,
  .bbnx-body > .embed-rrss {
    max-width: 620px !important;
  }
}

/* ============================================================
   13. DESKTOP XL ≥1440px
   ============================================================ */
@media (min-width: 1440px) {
  #content-body.bbnx-main,
  .bbnx-main.grid,
  main.bbnx-main {
    max-width: 1280px !important;
  }
}

/* ============================================================
   14. MOBILE ≤780px
   ============================================================ */
@media (max-width: 780px) {
  #content-body.bbnx-main,
  .bbnx-main,
  main.bbnx-main {
    padding: 18px 14px !important;
  }
  .bbnx-opening .header {
    padding: 18px 16px !important;
  }
  .bbnx-opening .footer {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
    padding: 12px 14px !important;
  }
  .bbnx-opening .footer .share-bar,
  .bbnx-opening .footer .aside-bar {
    width: 100% !important;
    justify-content: flex-start !important;
  }
  .bbnx-body h2,
  .bbnx-body .heading {
    font-size: 20px !important;
  }
  .newsletter-module {
    padding: 18px 14px !important;
  }
  .newsletter-module-inputs {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }
  .bbnx-tags {
    padding: 18px 14px !important;
  }
  .bbnx-body .embed,
  .bbnx-body .embed-rrss {
    margin: 28px auto !important;
    padding: 18px 12px 14px !important;
  }
  article.content.text-side,
  .content-list-content > article.content {
    grid-template-columns: 1fr !important;
    padding: 12px !important;
    gap: 14px !important;
  }
  article.content.text-side .multimedia,
  article.content.text-side .multimedia picture,
  article.content.text-side .multimedia img {
    aspect-ratio: 16 / 9 !important;
  }
  article.content.text-side .content-info {
    padding: 0 !important;
    gap: 8px !important;
  }
  article.content.text-side .content-info .title h2 {
    font-size: 19px !important;
    -webkit-line-clamp: 3 !important;
  }
  article.content.text-side .content-info .description {
    font-size: 13px !important;
    -webkit-line-clamp: 2 !important;
  }
  article.content.text-side .content-info::after {
    padding: 5px 12px !important;
    font-size: 9px !important;
    letter-spacing: 0.2em !important;
  }
}

/* ============================================================
   15. MOBILE ≤420px
   ============================================================ */
@media (max-width: 420px) {
  article.content.text-side,
  .content-list-content > article.content {
    padding: 10px !important;
  }
  article.content.text-side .content-info .date {
    padding: 4px 10px !important;
    font-size: 9px !important;
    letter-spacing: 0.22em !important;
  }
  article.content.text-side .content-info .title h2 {
    font-size: 17px !important;
  }
  .aside-bar.sticky .share-bar > li > a,
  .aside-bar.sticky .share-bar > li.more,
  section.aside-bar.sticky .share-bar > li > a,
  section.aside-bar.sticky .share-bar > li.more {
    width: 44px !important;
    height: 44px !important;
  }
  .aside-bar.sticky .share-bar svg,
  section.aside-bar.sticky .share-bar svg {
    width: 20px !important;
    height: 20px !important;
  }
  .aside-bar.sticky .share-bar,
  section.aside-bar.sticky .share-bar {
    gap: 10px !important;
  }
}

/* ============================================================
   FIN · article-fwc.css v3.0
   ============================================================ */

   /* ============================================================
   FIX v3.1 · Nuke de rectángulos detrás de los share icons sticky
   ============================================================
   Los <li class="aside-bar-icon"> y <span class="icon"> del CMS
   de TVN traen background/padding/border base. Acá los aplanamos
   para que el círculo brand sea lo único visible.
   ============================================================ */

/* Wrappers padres — transparentes, sin border, sin outline, sin padding */
.aside-bar.sticky .share-bar > li,
.aside-bar.sticky .share-bar > li.aside-bar-icon,
.aside-bar.sticky .share-bar .icon,
.aside-bar.sticky .share-bar > li > a > .icon,
.aside-bar.sticky .share-bar > li > a > span,
.aside-bar.sticky .share-bar > li.more > .icon,
.aside-bar.sticky .share-bar > li.more > span,
section.aside-bar.sticky .share-bar > li,
section.aside-bar.sticky .share-bar > li.aside-bar-icon,
section.aside-bar.sticky .share-bar .icon,
section.aside-bar.sticky .share-bar > li > a > .icon,
section.aside-bar.sticky .share-bar > li > a > span,
section.aside-bar.sticky .share-bar > li.more > .icon,
section.aside-bar.sticky .share-bar > li.more > span {
  background: transparent !important;
  background-image: none !important;
  background-color: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}

/* El span.icon debe seguir centrando el SVG */
.aside-bar.sticky .share-bar .icon,
.aside-bar.sticky .share-bar > li > a > .icon,
.aside-bar.sticky .share-bar > li > a > span,
.aside-bar.sticky .share-bar > li.more > .icon,
.aside-bar.sticky .share-bar > li.more > span,
section.aside-bar.sticky .share-bar .icon,
section.aside-bar.sticky .share-bar > li > a > .icon,
section.aside-bar.sticky .share-bar > li > a > span,
section.aside-bar.sticky .share-bar > li.more > .icon,
section.aside-bar.sticky .share-bar > li.more > span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  height: auto !important;
}

/* Pseudo-elementos en padres — anulados */
.aside-bar.sticky .share-bar > li::before,
.aside-bar.sticky .share-bar > li::after,
.aside-bar.sticky .share-bar > li.aside-bar-icon::before,
.aside-bar.sticky .share-bar > li.aside-bar-icon::after,
.aside-bar.sticky .share-bar .icon::before,
.aside-bar.sticky .share-bar .icon::after,
section.aside-bar.sticky .share-bar > li::before,
section.aside-bar.sticky .share-bar > li::after,
section.aside-bar.sticky .share-bar > li.aside-bar-icon::before,
section.aside-bar.sticky .share-bar > li.aside-bar-icon::after,
section.aside-bar.sticky .share-bar .icon::before,
section.aside-bar.sticky .share-bar .icon::after {
  content: none !important;
  display: none !important;
  background: none !important;
  border: 0 !important;
}

/* Focus ring y tap highlight — invisibles (el glow del button los reemplaza) */
.aside-bar.sticky .share-bar > li > a,
.aside-bar.sticky .share-bar > li.more,
section.aside-bar.sticky .share-bar > li > a,
section.aside-bar.sticky .share-bar > li.more {
  -webkit-tap-highlight-color: transparent !important;
  text-decoration: none !important;
}
.aside-bar.sticky .share-bar > li > a:focus,
.aside-bar.sticky .share-bar > li > a:focus-visible,
.aside-bar.sticky .share-bar > li > a:active,
.aside-bar.sticky .share-bar > li.more:focus,
.aside-bar.sticky .share-bar > li.more:focus-visible,
section.aside-bar.sticky .share-bar > li > a:focus,
section.aside-bar.sticky .share-bar > li > a:focus-visible,
section.aside-bar.sticky .share-bar > li > a:active,
section.aside-bar.sticky .share-bar > li.more:focus,
section.aside-bar.sticky .share-bar > li.more:focus-visible {
  outline: 0 !important;
  outline-offset: 0 !important;
  border: 0 !important;
}

/* También aplica al inline footer share-bar */
.bbnx-opening .footer .share-bar > li,
.bbnx-opening .footer .share-bar > li.aside-bar-icon,
.bbnx-opening .footer .share-bar .icon,
.bbnx-opening .footer .share-bar > li > a > .icon,
.bbnx-opening .footer .share-bar > li > a > span,
.bbnx-opening .footer .share-bar > li.more > .icon,
.bbnx-opening .footer .share-bar > li.more > span {
  background: transparent !important;
  background-image: none !important;
  background-color: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.bbnx-opening .footer .share-bar .icon,
.bbnx-opening .footer .share-bar > li > a > .icon,
.bbnx-opening .footer .share-bar > li > a > span,
.bbnx-opening .footer .share-bar > li.more > .icon,
.bbnx-opening .footer .share-bar > li.more > span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  height: auto !important;
}
.bbnx-opening .footer .share-bar > li::before,
.bbnx-opening .footer .share-bar > li::after,
.bbnx-opening .footer .share-bar > li.aside-bar-icon::before,
.bbnx-opening .footer .share-bar > li.aside-bar-icon::after {
  content: none !important;
  display: none !important;
}

/* ============================================================
   FIX v3.4 · Sticky bar transparente — solo flotan los 3 botones
   ============================================================
   El sticky bar tenía:
   - Fondo navy con gradiente que cubría todo el ancho
   - Border dorado top/bottom
   - Beam dorado (::before)
   - Backdrop-filter blur
   - z-index 100

   Todo eso es lo que TAPA la pauta. Lo desactivamos. Quedan solo
   los 3 botones circulares (Facebook, X, WhatsApp) con su brand
   color + glow, flotando sobre la pauta sin tapar.

   NO TOCAMOS LA PAUTA. Solo neutralizamos el contenedor del bar.
   ============================================================ */

.aside-bar.sticky,
section.aside-bar.sticky {
  background: transparent !important;
  background-image: none !important;
  background-color: transparent !important;
  border: 0 !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
  z-index: 0 !important;
  padding: 8px clamp(12px, 3vw, 20px) !important;
}

/* Sin beam dorado ni ningún pseudo-elemento decorativo */
.aside-bar.sticky::before,
.aside-bar.sticky::after,
section.aside-bar.sticky::before,
section.aside-bar.sticky::after {
  content: none !important;
  display: none !important;
  background: none !important;
}

/* ============================================================
   FIX v3.5 · Brand colors para el aside-bar desktop (inline)
   ============================================================
   El selector .aside-bar (sin .sticky) target la versión inline
   del footer del artículo en desktop. Mismo tratamiento épico
   que la sticky mobile: gradiente brand + glow + sin border ni
   recuadros raros.
   ============================================================ */

/* Contenedor inline — transparente, sin border, padding mínimo */
section.aside-bar:not(.sticky),
.aside-bar:not(.sticky) {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  padding: 0 !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}
section.aside-bar:not(.sticky)::before,
section.aside-bar:not(.sticky)::after,
.aside-bar:not(.sticky)::before,
.aside-bar:not(.sticky)::after {
  content: none !important;
  display: none !important;
}

/* Share bar — flex row, sin padding/margin del CMS */
section.aside-bar .share-bar,
.aside-bar .share-bar {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  flex-wrap: nowrap !important;
}
section.aside-bar .share-bar > li,
.aside-bar .share-bar > li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  background: transparent !important;
  border: 0 !important;
}

/* Botón base — círculo brand 40px en desktop, 48px en sticky mobile */
section.aside-bar .share-bar > li > a,
section.aside-bar .share-bar > li.more,
.aside-bar .share-bar > li > a,
.aside-bar .share-bar > li.more {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 999px !important;
  border: 0 !important;
  outline: none !important;
  overflow: hidden !important;
  isolation: isolate !important;
  text-decoration: none !important;
  background-image: none !important;
  -webkit-tap-highlight-color: transparent !important;
  transition: transform 0.22s cubic-bezier(0.2, 0.7, 0.2, 1),
              box-shadow 0.22s ease,
              filter 0.22s ease !important;
}
.aside-bar.sticky .share-bar > li > a,
.aside-bar.sticky .share-bar > li.more,
section.aside-bar.sticky .share-bar > li > a,
section.aside-bar.sticky .share-bar > li.more {
  width: 48px !important;
  height: 48px !important;
}

/* SVG dentro */
section.aside-bar .share-bar svg,
.aside-bar .share-bar svg {
  position: relative !important;
  z-index: 1 !important;
  width: 18px !important;
  height: 18px !important;
}
section.aside-bar.sticky .share-bar svg,
.aside-bar.sticky .share-bar svg {
  width: 22px !important;
  height: 22px !important;
}

/* Pseudo-elementos en padres — nuke */
section.aside-bar .share-bar > li::before,
section.aside-bar .share-bar > li::after,
section.aside-bar .share-bar > li > a::before,
section.aside-bar .share-bar > li > a::after,
section.aside-bar .share-bar > li.more::before,
section.aside-bar .share-bar > li.more::after,
.aside-bar .share-bar > li::before,
.aside-bar .share-bar > li::after,
.aside-bar .share-bar > li > a::before,
.aside-bar .share-bar > li > a::after,
.aside-bar .share-bar > li.more::before,
.aside-bar .share-bar > li.more::after {
  content: none !important;
  display: none !important;
}

/* Wrapper .icon (span) — sin estilos del CMS */
section.aside-bar .share-bar .icon,
.aside-bar .share-bar .icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  width: auto !important;
  height: auto !important;
}

/* ─── FACEBOOK ─────────────────────────────────────────── */
section.aside-bar .share-bar .facebook > a,
.aside-bar .share-bar .facebook > a {
  background: radial-gradient(circle at 30% 25%, #5b7bd6 0%, #4267B2 35%, #3b5998 65%, #2d4373 100%) !important;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35),
              0 8px 22px rgba(59, 89, 152, 0.55),
              inset 0 -3px 8px rgba(0, 0, 0, 0.22),
              inset 0 2px 4px rgba(255, 255, 255, 0.28) !important;
}
section.aside-bar .share-bar .facebook svg path[fill="#3b5998"],
.aside-bar .share-bar .facebook svg path[fill="#3b5998"] {
  fill: #ffffff !important;
}

/* ─── TWITTER / X ──────────────────────────────────────── */
section.aside-bar .share-bar .twitter > a,
.aside-bar .share-bar .twitter > a {
  background: radial-gradient(circle at 30% 25%, #2a2a2a 0%, #0a0a0a 50%, #000 100%) !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12),
              0 8px 22px rgba(0, 0, 0, 0.7),
              inset 0 -3px 8px rgba(0, 0, 0, 0.4),
              inset 0 2px 4px rgba(255, 255, 255, 0.18) !important;
}
section.aside-bar .share-bar .twitter svg path,
.aside-bar .share-bar .twitter svg path {
  fill: #ffffff !important;
}

/* ─── WHATSAPP ─────────────────────────────────────────── */
section.aside-bar .share-bar .whatsapp > a,
.aside-bar .share-bar .whatsapp > a {
  background: radial-gradient(circle at 30% 25%, #4ee388 0%, #25d366 40%, #1ebe5b 70%, #128c7e 100%) !important;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3),
              0 8px 22px rgba(37, 211, 102, 0.6),
              inset 0 -3px 8px rgba(0, 0, 0, 0.18),
              inset 0 2px 4px rgba(255, 255, 255, 0.32) !important;
}
/* WhatsApp: outline blanco grande → transparente; verde central → transparente; teléfono interno → blanco */
section.aside-bar .share-bar .whatsapp svg g path:nth-of-type(1),
.aside-bar .share-bar .whatsapp svg g path:nth-of-type(1) {
  fill: transparent !important;
}
section.aside-bar .share-bar .whatsapp svg path[fill="#25d366"],
.aside-bar .share-bar .whatsapp svg path[fill="#25d366"] {
  fill: transparent !important;
}
section.aside-bar .share-bar .whatsapp svg g path:last-of-type,
.aside-bar .share-bar .whatsapp svg g path:last-of-type {
  fill: #ffffff !important;
}

/* ─── LINK (cadena) ────────────────────────────────────── */
section.aside-bar .share-bar .link > a,
section.aside-bar .share-bar .link > span,
.aside-bar .share-bar .link > a,
.aside-bar .share-bar .link > span {
  background: radial-gradient(circle at 30% 25%, #fff3b8 0%, #fde68a 30%, #fcd34d 60%, #d4af37 100%) !important;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25),
              0 8px 22px rgba(212, 175, 55, 0.6),
              inset 0 -3px 8px rgba(0, 0, 0, 0.18),
              inset 0 2px 4px rgba(255, 255, 255, 0.45) !important;
}
section.aside-bar .share-bar .link svg path,
.aside-bar .share-bar .link svg path {
  fill: #050816 !important;
}

/* ─── MORE (•••) ───────────────────────────────────────── */
section.aside-bar .share-bar .more,
.aside-bar .share-bar .more {
  background: radial-gradient(circle at 30% 25%, #fff3b8 0%, #fde68a 30%, #fcd34d 60%, #d4af37 100%) !important;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25),
              0 8px 22px rgba(212, 175, 55, 0.6),
              inset 0 -3px 8px rgba(0, 0, 0, 0.18),
              inset 0 2px 4px rgba(255, 255, 255, 0.45) !important;
}
section.aside-bar .share-bar .more svg path,
.aside-bar .share-bar .more svg path {
  fill: #050816 !important;
}

/* Hover / active — válido en desktop y mobile */
section.aside-bar .share-bar > li > a:hover,
section.aside-bar .share-bar > li.more:hover,
.aside-bar .share-bar > li > a:hover,
.aside-bar .share-bar > li.more:hover {
  transform: translateY(-3px) scale(1.06) !important;
  filter: brightness(1.08) saturate(1.08) !important;
}
section.aside-bar .share-bar > li > a:active,
section.aside-bar .share-bar > li.more:active,
.aside-bar .share-bar > li > a:active,
.aside-bar .share-bar > li.more:active {
  transform: scale(0.92) !important;
}

/* Focus reset (sin outline cuadrado) */
section.aside-bar .share-bar > li > a:focus,
section.aside-bar .share-bar > li > a:focus-visible,
section.aside-bar .share-bar > li.more:focus,
section.aside-bar .share-bar > li.more:focus-visible,
.aside-bar .share-bar > li > a:focus,
.aside-bar .share-bar > li > a:focus-visible,
.aside-bar .share-bar > li.more:focus,
.aside-bar .share-bar > li.more:focus-visible {
  outline: 0 !important;
  outline-offset: 0 !important;
}