:root {
  color-scheme: light !important;
  --bg-body: #ffffff !important;
  --bg: #ffffff !important;
  --bg-sidebar: #ffffff !important;
  --sidebar: #ffffff !important;
  --side: #ffffff !important;
  --bg-card: #ffffff !important;
  --text-main: #0a0a0a !important;
  --text: #0a0a0a !important;
  --text-lead: #343434 !important;
  --lead: #343434 !important;
  --text-muted: #696969 !important;
  --muted: #696969 !important;
  --border-color: #e3e3e3 !important;
  --border: #e3e3e3 !important;
  --bg-hover: #f3f3f3 !important;
  --hover: #f3f3f3 !important;
}

html, body {
  background: #fff !important;
  color: #0a0a0a !important;
  font-family: Arial, Helvetica, ui-sans-serif, system-ui, -apple-system, sans-serif !important;
  -webkit-font-smoothing: antialiased;
}

.layout-wrapper {
  display: block !important;
  min-height: 100vh !important;
}

/* La navegación lateral desaparece en todo el blog. */
.sidebar,
.sidebar-overlay,
.menu-btn,
.close-menu-btn {
  display: none !important;
}

.content-area {
  width: 100% !important;
  min-width: 0 !important;
  display: block !important;
}

.topbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 80 !important;
  width: 100% !important;
  height: 72px !important;
  min-height: 72px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 clamp(20px, 2.2vw, 40px) !important;
  border-bottom: 1px solid #e8e8e8 !important;
  background: rgba(255,255,255,.94) !important;
  backdrop-filter: blur(18px) !important;
  box-shadow: none !important;
}

.topbar__left { display: flex !important; align-items: center !important; gap: 0 !important; }
.brand {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  color: #090909 !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  letter-spacing: -.035em !important;
}
.brand img { width: 28px !important; height: 28px !important; border-radius: 7px !important; }
.brand__text { display: inline !important; }

.main-container.article-view {
  width: 100% !important;
  max-width: none !important;
  margin: 0 auto !important;
  padding: clamp(72px, 9vw, 132px) 24px 130px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

.article-hero {
  width: min(1220px, 100%) !important;
  max-width: 1220px !important;
  margin: 0 auto clamp(52px, 7vw, 88px) !important;
  padding: 0 !important;
  text-align: center !important;
}

.hero-meta {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin: 0 0 30px !important;
  color: #686868 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.hero-meta .dot { color: #a0a0a0 !important; }
.hero-meta .meta-tag {
  color: #686868 !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.hero-title,
.article-hero h1 {
  max-width: 1180px !important;
  margin: 0 auto !important;
  color: #090909 !important;
  font-size: clamp(50px, 7.2vw, 100px) !important;
  font-weight: 500 !important;
  line-height: .98 !important;
  letter-spacing: -.058em !important;
  text-wrap: balance;
}

.hero-lead {
  max-width: 760px !important;
  margin: 38px auto 0 !important;
  color: #343434 !important;
  font-size: clamp(19px, 2vw, 24px) !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
  text-wrap: balance;
}

.hero-actions,
.hero-badges { justify-content: center !important; }
.hero-actions { margin-top: 32px !important; }

.separator-line {
  width: min(980px, 100%) !important;
  margin: 0 auto !important;
  border: 0 !important;
  border-top: 1px solid #e1e1e1 !important;
}

.share-row {
  width: min(980px, 100%) !important;
  min-height: 72px !important;
  margin: 0 auto 76px !important;
  padding: 18px 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  border-bottom: 1px solid #ededed !important;
}
.share-row::before {
  content: "SifG Blog · Lectura";
  margin-right: auto;
  color: #696969;
  font-size: 14px;
}
.share-btn { color: #111 !important; font-size: 14px !important; font-weight: 600 !important; }
.share-btn:hover { opacity: .58; }

.article-content {
  width: min(760px, 100%) !important;
  max-width: 760px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  color: #303030 !important;
  font-size: clamp(18px, 1.45vw, 20px) !important;
  font-weight: 400 !important;
  line-height: 1.78 !important;
  text-align: left !important;
}
.article-content > p:first-child { color: #171717 !important; font-size: 1.08em !important; }
.article-content p { margin: 0 0 30px !important; }
.article-content h2,
.article-content h3,
.article-content h4 {
  color: #0a0a0a !important;
  font-weight: 600 !important;
  line-height: 1.15 !important;
  letter-spacing: -.035em !important;
  text-wrap: balance;
}
.article-content h2 { margin: 78px 0 24px !important; font-size: clamp(34px, 4vw, 50px) !important; }
.article-content h3 { margin: 58px 0 18px !important; font-size: clamp(26px, 3vw, 34px) !important; }
.article-content h4 { margin: 42px 0 14px !important; font-size: 22px !important; }
.article-content strong { color: #111 !important; font-weight: 700 !important; }
.article-content a:not(.btn-primary-pill):not(.btn-ghost-pill) {
  color: #111 !important;
  text-decoration: underline !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 4px !important;
}
.article-content ul,
.article-content ol { padding-left: 1.25em !important; }
.article-content li { margin-bottom: 12px !important; }

.article-kicker {
  margin-bottom: 42px !important;
  color: #111 !important;
  font-size: clamp(22px, 2.3vw, 28px) !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  letter-spacing: -.02em !important;
}

.launch-video,
.hero-image,
.article-visual,
.video-shell {
  width: min(1120px, 100%) !important;
  max-width: 1120px !important;
  margin: 0 auto 72px !important;
  overflow: hidden !important;
  border: 1px solid #e1e1e1 !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}

.callout,
.quote-block,
.feature-card,
.pillar-card,
.info-card,
.timeline-step,
blockquote {
  border-color: #dedede !important;
  background: #f7f7f7 !important;
  box-shadow: none !important;
}
.callout,
.quote-block,
blockquote { margin: 48px 0 !important; padding: 28px 30px !important; border-radius: 9px !important; }
.quote-block,
blockquote { border-left: 3px solid #111 !important; }
.pillars-grid { gap: 14px !important; }
.pillar-card { border-radius: 9px !important; }
.faq details,
.faq-item { border-color: #dedede !important; }

.btn-primary-pill,
.primary-button {
  min-height: 48px !important;
  padding: 0 23px !important;
  border-radius: 999px !important;
  background: #0a0a0a !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}
.btn-ghost-pill { min-height: 48px !important; padding: 0 23px !important; border: 1px solid #cfcfcf !important; border-radius: 999px !important; background: #fff !important; color: #111 !important; }

.closing-cta,
.closing {
  width: 100% !important;
  margin-top: 76px !important;
  padding-top: 30px !important;
  border-top: 1px solid #dedede !important;
}

@media (max-width: 720px) {
  .topbar { height: 64px !important; min-height: 64px !important; }
  .brand { font-size: 18px !important; }
  .brand img { width: 25px !important; height: 25px !important; }
  .main-container.article-view { padding: 66px 20px 90px !important; }
  .article-hero { margin-bottom: 48px !important; }
  .hero-meta { margin-bottom: 24px !important; }
  .hero-title,
  .article-hero h1 { font-size: clamp(44px, 13vw, 68px) !important; }
  .hero-lead { margin-top: 26px !important; font-size: 18px !important; }
  .share-row { margin-bottom: 52px !important; }
  .share-row::before { content: "SifG Blog"; }
  .article-content { font-size: 17px !important; line-height: 1.72 !important; }
  .article-content h2 { margin-top: 58px !important; }
  .callout,
  .quote-block,
  blockquote { padding: 24px 22px !important; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
}