/* ================================================================
   VeriFactu.info — software.css
   Estilos compartidos para el Silo 4: Software Homologado
   Importa: ../style.css (design tokens + base + light mode)
   Optimizado para CRO (conversión) y legibilidad B2B
================================================================ */

/* ----------------------------------------------------------------
   LAYOUT ARTÍCULO SOFTWARE (hereda de article.css estructura)
---------------------------------------------------------------- */
.software-page { padding-top: var(--header-height); }

.software-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  padding-block: var(--space-12);
  align-items: start;
}

.software-main  { min-width: 0; }
.software-sidebar { display: none; }

/* ----------------------------------------------------------------
   BREADCRUMBS
---------------------------------------------------------------- */
.sw-breadcrumbs {
  padding-block: var(--space-4);
  background: #fff;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 0;
}
.sw-breadcrumbs-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  list-style: none;
  font-size: var(--font-size-xs);
  color: var(--color-text-subtle);
}
.sw-breadcrumbs-list li + li::before { content: '/'; color: var(--color-border-light); margin-right: var(--space-2); }
.sw-breadcrumbs-list a { color: var(--color-text-subtle); text-decoration: none; transition: color var(--transition-fast); }
.sw-breadcrumbs-list a:hover { color: var(--color-indigo-500); }
.sw-breadcrumbs-list li:last-child { color: var(--color-text-primary); font-weight: 500; }

/* ----------------------------------------------------------------
   CABECERA DEL ARTÍCULO DE SOFTWARE
---------------------------------------------------------------- */
.sw-header { margin-bottom: var(--space-10); }

.sw-category-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  background: rgba(5,150,105,0.08);
  border: 1px solid rgba(5,150,105,0.2);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-emerald-500);
  margin-bottom: var(--space-4);
}

.sw-title {
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.025em;
  color: var(--color-text-primary);
  margin-bottom: var(--space-5);
}

.sw-intro {
  font-size: 1.1rem;
  color: var(--color-text-muted);
  line-height: 1.75;
  max-width: 720px;
  margin-bottom: var(--space-6);
}
.sw-intro strong { color: var(--color-text-body); font-weight: 600; }

.sw-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
  padding-block: var(--space-4);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-8);
}
.sw-meta-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-xs);
  color: var(--color-text-subtle);
}

/* ----------------------------------------------------------------
   CUERPO DEL ARTÍCULO — Tipografía de lectura
---------------------------------------------------------------- */
.sw-body {
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--color-text-body);
}
.sw-body h2 {
  font-size: clamp(1.3rem, 2.5vw, 1.75rem);
  font-weight: 700;
  color: var(--color-text-primary);
  margin-top: var(--space-12);
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-3);
  border-bottom: 2px solid var(--color-border);
  scroll-margin-top: calc(var(--header-height) + var(--space-4));
}
.sw-body h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin-top: var(--space-8);
  margin-bottom: var(--space-4);
  scroll-margin-top: calc(var(--header-height) + var(--space-4));
}
.sw-body p { margin-bottom: var(--space-5); color: #334155; }
.sw-body strong { color: var(--color-text-primary); font-weight: 600; }
.sw-body a {
  color: var(--color-indigo-500);
  text-decoration: underline;
  text-decoration-color: rgba(79,70,229,0.3);
  text-underline-offset: 3px;
  transition: all var(--transition-fast);
}
.sw-body a:hover { color: var(--color-indigo-600); }
.sw-body ul { padding-left: var(--space-6); margin-bottom: var(--space-5); }
.sw-body li { margin-bottom: var(--space-2); color: #334155; font-size: 1.05rem; line-height: 1.7; }
.sw-body ul li::marker { color: var(--color-indigo-400); }

/* ----------------------------------------------------------------
   DISCLAIMER YMYL
---------------------------------------------------------------- */
.sw-disclaimer {
  display: flex;
  gap: var(--space-4);
  padding: 1.25rem 1.5rem;
  background: #FFFBEB;
  border: 1px solid rgba(217,119,6,0.2);
  border-radius: 16px;
  margin-bottom: var(--space-8);
}
.sw-disclaimer svg { flex-shrink: 0; color: var(--color-amber-500); margin-top: 2px; }
.sw-disclaimer p { font-size: var(--font-size-xs); color: #78350F; line-height: 1.7; margin: 0; }
.sw-disclaimer strong { color: #92400E; }

/* ----------------------------------------------------------------
   TABLA DE COMPARATIVA DE PRECIOS (CRO)
---------------------------------------------------------------- */
.sw-table-wrap {
  overflow-x: auto;
  margin-block: var(--space-8);
  border-radius: 16px;
  border: 1px solid var(--color-border);
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
}
.sw-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}
.sw-table caption {
  font-size: var(--font-size-xs);
  color: var(--color-text-subtle);
  text-align: left;
  padding: 0.875rem 1.25rem;
  border-bottom: 1px solid var(--color-border);
  background: #F8F9FA;
  font-weight: 600;
  caption-side: top;
}
.sw-table thead tr { background: linear-gradient(135deg, rgba(79,70,229,0.06), rgba(8,145,178,0.04)); }
.sw-table thead th {
  padding: 0.875rem 1.25rem;
  text-align: left;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-indigo-600);
  border-bottom: 2px solid rgba(79,70,229,0.15);
  white-space: nowrap;
}
.sw-table tbody tr {
  border-bottom: 1px solid var(--color-border);
  transition: background var(--transition-fast);
}
.sw-table tbody tr:last-child { border-bottom: none; }
.sw-table tbody tr:hover { background: rgba(79,70,229,0.02); }
.sw-table tbody td {
  padding: 0.875rem 1.25rem;
  color: #334155;
  vertical-align: middle;
  line-height: 1.55;
  font-size: 0.95rem;
}
.sw-table tbody td strong { color: var(--color-text-primary); }

/* Badges en tabla */
.sw-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.sw-badge--green   { background: rgba(5,150,105,0.1);  color: #065F46; border: 1px solid rgba(5,150,105,0.2); }
.sw-badge--blue    { background: rgba(37,99,235,0.1);   color: #1E40AF; border: 1px solid rgba(37,99,235,0.2); }
.sw-badge--amber   { background: rgba(217,119,6,0.1);   color: #92400E; border: 1px solid rgba(217,119,6,0.2); }
.sw-badge--red     { background: rgba(220,38,38,0.1);   color: #991B1B; border: 1px solid rgba(220,38,38,0.2); }
.sw-badge--violet  { background: rgba(124,58,237,0.1);  color: #5B21B6; border: 1px solid rgba(124,58,237,0.2); }
.sw-badge--gray    { background: rgba(107,114,128,0.1); color: #374151; border: 1px solid rgba(107,114,128,0.2); }
.sw-badge--winner  { background: rgba(79,70,229,0.12);  color: #3730A3; border: 1px solid rgba(79,70,229,0.25); }

/* Highlight de fila ganadora */
.sw-table .row-winner td { background: rgba(79,70,229,0.03); }
.sw-table .row-winner td:first-child { border-left: 3px solid var(--color-indigo-500); }

/* Checks y cruces */
.sw-check { color: var(--color-emerald-500); font-weight: 700; font-size: 1rem; }
.sw-cross  { color: var(--color-red-500);    font-weight: 700; font-size: 1rem; }
.sw-partial{ color: var(--color-amber-500);  font-weight: 700; font-size: 1rem; }

/* ----------------------------------------------------------------
   TARJETA DE PRODUCTO (product card)
---------------------------------------------------------------- */
.product-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: 2rem 2.25rem;
  margin-block: var(--space-8);
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
  display: flex;
  flex-direction: column;
  gap: 1.35rem;
  position: relative;
  overflow: hidden;
}
.product-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
}
.product-card--indigo::before  { background: linear-gradient(90deg, #4F46E5, #0891B2); }
.product-card--emerald::before { background: linear-gradient(90deg, #059669, #0891B2); }
.product-card--amber::before   { background: linear-gradient(90deg, #D97706, #DC2626); }
.product-card--violet::before  { background: linear-gradient(90deg, #7C3AED, #4F46E5); }

.product-card-header {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.product-logo {
  width: 52px; height: 52px;
  border-radius: var(--radius-md);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-weight: 800;
  font-size: var(--font-size-lg);
  color: var(--color-indigo-500);
}
.product-name-group { flex: 1; }
.product-name {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--color-text-primary);
  margin-bottom: 2px;
}
.product-tagline { font-size: var(--font-size-sm); color: var(--color-text-subtle); }

.product-score {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: rgba(79,70,229,0.06);
  border: 1px solid rgba(79,70,229,0.15);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  flex-shrink: 0;
}
.product-score-num {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--color-indigo-600);
  line-height: 1;
}
.product-score-label {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-subtle);
}

.product-price-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}
.product-price {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--color-text-primary);
  letter-spacing: -0.02em;
}
.product-price span { font-size: var(--font-size-sm); font-weight: 400; color: var(--color-text-subtle); }
.product-desc { font-size: 1.05rem; color: #334155; line-height: 1.75; }

/* ----------------------------------------------------------------
   PROS / CONTRAS
---------------------------------------------------------------- */
.pros-cons {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-block: var(--space-6);
}
@media (min-width: 600px) { .pros-cons { grid-template-columns: 1fr 1fr; } }

.pros-box, .cons-box {
  border-radius: 16px;
  padding: 1.5rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.pros-box {
  background: rgba(5,150,105,0.05);
  border: 1px solid rgba(5,150,105,0.2);
}
.cons-box {
  background: rgba(220,38,38,0.04);
  border: 1px solid rgba(220,38,38,0.15);
}
.pros-box-title {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #065F46;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.cons-box-title {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #991B1B;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.pros-list, .cons-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.pros-list li, .cons-list li {
  font-size: 1rem;
  line-height: 1.6;
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}
.pros-list li { color: #065F46; }
.cons-list li { color: #991B1B; }
.pros-list li::before { content: '✓'; font-weight: 800; flex-shrink: 0; }
.cons-list li::before { content: '✗'; font-weight: 800; flex-shrink: 0; }

/* ----------------------------------------------------------------
   CAJA DE VEREDICTO FINAL (CRO)
---------------------------------------------------------------- */
.verdict-box {
  background: linear-gradient(135deg, #EEF2FF, #F0F9FF);
  border: 2px solid rgba(79,70,229,0.25);
  border-radius: 20px;
  padding: 2rem 2.25rem;
  margin-block: var(--space-10);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(79,70,229,0.1);
}
.verdict-box::before {
  content: '⭐ VEREDICTO FINAL';
  position: absolute;
  top: 1.25rem; right: 1.5rem;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--color-indigo-400);
}
.verdict-box h3 {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--color-indigo-600);
  margin: 0;
}
.verdict-box p {
  font-size: 1.05rem;
  color: #1E3A5F;
  line-height: 1.75;
  margin: 0;
}
.verdict-box p strong { color: var(--color-indigo-700, #3730A3); }

/* ----------------------------------------------------------------
   BOTÓN CTA AFILIADO (CRO principal)
---------------------------------------------------------------- */
.btn-afiliado {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: 1rem 2.5rem;
  background: linear-gradient(135deg, #4F46E5, #0891B2);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 1.05rem;
  font-weight: 700;
  border-radius: var(--radius-full);
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: all var(--transition-base);
  box-shadow: 0 4px 16px rgba(79,70,229,0.3);
  position: relative;
  overflow: hidden;
}
.btn-afiliado:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(79,70,229,0.4);
  color: #fff;
}
.btn-afiliado:active { transform: translateY(-1px); }
.btn-afiliado::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0);
  transition: background var(--transition-fast);
}
.btn-afiliado:hover::after { background: rgba(255,255,255,0.06); }

/* Variante verde (prueba gratuita) */
.btn-afiliado--green {
  background: linear-gradient(135deg, #059669, #0891B2);
  box-shadow: 0 4px 16px rgba(5,150,105,0.3);
}
.btn-afiliado--green:hover { box-shadow: 0 8px 28px rgba(5,150,105,0.4); }

/* Variante amber (oferta) */
.btn-afiliado--amber {
  background: linear-gradient(135deg, #D97706, #DC2626);
  box-shadow: 0 4px 16px rgba(217,119,6,0.3);
}
.btn-afiliado--amber:hover { box-shadow: 0 8px 28px rgba(217,119,6,0.4); }

/* Wrapper centrado con nota de afiliación */
.cta-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: 2rem;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 20px;
  margin-block: var(--space-8);
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
  text-align: center;
}
.cta-wrapper-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-text-primary);
}
.cta-wrapper-sub {
  font-size: 0.9rem;
  color: var(--color-text-subtle);
  margin-bottom: var(--space-2);
}
.cta-afiliado-note {
  font-size: 0.7rem;
  color: var(--color-text-faint);
  font-style: italic;
}

/* ----------------------------------------------------------------
   ADSENSE PLACEHOLDER
---------------------------------------------------------------- */
.adsense-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  background: #F8F9FA;
  border: 1.5px dashed #CBD5E1;
  border-radius: 12px;
  font-size: var(--font-size-xs);
  color: #A0AEC0;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-block: var(--space-8);
  user-select: none;
}

/* ----------------------------------------------------------------
   PRECIOS (pricing grid)
---------------------------------------------------------------- */
.pricing-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-block: var(--space-8);
}
@media (min-width: 640px)  { .pricing-grid { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 960px)  { .pricing-grid { grid-template-columns: repeat(3,1fr); } }

.pricing-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: 1.75rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
  transition: all var(--transition-base);
  position: relative;
}
.pricing-card:hover {
  border-color: var(--color-indigo-300);
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(79,70,229,0.1);
}
.pricing-card--featured {
  border-color: var(--color-indigo-400);
  background: linear-gradient(160deg, #EEF2FF, #fff);
  box-shadow: 0 8px 24px rgba(79,70,229,0.12);
}
.pricing-popular {
  position: absolute;
  top: -12px; left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #4F46E5, #0891B2);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 14px;
  border-radius: var(--radius-full);
  white-space: nowrap;
}
.pricing-plan-name {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-subtle);
}
.pricing-price {
  font-size: 2rem;
  font-weight: 800;
  color: var(--color-text-primary);
  letter-spacing: -0.03em;
  line-height: 1;
}
.pricing-price span { font-size: 0.9rem; font-weight: 400; color: var(--color-text-subtle); }
.pricing-desc { font-size: 0.9rem; color: var(--color-text-subtle); line-height: 1.6; }
.pricing-features { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.pricing-features li {
  font-size: 0.9rem;
  color: #334155;
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  line-height: 1.5;
}
.pricing-features li::before { content: '✓'; color: var(--color-emerald-500); font-weight: 700; flex-shrink: 0; }

/* ----------------------------------------------------------------
   ALERTA / ADVERTENCIA INTERNA
---------------------------------------------------------------- */
.sw-alert {
  display: flex;
  gap: var(--space-4);
  padding: 1.5rem 1.75rem;
  border-radius: 16px;
  margin-block: var(--space-8);
  border-left: 4px solid transparent;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.sw-alert--danger  { background: rgba(220,38,38,0.05);  border-left-color: var(--color-red-500); }
.sw-alert--warning { background: rgba(217,119,6,0.05);  border-left-color: var(--color-amber-500); }
.sw-alert--info    { background: rgba(79,70,229,0.05);  border-left-color: var(--color-indigo-500); }
.sw-alert--success { background: rgba(5,150,105,0.05);  border-left-color: var(--color-emerald-500); }
.sw-alert-icon { flex-shrink: 0; width: 22px; height: 22px; margin-top: 2px; }
.sw-alert--danger  .sw-alert-icon { color: var(--color-red-500); }
.sw-alert--warning .sw-alert-icon { color: var(--color-amber-500); }
.sw-alert--info    .sw-alert-icon { color: var(--color-indigo-500); }
.sw-alert--success .sw-alert-icon { color: var(--color-emerald-500); }
.sw-alert-content { flex: 1; }
.sw-alert-title {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: var(--space-2);
}
.sw-alert--danger  .sw-alert-title { color: #991B1B; }
.sw-alert--warning .sw-alert-title { color: #92400E; }
.sw-alert--info    .sw-alert-title { color: var(--color-indigo-600); }
.sw-alert--success .sw-alert-title { color: #065F46; }
.sw-alert-text { font-size: 1rem; color: #334155; line-height: 1.75; margin: 0; }

/* ----------------------------------------------------------------
   SIDEBAR SOFTWARE
---------------------------------------------------------------- */
.sw-sidebar-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: 1.75rem;
  margin-bottom: var(--space-4);
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
}
.sw-sidebar-title {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-subtle);
  margin-bottom: var(--space-4);
}
.sw-toc-list { list-style: none; padding: 0; margin: 0; }
.sw-toc-list li { margin-bottom: var(--space-1); }
.sw-toc-list a {
  font-size: 0.875rem;
  color: var(--color-text-subtle);
  text-decoration: none;
  display: block;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  line-height: 1.5;
  transition: all var(--transition-fast);
}
.sw-toc-list a:hover { color: var(--color-indigo-600); background: rgba(79,70,229,0.05); }
.sw-toc-list a.is-active { color: var(--color-indigo-600); background: rgba(79,70,229,0.08); font-weight: 600; }

/* ----------------------------------------------------------------
   ARTÍCULOS RELACIONADOS
---------------------------------------------------------------- */
.sw-related { margin-top: var(--space-12); padding-top: var(--space-8); border-top: 1px solid var(--color-border); }
.sw-related-title {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-subtle);
  margin-bottom: var(--space-5);
}
.sw-related-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-3); }
.sw-related-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 1rem 1.25rem;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  text-decoration: none;
  box-shadow: 0 2px 4px rgba(0,0,0,0.04);
  transition: all var(--transition-base);
}
.sw-related-card:hover {
  border-color: rgba(79,70,229,0.25);
  transform: translateX(4px);
  box-shadow: 0 4px 12px rgba(79,70,229,0.08);
}
.sw-related-icon {
  width: 38px; height: 38px;
  border-radius: var(--radius-md);
  background: rgba(79,70,229,0.07);
  border: 1px solid rgba(79,70,229,0.12);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-indigo-500);
  flex-shrink: 0;
}
.sw-related-text { flex: 1; min-width: 0; }
.sw-related-label { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--color-text-faint); margin-bottom: 2px; }
.sw-related-name  { font-size: 0.875rem; font-weight: 600; color: var(--color-text-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sw-related-arrow { color: var(--color-text-faint); flex-shrink: 0; }

/* ----------------------------------------------------------------
   FUENTES
---------------------------------------------------------------- */
.sw-sources {
  background: #F8F9FA;
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: 1.75rem 2rem;
  margin-top: var(--space-10);
  box-shadow: 0 2px 4px rgba(0,0,0,0.04);
}
.sw-sources h3 { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-subtle); margin-bottom: var(--space-4); }
.sw-sources-list { list-style: none; padding: 0; margin: 0; }
.sw-sources-list li {
  font-size: 0.875rem;
  color: var(--color-text-subtle);
  padding-block: var(--space-2);
  border-bottom: 1px solid var(--color-border);
  display: flex; gap: var(--space-2); align-items: flex-start; line-height: 1.55;
}
.sw-sources-list li:last-child { border-bottom: none; }
.sw-sources-list a { color: var(--color-indigo-500); text-decoration: underline; text-decoration-color: rgba(79,70,229,0.3); }
.sw-sources-list a:hover { color: var(--color-indigo-600); }

/* ----------------------------------------------------------------
   RESPONSIVE
---------------------------------------------------------------- */
@media (min-width: 768px) {
  .sw-related-grid { grid-template-columns: repeat(2,1fr); }
}
@media (min-width: 1024px) {
  .software-layout { grid-template-columns: 1fr 290px; gap: var(--space-12); }
  .software-sidebar { display: block; position: sticky; top: calc(var(--header-height) + var(--space-6)); }
  .sw-related-grid { grid-template-columns: repeat(2,1fr); }
}

/* ----------------------------------------------------------------
   CORRECCIÓN ACCESIBILIDAD — Contraste garantizado en todos los CTAs
   Fuerza texto blanco y peso 600 en todos los botones de afiliación
   y primarios, independientemente de degradados o herencia de color.
---------------------------------------------------------------- */
.btn-afiliado,
.btn-afiliado:link,
.btn-afiliado:visited,
.btn-afiliado:hover,
.btn-afiliado:active,
.btn-afiliado:focus {
  color: #ffffff !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

.btn-afiliado--green,
.btn-afiliado--green:link,
.btn-afiliado--green:visited,
.btn-afiliado--green:hover,
.btn-afiliado--green:active {
  color: #ffffff !important;
  font-weight: 700 !important;
}

.btn-afiliado--amber,
.btn-afiliado--amber:link,
.btn-afiliado--amber:visited,
.btn-afiliado--amber:hover,
.btn-afiliado--amber:active {
  color: #ffffff !important;
  font-weight: 700 !important;
}

/* Hereda garantía de contraste también en la clase .btn--primary */
.btn--primary,
.btn--primary:link,
.btn--primary:visited,
.btn--primary:hover,
.btn--primary:active,
.btn--primary:focus {
  color: #ffffff !important;
  font-weight: 700 !important;
}

/* ── AdSense placeholder: oculto hasta aprobación ── */
.adsense-placeholder { display: none !important; }