/* =====================================================================
   _legacy-rescue.css · Propuesta C + contenido legacy
   ---------------------------------------------------------------------
   El branding nuevo (_branding.css) no define las clases que usan las
   secciones legacy bajo el fold (.guide-section, .faq-section,
   .seo-content-section, .field-guide, .salary-flow, .tip-card,
   .field-card, .faq-item, etc.). Este archivo MAPEA esas clases a
   estilos consistentes con el branding monocromo + lima eléctrica.
   ===================================================================== */

/* Variables legacy → tokens del branding
   El markup legacy (inline styles + bloques <style> de las calculadoras y del
   hub) consume un set de variables que el branding nuevo no definía. Sin ellas,
   los border-radius colapsan a 0, desaparecen sombras y transiciones y algunos
   fondos/bordes quedan sin color. Las mapeamos a la escala de _tokens.css. */
:root {
  --primary: var(--gray-900);
  --primary-soft: var(--lime-400);
  --primary-bg: var(--lime-100);
  --secondary: var(--gray-600);
  --bg-card: var(--surface);
  --bg-alt: var(--surface-2);
  --text-light: var(--text-muted);
  --border-light: var(--border);

  /* radios legacy → escala del branding (_tokens: --r-sm/md/lg/xl) */
  --radius: var(--r-md);
  --radius-lg: var(--r-lg);
  --radius-xl: var(--r-xl);
  --radius-full: 999px;

  /* sombras y transición legacy → tokens del branding */
  --shadow-lg: var(--shadow-md);
  --transition: .18s ease;

  /* tipografía legacy → display del branding */
  --font-heading: var(--display);
}

/* Feather Icons: contenerlos a tamaño sensato */
svg.feather,
[data-feather] svg,
.field-icon svg,
.tr-anim-features svg,
.tr-anim-feat svg,
.n26-features svg,
.n26-feat svg {
  width: 18px;
  height: 18px;
  stroke-width: 1.5;
  vertical-align: middle;
  flex-shrink: 0;
}
/* Fallback: cualquier SVG sin width explícito dentro del contenido legacy */
.guide-section svg:not([width]):not([style*="width"]),
.faq-section svg:not([width]):not([style*="width"]),
.seo-content svg:not([width]):not([style*="width"]),
.field-card svg:not([width]):not([style*="width"]) {
  width: 18px;
  height: 18px;
}
.field-icon {
  width: 40px; height: 40px; flex: 0 0 40px;
  border-radius: 8px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text);
}
.field-icon svg { width: 18px; height: 18px; }

/* Contenedores generales */
.guide-section,
.faq-section,
.seo-content-section {
  padding: 56px 0;
  border-top: 1px solid var(--border);
}
.guide-section .container,
.faq-section .container,
.seo-content-section .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Headers de sección legacy */
.guide-header,
.faq-section .guide-header {
  text-align: left;
  margin-bottom: 32px;
  max-width: 70ch;
}
.guide-header h2,
.faq-section h2,
.seo-content h2 {
  font: 500 36px/1.1 var(--display);
  letter-spacing: -0.035em;
  color: var(--text);
  margin: 0 0 12px;
}
.guide-header p,
.faq-section p {
  font: 400 16px/1.55 var(--sans);
  color: var(--text-muted);
  margin: 0;
}

/* Visual explainer (Tu salario en tres pasos) — OCULTAR (ya está arriba) */
.visual-explainer {
  display: none;
}

/* Field guide (Guía de cada campo) */
.field-guide {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
  margin-top: 16px;
}
.field-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.field-card-header {
  display: flex;
  align-items: center;
  gap: 14px;
}
.field-card-header h3 {
  margin: 0;
  font: 600 16px/1.3 var(--sans);
  color: var(--text);
}
.field-tag {
  display: inline-block;
  margin-top: 4px;
  font: 500 11px/1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-subtle);
}
.field-card p {
  font: 400 14px/1.6 var(--sans);
  color: var(--text-muted);
  margin: 0;
}
.field-example {
  border-top: 1px dashed var(--border);
  padding-top: 12px;
  margin-top: 4px;
}
.field-example-label {
  font: 500 11px/1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-subtle);
  margin-bottom: 6px;
}
[data-theme="dark"] .field-example-label { color: var(--lime-400); }
.field-example-content {
  font: 400 13px/1.55 var(--sans);
  color: var(--text);
}

/* Tip cards (Consejos) */
.tip-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--lime-400);
  border-radius: 8px;
  padding: 20px 22px;
  margin-top: 12px;
}
.tip-card h3,
.tip-card h4 {
  margin: 0 0 8px;
  font: 600 15px/1.3 var(--sans);
  color: var(--text);
}
.tip-card p {
  margin: 0;
  font: 400 14px/1.55 var(--sans);
  color: var(--text-muted);
}

/* FAQ — sustitución del JS accordion por estilo plano + animación */
.faq-grid {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}
.faq-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  transition: border-color 0.18s;
}
.faq-item.active,
.faq-item:hover {
  border-color: var(--border-strong);
}
.faq-question {
  width: 100%;
  padding: 18px 22px;
  background: transparent;
  border: 0;
  text-align: left;
  font: 600 15px/1.4 var(--sans);
  color: var(--text);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.faq-question::after {
  content: "+";
  font: 400 22px/1 var(--display);
  color: var(--text-muted);
  flex-shrink: 0;
  transition: transform 0.2s;
}
.faq-item.active .faq-question::after {
  content: "−";
}
.faq-question svg,
.faq-question [data-feather] {
  display: none; /* esconder cualquier chevron Feather, usamos el +/− */
}
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
}
.faq-item.active .faq-answer {
  max-height: 600px;
}
.faq-answer-content {
  padding: 0 22px 18px;
  font: 400 15px/1.6 var(--sans);
  color: var(--text-muted);
}
.faq-answer-content p:first-child { margin-top: 0; }
.faq-answer-content p:last-child  { margin-bottom: 0; }

/* SEO content (¿Qué es el sueldo neto?, tablas, glosario) */
.seo-content-section {
  background: var(--surface-2) !important;
}
.seo-content {
  max-width: 820px !important;
  margin: 0 auto !important;
}
.seo-content h2 {
  font: 500 32px/1.15 var(--display) !important;
  letter-spacing: -0.03em !important;
  color: var(--text) !important;
  margin: 0 0 18px !important;
}
.seo-content h3 {
  font: 500 22px/1.25 var(--display) !important;
  letter-spacing: -0.02em !important;
  color: var(--text) !important;
  margin: 36px 0 14px !important;
}
.seo-content p {
  font: 400 16px/1.7 var(--sans) !important;
  color: var(--text-muted) !important;
  margin: 0 0 18px !important;
}
.seo-content p strong { color: var(--text); }
.seo-content a {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--lime-400);
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}
.seo-content a:hover {
  background: var(--lime-100, color-mix(in oklab, var(--lime-400) 20%, transparent));
}

/* Tablas dentro de seo-content (tramos IRPF, orientativa, etc.) */
.seo-content table {
  width: 100%;
  border-collapse: collapse;
  border-radius: 8px !important;
  overflow: hidden;
  margin: 18px 0;
  background: var(--surface) !important;
  box-shadow: none !important;
  font: 400 14px/1.5 var(--sans);
  border: 1px solid var(--border);
}
.seo-content table thead tr {
  background: var(--gray-900) !important;
  color: #fff !important;
}
.seo-content table th {
  font: 600 12px/1 var(--mono) !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: #fff !important;
  padding: 14px 16px !important;
  text-align: left !important;
}
.seo-content table td {
  padding: 12px 16px !important;
  border-bottom: 1px solid var(--border) !important;
  color: var(--text) !important;
  font-variant-numeric: tabular-nums;
}
.seo-content table td[align="center"],
.seo-content table th[align="center"] { text-align: center; }
.seo-content table td[align="right"],
.seo-content table th[align="right"] { text-align: right; }
.seo-content table tr:last-child td { border-bottom: 0; }
.seo-content table tr:hover td { background: var(--surface-2); }

/* Diagrama SVG (Distribución del salario) — limitarlo */
.diagram-container {
  margin: 20px 0;
  text-align: center;
}
.diagram-svg {
  width: 100%;
  max-width: 700px;
  height: auto;
}

/* Banners afiliado del partial legacy: layout decente */
.tr-banner-wrapper,
.n26-banner-wrapper,
.affiliate-banner,
.tr-banner,
.n26-banner {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 22px 26px;
  margin: 20px 0;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.tr-banner-wrapper h3,
.n26-banner-wrapper h3,
.tr-banner h3,
.n26-banner h3 {
  font: 600 18px/1.3 var(--sans);
  color: var(--text);
  margin: 0 0 6px;
}
.tr-banner-wrapper p,
.n26-banner-wrapper p,
.tr-banner p,
.n26-banner p {
  font: 400 14px/1.55 var(--sans);
  color: var(--text-muted);
  margin: 0;
}
.tr-banner-wrapper a,
.n26-banner-wrapper a {
  margin-left: auto;
  background: var(--lime-400);
  color: var(--gray-900);
  padding: 10px 18px;
  border-radius: 8px;
  font: 600 14px/1 var(--sans);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.tr-banner-wrapper a:hover,
.n26-banner-wrapper a:hover {
  background: var(--lime-500);
}

/* H3 sueltos en seo-content con style inline · forzar consistencia */
[style*="font-size: 1.5rem"],
[style*="font-size: 1.375rem"],
[style*="font-size: 1.75rem"] {
  font-family: var(--display) !important;
}

/* Otros wrappers genéricos de seo-content */
.seo-content ul,
.seo-content ol {
  font: 400 16px/1.7 var(--sans);
  color: var(--text-muted);
  padding-left: 24px;
  margin: 0 0 18px;
}
.seo-content li { margin-bottom: 6px; }
.seo-content li strong { color: var(--text); }

/* Asegurar que cualquier estilo inline azul del legacy queda neutralizado */
[style*="color: var(--primary)"],
[style*="color:var(--primary)"] {
  color: var(--text) !important;
}
[style*="background: var(--primary)"],
[style*="background:var(--primary)"] {
  background: var(--gray-900) !important;
}

/* =====================================================================
   Neutralización de gradients/colores legacy en style inline
   El legacy abusa de callouts con gradients amarillo/azul/verde/rojo.
   Los convertimos a callouts monocromos con acento lima.
   ===================================================================== */

/* Gradients de fondo legacy → fondo neutro */
[style*="linear-gradient"][style*="#fef3c7"],
[style*="linear-gradient"][style*="#fde68a"],
[style*="linear-gradient"][style*="#fee2e2"],
[style*="linear-gradient"][style*="#fecaca"],
[style*="linear-gradient"][style*="#dcfce7"],
[style*="linear-gradient"][style*="#bbf7d0"],
[style*="linear-gradient"][style*="#dbeafe"],
[style*="linear-gradient"][style*="#bfdbfe"],
[style*="linear-gradient"][style*="#e0f2fe"],
[style*="linear-gradient"][style*="#bae6fd"],
[style*="linear-gradient"][style*="#f8fafc"],
[style*="linear-gradient"][style*="#f1f5f9"],
[style*="linear-gradient"][style*="#fafafa"],
[style*="linear-gradient"][style*="#fef9c3"],
[style*="linear-gradient"][style*="#ede9fe"],
[style*="linear-gradient"][style*="#fce7f3"],
[style*="linear-gradient"][style*="#ffedd5"] {
  background: var(--surface-2) !important;
  border-radius: 8px !important;
}

/* border-left coloridos → lima */
[style*="border-left: 4px solid #f59e0b"],
[style*="border-left: 4px solid #ef4444"],
[style*="border-left: 4px solid #10b981"],
[style*="border-left: 4px solid #3b82f6"],
[style*="border-left: 4px solid #f97316"],
[style*="border-left: 4px solid #8b5cf6"],
[style*="border-left: 4px solid #06b6d4"],
[style*="border-left: 4px solid #ec4899"],
[style*="border-left: 4px solid #eab308"],
[style*="border-left: 4px solid #84cc16"] {
  border-left-color: var(--lime-400) !important;
}
[style*="border-left:4px solid #f59e0b"],
[style*="border-left:4px solid #ef4444"],
[style*="border-left:4px solid #10b981"],
[style*="border-left:4px solid #3b82f6"] {
  border-left-color: var(--lime-400) !important;
}

/* Colores de texto coloridos → text del branding */
[style*="color: #92400e"],
[style*="color: #991b1b"],
[style*="color: #7f1d1d"],
[style*="color:#7f1d1d"],
[style*="color: #15803d"],
[style*="color:#15803d"],
[style*="color: #4c1d95"],
[style*="color:#4c1d95"],
[style*="color: #4338ca"],
[style*="color:#4338ca"],
[style*="color: #831843"],
[style*="color:#831843"],
[style*="color: #db2777"],
[style*="color:#db2777"],
[style*="color: #166534"],
[style*="color: #1e40af"],
[style*="color: #7c2d12"],
[style*="color: #581c87"],
[style*="color: #be185d"],
[style*="color: #a16207"],
[style*="color: #115e59"],
[style*="color:#92400e"],
[style*="color:#991b1b"],
[style*="color:#166534"],
[style*="color:#1e40af"] {
  color: var(--text) !important;
}

/* Cajas inline con fondo blanco translúcido (legacy): sobre superficies
   claras funcionaban, pero en dark quedan gris claro con texto claro.
   Neutralizar a superficie temática. (No afecta a heroes/cards oscuros:
   esos usan rgba con alfa <=0.2 vía clases, no style inline.) */
[style*="background: rgba(255,255,255,0.5)"],
[style*="background: rgba(255,255,255,0.6)"],
[style*="background: rgba(255,255,255,0.7)"],
[style*="background: rgba(255,255,255,0.8)"],
[style*="background:rgba(255,255,255,0.5)"],
[style*="background:rgba(255,255,255,0.6)"],
[style*="background:rgba(255,255,255,0.7)"],
[style*="background:rgba(255,255,255,0.8)"] {
  background: var(--surface) !important;
}

/* Cards de CCAA con bg color fuerte */
[style*="background: #fef3c7"],
[style*="background: #fee2e2"],
[style*="background: #dcfce7"],
[style*="background: #dbeafe"],
[style*="background: #ede9fe"],
[style*="background: #eff6ff"],
[style*="background:#eff6ff"],
[style*="background:#fef3c7"],
[style*="background:#fee2e2"],
[style*="background:#dcfce7"],
[style*="background:#dbeafe"],
[style*="background:#ede9fe"] {
  background: var(--surface-2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
}

/* Verdes/teal Tailwind como texto de dato positivo → token --positive (AA en ambos temas) */
[style*="color: #059669"],
[style*="color:#059669"],
[style*="color: #0d9488"],
[style*="color:#0d9488"],
[style*="color: #16a34a"],
[style*="color:#16a34a"] {
  color: var(--positive) !important;
}

/* Strongs con var(--primary) o color especifico → al text del branding */
[style*="--primary"] strong,
.seo-content strong[style*="color"] {
  color: var(--text) !important;
}

/* Badges/pills inline con colores legacy */
[style*="background: var(--primary)"][style*="color: white"],
[style*="background:var(--primary)"][style*="color:white"] {
  background: var(--gray-900) !important;
  color: var(--lime-400) !important;
}

/* Headings con font-size inline + color var(--text) (común en seo-content) */
h2[style*="font-size: 1.75rem"],
h2[style*="font-size:1.75rem"] {
  font: 500 28px/1.2 var(--display) !important;
  letter-spacing: -0.02em !important;
}
h3[style*="font-size: 1.5rem"],
h3[style*="font-size: 1.375rem"],
h3[style*="font-size:1.5rem"],
h3[style*="font-size:1.375rem"] {
  font: 500 20px/1.3 var(--display) !important;
  letter-spacing: -0.01em !important;
}

/* QR code legacy: limitar tamaño */
.qr-code img,
[class*="qr"] img {
  max-width: 120px;
  height: auto;
}

/* Listas decorativas con check del legacy */
ul[style*="list-style: none"] li::before,
ol[style*="list-style: none"] li::before {
  color: var(--lime-500) !important;
}

/* =====================================================================
   LEGACY CALC LAYOUT — clases que el main.css viejo estilizaba
   y que las calcs (finiquito, IRPF, hipoteca, autónomos, etc.) usan.
   Las mapeamos al look-and-feel del branding (sn-grid + form-card +
   result-card) sin tocar el HTML del legacy.
   ===================================================================== */

/* Wrapper de la calc */
.calc-page {
  padding: 0 0 56px;
}
/* OJO: NO hacer grid el .calc-page > .container. Solo contiene el .calc-layout,
   que ya es su propio grid (1fr 400px via <style> inline de cada calc). Si el
   container se vuelve grid de 2 columnas, el .calc-layout cae en la 1a subcolumna
   (~819px) y la página se ve estrecha. El container solo centra y limita ancho. */
.calc-page > .container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 48px 24px 0;
}
.calc-layout {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 32px;
  align-items: start;
  /* Algunos <style> de página traen margin-top:-3rem de la v1 (solapaban
     las cards sobre el hero oscuro). Con la cabecera clara ese solape
     las dejaba pegadas: separación estándar de 48px en todas. */
  margin-top: 0 !important;
}
/* Grid blowout: los grid items tienen min-width:auto y el contenido interno
   (inputs, números largos) puede impedir que encojan, desbordando el viewport
   en móvil. min-width:0 les permite encogerse al ancho de su pista. */
.calc-layout > * { min-width: 0; }
@media (max-width: 900px) {
  .calc-layout { grid-template-columns: 1fr; }
}

/* Form card */
.calc-form-card,
.calc-form,
form.calc-form,
.form-card-wrap {
  background: var(--surface-2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  padding: 28px !important;
  box-shadow: none !important;
  display: flex;
  flex-direction: column;
  gap: 24px;
  overflow: visible !important;
  height: auto !important;
}
.calc-form-header,
.calc-form-card > h2:first-child,
.calc-form > h2:first-child {
  margin: 0;
  font: 600 14px/1 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
}
.calc-form-header h2 {
  font: inherit;
  margin: 0;
  color: inherit;
}
.calc-form-body {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* Sections dentro del form */
.form-section,
.form-group,
.field-group,
.main-input-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* Títulos de campo del FORMULARIO (no confundir con .section-header
   .section-title, el título de sección de página — ver más abajo) */
.calc-form-card .section-title,
.calc-form .section-title,
.calc-form-body .section-title,
.main-input-label,
.field-label,
.form-section > label,
.form-group > label {
  font: 500 13px/1.4 var(--sans);
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
}
.calc-form-card .section-title svg,
.main-input-label svg {
  color: var(--text-muted);
}
/* Título de sección de página (hubs y categorías) */
.section-header .section-title {
  display: block;
  font: 500 32px/1.15 var(--display);
  letter-spacing: -0.03em;
  color: var(--text);
  margin: 0 0 10px;
}

/* Inputs */
.main-input,
.main-input-wrapper input,
input.calc-input,
input[type="number"],
input[type="text"],
input[type="email"],
select,
.custom-select {
  width: 100% !important;
  background: var(--surface) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: 6px !important;
  padding: 12px 14px !important;
  font: 500 16px/1 var(--mono) !important;
  color: var(--text) !important;
  font-variant-numeric: tabular-nums;
  appearance: none;
  -webkit-appearance: none;
  cursor: text;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  box-shadow: none !important;
}
.main-input:focus,
input:focus,
select:focus,
.custom-select:focus {
  border-color: var(--gray-900);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--lime-400) 24%, transparent);
}

/* Wrapper main-input con sufijo */
.main-input-wrapper {
  position: relative;
  display: block;
}
.main-input-wrapper .main-input-suffix,
.main-input-suffix {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  font: 500 12px/1 var(--mono);
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

/* Select wrapper */
.custom-select-wrapper {
  position: relative;
}
.custom-select {
  padding-right: 36px;
  cursor: pointer;
}
.custom-select-arrow {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--text-muted);
  display: flex;
}
.custom-select-arrow svg {
  width: 16px;
  height: 16px;
}

/* Quick buttons (chips de cantidades comunes) */
.quick-btns,
.quick-buttons,
.chip-row,
.preset-buttons,
.preset-options,
.value-options {
  display: flex !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  flex-direction: row !important;
}
.quick-btn,
.chip,
.preset-btn,
.value-option,
.preset-option {
  background: var(--surface) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: 99px !important;
  padding: 7px 14px !important;
  font: 500 13px/1 var(--mono) !important;
  color: var(--text) !important;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  width: auto !important;
}
.quick-btn:hover,
.chip:hover,
.preset-btn:hover,
.value-option:hover {
  border-color: var(--gray-900) !important;
}
.quick-btn.active,
.quick-btn.on,
.chip.active,
.chip.on,
.preset-btn.active,
.value-option.active,
.preset-option.active {
  background: var(--gray-900) !important;
  color: var(--lime-400) !important;
  border-color: var(--gray-900) !important;
}

/* Toggle group (12/14 pagas, fijo/variable, etc.) */
.toggle-group {
  display: flex;
  gap: 0;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  padding: 3px;
  background: var(--surface);
  width: 100%;
}
.toggle-group .toggle-btn {
  flex: 1;
  background: transparent;
  border: 0;
  padding: 10px;
  border-radius: 4px;
  font: 500 13px/1 var(--sans);
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.toggle-group .toggle-btn:hover {
  color: var(--text);
}
.toggle-group .toggle-btn.active {
  background: var(--surface-2);
  color: var(--text);
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
  border: 1px solid var(--border);
  margin: -1px;
}

/* Result card alternativo: .calc-results-card (legacy) */
.calc-results-card,
.calc-results-wrap {
  background: var(--gray-900) !important;
  border-radius: 8px !important;
  padding: 32px !important;
  color: #fff !important; /* la tarjeta es oscura SIEMPRE — texto fijo, no temático */
  box-shadow: none !important;
  overflow: visible !important;
  height: auto !important;
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: sticky;
  /* !important: los <style> de algunas páginas redefinen la card con
     position:sticky pero sin top (queda auto y el sticky nunca actúa) */
  top: 100px !important;
}
.calc-results-card .results-header,
.calc-results-wrap .results-header,
.calc-results-card .results-body,
.calc-results-wrap .results-body,
.calc-results-card > div,
.calc-results-card > * {
  background: transparent !important;
  box-shadow: none !important;
}
.calc-results-card .results-header,
.calc-results-wrap .results-header {
  margin: 0;
  padding: 0 0 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.calc-results-card .results-header h2,
.calc-results-card .results-header h3,
.calc-results-card h2:first-child,
.calc-results-card h3:first-child {
  margin: 0;
  font: 500 11px/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6) !important;
}
.calc-results-card .results-body,
.calc-results-wrap .results-body {
  background: transparent;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.calc-results-card .result-amount,
.calc-results-card .result-value,
.calc-results-card .result-main-value,
.calc-results-card .results-main-value,
.calc-results-card .results-amount,
.calc-results-card .results-value,
.calc-results-card .resultado-principal,
.calc-results-card .resultado-total,
.calc-results-card .resultado-bruto,
.calc-results-card .resultado-neto,
.calc-results-card .main-value,
.calc-results-card .big-number,
.calc-results-card .principal-value,
.calc-results-card .hero-value,
.calc-results-card [class*="main-value"],
.calc-results-card [class*="result-amount"],
.calc-results-card [class*="result-value"],
.calc-results-card [class*="resultado-"] {
  font: 500 56px/1 var(--display) !important;
  color: var(--lime-400) !important;
  letter-spacing: -0.035em !important;
  font-variant-numeric: tabular-nums !important;
  margin: 8px 0 !important;
}

/* Breakdown rows (Salario días + Vacaciones + Paga extra + etc.) */
.calc-results-card .breakdown,
.calc-results-card .breakdown-section,
.calc-results-card .results-breakdown {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 14px;
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.calc-results-card .breakdown-item,
.calc-results-card .breakdown-row,
.calc-results-card .result-row,
.calc-results-card .info-note,
.calc-results-card .breakdown-item.highlight,
.calc-results-card .breakdown-item.total {
  display: flex !important;
  justify-content: space-between !important;
  align-items: baseline !important;
  gap: 16px !important;
  font: 400 14px/1.4 var(--sans) !important;
  color: rgba(255, 255, 255, 0.85) !important;
  background: transparent !important;
  padding: 8px 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-bottom: 0 !important;
  /* algunos estilos legacy meten bordes laterales claros: las filas
     parecían "cajas" con el importe pegado al borde */
  border-left: 0 !important;
  border-right: 0 !important;
}
.calc-results-card .breakdown-item:first-of-type,
.calc-results-card .breakdown-row:first-of-type {
  border-top: 0 !important;
  padding-top: 14px !important;
}
/* El display:flex !important de arriba impedía que el JS de las
   calculadoras ocultara filas con style.display='none' (p. ej. las
   pagas extra del finiquito en modo prorrateado seguían visibles con
   importes que el total no incluía). Respetar la ocultación inline: */
.calc-results-card .breakdown-item[style*="display: none"],
.calc-results-card .breakdown-item[style*="display:none"],
.calc-results-card .breakdown-row[style*="display: none"],
.calc-results-card .breakdown-row[style*="display:none"],
.calc-results-card .result-row[style*="display: none"],
.calc-results-card .result-row[style*="display:none"] {
  display: none !important;
}
.calc-results-card .info-note {
  display: block !important;
  border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
  padding-top: 14px !important;
  margin-top: 8px;
  font: 400 13px/1.5 var(--sans) !important;
  color: rgba(255, 255, 255, 0.65) !important;
}
.calc-results-card .breakdown-label,
.calc-results-card .breakdown-item .label,
.calc-results-card .row-label {
  color: rgba(255, 255, 255, 0.7);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ---- Estándar de resultados: toolbar de acciones (inyectado por
   calcus.js en todas las calculadoras). Sin caja contenedora: _tokens
   define .result-toolbar con fondo/borde/radius (para sueldo-neto) y
   aquí hay que neutralizarlo todo — solo un separador superior. ---- */
.calc-results-card .result-toolbar.rt-auto {
  display: flex !important;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
  padding: 16px 0 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.calc-results-card .rt-auto .act-btn {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 40px;
  padding: 0 10px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  background: transparent !important;
  color: #fff !important;
  font: 500 12.5px/1 var(--sans);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .15s, color .15s;
}
.calc-results-card .rt-auto .act-btn:hover {
  border-color: var(--lime-400) !important;
  color: var(--lime-400) !important;
}
.calc-results-card .rt-auto .act-btn svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}

/* ---- Impresión de calculadoras: solo el título y los resultados.
   El usuario imprime su cálculo, no la página entera (formulario,
   guías SEO, FAQ, header, footer...). Limitado a body.page-calculator
   para no afectar a la impresión del blog. ---- */
@media print {
  body.page-calculator .header,
  body.page-calculator footer,
  body.page-calculator .site-footer,
  body.page-calculator .footer,
  body.page-calculator .mobile-menu,
  body.page-calculator .mob-sticky,
  body.page-calculator .calc-form-card,
  body.page-calculator .calc-form,
  body.page-calculator .guide-section,
  body.page-calculator .seo-content,
  body.page-calculator .faq-section,
  body.page-calculator .cta-section,
  body.page-calculator section,
  body.page-calculator .breadcrumb,
  body.page-calculator .calc-badges,
  body.page-calculator .result-toolbar,
  body.page-calculator .hero-stats,
  body.page-calculator .tip-card,
  body.page-calculator .dist-wrap,
  body.page-calculator .calc-results-card .result-toolbar.rt-auto,
  body.page-calculator [class*="banner"],
  body.page-calculator [class*="related"] {
    display: none !important;
  }
  body.page-calculator, body.page-calculator .calc-page, body.page-calculator .calc-page > .container { background: #fff !important; }
  body.page-calculator .calc-page > .container { padding: 12px 0 0 !important; max-width: 100% !important; }
  body.page-calculator .calc-layout { display: block !important; margin: 0 !important; }
  body.page-calculator .calc-header {
    background: #fff !important;
    padding: 0 0 10px !important;
    border-bottom: 2px solid #000 !important;
  }
  body.page-calculator .calc-header h1 { color: #000 !important; font-size: 20pt !important; margin: 0 0 6px !important; }
  body.page-calculator .calc-header .calc-subtitle { color: #444 !important; }
  body.page-calculator .calc-results-card,
  body.page-calculator .calc-results-wrap {
    background: #fff !important;
    color: #000 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    position: static !important;
    padding: 18px 0 0 !important;
  }
  body.page-calculator .calc-results-card *,
  body.page-calculator .calc-results-wrap * {
    color: #000 !important;
    background: transparent !important;
  }
  body.page-calculator .calc-results-card .results-main-value { font-size: 26pt !important; }
  body.page-calculator .calc-results-card .breakdown-item { border-top-color: #ccc !important; }
  body.page-calculator .calc-results-card .info-note {
    border: 1px solid #999 !important;
    border-radius: 6px;
    padding: 10px 12px !important;
    margin-top: 12px;
  }
}

/* ---- Estándar de resultados: gráfico de distribución del desglose
   (inyectado por calcus.js solo cuando el desglose es aditivo) ---- */
.calc-results-card .dist-wrap { margin-top: 4px; }
.calc-results-card .dist-bar {
  display: flex;
  height: 10px;
  border-radius: 5px;
  overflow: hidden;
  gap: 2px;
}
.calc-results-card .dist-bar i { display: block; height: 100%; min-width: 3px; }
.calc-results-card .dist-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-top: 10px;
}
.calc-results-card .dist-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 500 11px/1.3 var(--sans);
  color: rgba(255, 255, 255, 0.75) !important;
}
.calc-results-card .dist-legend i {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  flex: 0 0 auto;
}
.calc-results-card .breakdown-value,
.calc-results-card .row-value,
.calc-results-card .breakdown-item .value,
.calc-results-card .breakdown-item span:last-child {
  font-variant-numeric: tabular-nums;
  /* !important: algunos <style> de página pintan el valor por #id con
     var(--text), que en tema claro es negro sobre la card negra
     (p. ej. #resIntereses en interés compuesto: invisible) */
  color: #fff !important;
  font-weight: 500;
}
.calc-results-card .breakdown-item.total,
.calc-results-card .breakdown-item.highlight,
.calc-results-card .breakdown-row.total,
.calc-results-card .result-row.total {
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  padding-top: 12px;
  margin-top: 4px;
  font-weight: 600;
}
.calc-results-card .breakdown-item.total .breakdown-value,
.calc-results-card .breakdown-row.total .row-value {
  color: var(--lime-400);
  font-size: 17px;
}
.calc-results-card p,
.calc-results-card .result-label,
.calc-results-card .result-description,
.calc-results-card .results-body > div {
  color: rgba(255, 255, 255, 0.85);
  font: 400 14px/1.45 var(--sans);
  font-variant-numeric: tabular-nums;
}
.calc-results-card strong,
.calc-results-card b {
  color: #fff;
}
.calc-results-card svg,
.calc-results-card i {
  color: rgba(255, 255, 255, 0.6);
}
/* Estilos inline con tokens temáticos dentro de la tarjeta oscura fija:
   en light --text-muted es gris oscuro → ilegible sobre negro. Forzar claro. */
.calc-results-card [style*="color: var(--text-muted)"],
.calc-results-card [style*="color:var(--text-muted)"],
.calc-results-wrap [style*="color: var(--text-muted)"],
.calc-results-wrap [style*="color:var(--text-muted)"],
.results-section [style*="color: var(--text-muted)"],
.results-section [style*="color:var(--text-muted)"] {
  color: rgba(255, 255, 255, 0.75) !important;
}
.calc-results-card .chart-title,
.calc-results-card .legend-item,
.calc-results-wrap .chart-title,
.calc-results-wrap .legend-item {
  color: rgba(255, 255, 255, 0.75);
}

/* Sub-cajas CLARAS dentro de la card negra (paneles comparativos con
   background var(--bg-alt)/var(--surface)/blanco inline): la
   neutralización de arriba pintaba sus etiquetas de blanco translúcido
   y quedaban invisibles sobre el fondo claro (p. ej. "Plazo (no
   cambia)" en amortización anticipada con tema claro). Fondo blanco
   fijo y texto oscuro fijo, coherente en ambos temas. */
.calc-results-card [style*="background:var(--bg-alt)"],
.calc-results-card [style*="background: var(--bg-alt)"],
.calc-results-card [style*="background:var(--surface)"],
.calc-results-card [style*="background: var(--surface)"],
.calc-results-card [style*="background:#fff"],
.calc-results-card [style*="background: #fff"],
.calc-results-card [style*="background:white"],
.calc-results-card [style*="background: white"] {
  background: #fff !important;
}
.calc-results-card [style*="background:var(--bg-alt)"] *,
.calc-results-card [style*="background: var(--bg-alt)"] *,
.calc-results-card [style*="background:var(--surface)"] *,
.calc-results-card [style*="background: var(--surface)"] *,
.calc-results-card [style*="background:#fff"] *,
.calc-results-card [style*="background: #fff"] *,
.calc-results-card [style*="background:white"] *,
.calc-results-card [style*="background: white"] * {
  color: #1A1A1A !important;
}
.calc-results-card [style*="background:var(--bg-alt)"] [style*="--text-muted"],
.calc-results-card [style*="background: var(--bg-alt)"] [style*="--text-muted"],
.calc-results-card [style*="background:var(--surface)"] [style*="--text-muted"],
.calc-results-card [style*="background: var(--surface)"] [style*="--text-muted"],
.calc-results-card [style*="background:#fff"] [style*="--text-muted"],
.calc-results-card [style*="background: #fff"] [style*="--text-muted"],
.calc-results-card [style*="background:white"] [style*="--text-muted"],
.calc-results-card [style*="background: white"] [style*="--text-muted"] {
  color: #555 !important;
}
/* Las páginas definen localmente .info-note p { color: var(--text-muted) } —
   dentro de la tarjeta oscura ese gris falla AA. Forzar claro. */
.calc-results-card .info-note p,
.calc-results-wrap .info-note p,
.results-section .info-note p {
  color: rgba(255, 255, 255, 0.78) !important;
}
.calc-results-card hr,
.calc-results-card .divider {
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  margin: 8px 0;
}
/* Highlight final del resultado total */
.calc-results-card .result-final,
.calc-results-card .resultado-final,
.calc-results-card .result-total,
.calc-results-card .total-final {
  background: var(--lime-400);
  color: var(--gray-900) !important;
  padding: 12px 16px;
  border-radius: 6px;
  font: 600 14px/1.3 var(--sans);
  margin-top: 4px;
}
.calc-results-card .result-final strong,
.calc-results-card .resultado-final strong {
  color: var(--gray-900);
}

/* Stepper +/− (hijos a cargo) */
.stepper-control,
.hijos-stepper,
.number-stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: var(--surface);
  overflow: hidden;
  width: fit-content;
}
.stepper-control button,
.hijos-stepper button,
.number-stepper button,
[id$="Increase"],
[id$="Decrease"] {
  background: transparent;
  border: 0;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  cursor: pointer;
  font-size: 18px;
  font-weight: 600;
}
.stepper-control button:hover,
.hijos-stepper button:hover,
.number-stepper button:hover {
  background: var(--surface-2);
}
.stepper-control .value,
.hijos-stepper .value,
.number-stepper .value,
[id$="Value"] {
  padding: 0 16px;
  font: 600 16px/1 var(--mono);
  color: var(--text);
  font-variant-numeric: tabular-nums;
  min-width: 24px;
  text-align: center;
}

/* Slider (rango años hipoteca, etc.) */
input[type="range"] {
  -webkit-appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background: var(--border);
  outline: none;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--lime-400);
  cursor: pointer;
  border: 2px solid var(--gray-900);
}
input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--lime-400);
  cursor: pointer;
  border: 2px solid var(--gray-900);
}

/* Results section / card */
.results-section,
.result-section,
.calc-result,
.calc-results {
  background: var(--gray-900);
  border-radius: 8px;
  padding: 32px;
  color: #fff; /* tarjeta oscura fija — texto fijo */
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: sticky;
  top: 100px !important;
}
.results-section h2,
.results-section h3,
.result-section h2,
.result-section h3 {
  margin: 0;
  color: #fff;
  font: 500 11px/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}
.results-section .result-amount,
.results-section .result-number,
.results-section .result-main,
.results-section .resultado-principal,
.calc-result .amount,
.calc-result-value {
  font: 500 64px/1 var(--display);
  color: var(--lime-400);
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
}
.results-section .result-label,
.results-section .result-detail,
.results-section .result-meta {
  color: rgba(255, 255, 255, 0.7);
  font: 500 13px/1.4 var(--mono);
  font-variant-numeric: tabular-nums;
}
.results-section .result-breakdown,
.results-section .results-detail,
.results-section .breakdown {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 18px;
  display: grid;
  gap: 10px;
  font: 400 14px/1.4 var(--sans);
}
.results-section .breakdown-row,
.results-section .result-row {
  display: flex;
  justify-content: space-between;
  color: rgba(255, 255, 255, 0.85);
  font-variant-numeric: tabular-nums;
}
.results-section .breakdown-row .label,
.results-section .breakdown-row span:first-child {
  color: rgba(255, 255, 255, 0.7);
}

/* Field rows */
.field-row,
.field-row-2,
.field-row-3,
.input-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
}

/* Sistema de botones legacy (.btn + variantes) — la v1 los definía en su
   main.css y el branding nuevo no: quedaban como texto plano con fondo. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 18px;
  height: 44px;
  border: 0;
  border-radius: 6px;
  font: 600 14px/1 var(--sans);
  cursor: pointer;
  text-decoration: none !important;
  transition: background .15s, border-color .15s, color .15s, transform .12s;
}
.btn svg, .btn [data-feather] { width: 16px; height: 16px; flex: 0 0 auto; }
.btn-lg { height: 50px; padding: 0 24px; font-size: 15px; }
.btn-sm { height: 36px; padding: 0 14px; font-size: 13px; }
.btn.btn-secondary,
a.btn-secondary {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border-strong);
}
.btn.btn-secondary:hover,
a.btn-secondary:hover { border-color: var(--text); }
.btn:active { transform: scale(.98); }

/* Action buttons (calcular, reset, etc.) */
.btn-calculate,
.btn-calculator,
.calculator-button,
.action-btn,
button.primary,
.btn-submit {
  background: var(--lime-400);
  color: var(--gray-900);
  border: 0;
  border-radius: 99px;
  padding: 12px 22px;
  font: 600 14px/1 var(--sans);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background 0.15s, transform 0.12s;
}
.btn-calculate:hover,
.btn-calculator:hover {
  background: var(--lime-500);
}
.btn-calculate:active,
.btn-calculator:active {
  transform: scale(0.98);
}

/* Toggle 12/14 pagas: .toggle-btn dentro de .seg-group (legacy usa botones con .active vs el branding que espera radios :checked) */
.seg-group .toggle-btn {
  width: 100%;
  background: transparent;
  border: 0;
  padding: 9px;
  border-radius: 4px;
  font: 500 13px/1 var(--sans);
  color: var(--text-muted);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s, color 0.15s;
}
.seg-group .toggle-btn:hover {
  color: var(--text);
}
.seg-group .toggle-btn.active {
  background: var(--surface-2);
  color: var(--text);
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.04));
  border: 1px solid var(--border);
  margin: -1px;
}

/* Hero de blog post (legacy usa verde Tailwind #22c55e en gradient rgb).
   Blog y legales conservan el hero editorial OSCURO. */
.post-hero,
.blog-hero,
.legal-hero,
.page-hero {
  background: var(--gray-900) !important;
  background-image: none !important;
  color: #fff !important; /* hero oscuro fijo en ambos temas — texto fijo */
  padding: 56px 0 !important;
  border-bottom: 1px solid var(--gray-800, #1f1f1f) !important;
}
.post-hero *,
.blog-hero *,
.legal-hero *,
.page-hero * {
  color: inherit !important;
}
.post-hero a,
.blog-hero a,
.legal-hero a,
.page-hero a {
  color: #fff !important;
  opacity: 0.9;
}
.post-hero a:hover,
.blog-hero a:hover {
  opacity: 1;
  color: var(--lime-400) !important;
}
.post-hero h1,
.blog-hero h1 {
  color: #fff !important;
  font: 500 48px/1.1 var(--display) !important;
  letter-spacing: -0.03em !important;
  margin: 14px 0 !important;
}
.post-hero .breadcrumb,
.blog-hero .breadcrumb {
  color: #fff !important;
  opacity: 0.7;
  font: 500 12px/1 var(--mono) !important;
  letter-spacing: 0.06em !important;
}
.post-hero .breadcrumb svg,
.blog-hero .breadcrumb svg {
  width: 12px;
  height: 12px;
  opacity: 0.5;
}

/* Cabecera de calculadoras y categorías: CLARA, como la página de
   sueldo-neto del handoff Propuesta C (antes el rescue las pintaba en
   negro y convivían dos lenguajes). Temática: en dark se adapta sola. */
.calc-header,
.category-hero {
  background: var(--bg) !important;
  background-image: none !important;
  color: var(--text) !important;
  padding: 44px 0 36px !important;
  border-bottom: 1px solid var(--border) !important;
}
.calc-header *,
.category-hero * {
  color: inherit !important;
}
.calc-header a,
.category-hero a {
  color: var(--text-muted) !important;
}
.calc-header a:hover,
.category-hero a:hover {
  color: var(--text) !important;
}
.calc-header h1,
.category-hero h1 {
  color: var(--text) !important;
  font: 500 44px/1.1 var(--display) !important;
  letter-spacing: -0.03em !important;
  margin: 14px 0 !important;
}
.calc-header .breadcrumb,
.category-hero .breadcrumb {
  color: var(--text-subtle) !important;
  font: 500 12px/1 var(--mono) !important;
  letter-spacing: 0.06em !important;
}
.calc-header .breadcrumb a,
.category-hero .breadcrumb a {
  color: var(--text-subtle) !important;
}
.calc-header .breadcrumb svg,
.category-hero .breadcrumb svg {
  width: 12px;
  height: 12px;
  opacity: 0.6;
}
.calc-header .calc-subtitle,
.category-hero p {
  color: var(--text-muted) !important;
  font: 400 17px/1.5 var(--sans) !important;
  max-width: 70ch;
  opacity: 1 !important; /* algunos <style> locales bajaban opacity y rompían AA */
}
.post-hero .post-tag,
.post-hero .post-meta-item,
.post-hero .badge,
.blog-hero .post-tag,
.blog-hero .badge {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  color: #fff !important;
  padding: 6px 12px !important;
  border-radius: 99px !important;
  font: 500 12px/1 var(--mono) !important;
  letter-spacing: 0.06em !important;
}
.post-hero .post-tag.pillar,
.post-hero .badge.pillar {
  background: var(--lime-400) !important;
  color: var(--gray-900) !important;
  border-color: transparent !important;
}

/* Subtítulo / lede del hero oscuro (blog/legales) */
.post-hero p,
.blog-hero p,
.page-hero p {
  color: rgba(255, 255, 255, 0.75) !important;
  font: 400 17px/1.5 var(--sans) !important;
}

/* Hero verde sólido del blog post → negro */
[style*="background: linear-gradient(135deg, rgb(34"],
[style*="background:linear-gradient(135deg, rgb(34"],
[style*="rgb(34, 197, 94)"],
[style*="rgb(34,197,94)"],
[style*="rgb(16, 185, 129)"],
[style*="rgb(16,185,129)"] {
  background: var(--gray-900) !important;
  color: #fff !important;
}

/* Cuadros highlight de "Calculadoras relacionadas" del legacy */
.related-calculators,
.calc-related {
  background: transparent !important;
}
.related-calculators a,
.calc-related a {
  background: var(--surface-2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  padding: 16px !important;
  color: var(--text) !important;
  text-decoration: none !important;
  transition: border-color 0.15s, transform 0.15s;
}
.related-calculators a:hover,
.calc-related a:hover {
  border-color: var(--gray-900) !important;
  transform: translateY(-1px);
}

/* =====================================================================
   COMPONENTES no rescatados hasta ahora
   Clases que solo existían en main.legacy.css (no cargado) y que usan
   el hub /calculadoras/, las páginas de categoría, las legales y las
   calculadoras distintas de sueldo-neto (steppers, gráficos de barras,
   badges del hero, desgloses, etc.). Reescritas con los tokens del
   branding (Propuesta C — monocromo + lima).
   ===================================================================== */

/* Hero stats (hub + cabeceras de categoría) — fila de métricas */
.hero-stats{
  display:flex; flex-wrap:wrap; gap:2.5rem;
  margin-top:2.5rem; padding-top:1.75rem; border-top:1px solid var(--border);
}
.hero-stat-value{
  font:600 2rem/1 var(--display); letter-spacing:-.02em;
  color:var(--text); font-variant-numeric:tabular-nums;
}
.hero-stat-label{
  font:500 11px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase;
  color:var(--text-muted); margin-top:.45rem;
}

/* Cabeceras de sección genéricas */
.section-header{ text-align:center; max-width:720px; margin:0 auto 2.5rem; }
.section-badge{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.4rem 1rem; background:var(--lime-100); border-radius:999px;
  font:600 13px/1 var(--sans); color:var(--gray-900); margin-bottom:1rem;
}
.section-badge svg{ width:15px; height:15px; }
.section-description{ font-size:1.0625rem; color:var(--text-muted); line-height:1.6; }
.section-alt{ background:var(--surface-2); }

/* Tarjetas de categoría (hub) — el degradado del header va inline en el PHP */
.category-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.5rem; }
.category-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl);
  overflow:hidden; display:flex; flex-direction:column;
  transition:border-color .18s, box-shadow .18s, transform .18s;
}
.category-card:hover{ border-color:var(--gray-900); box-shadow:var(--shadow-md); transform:translateY(-2px); }
.category-header{ display:flex; align-items:center; gap:1rem; padding:1.25rem; }
.category-icon{
  width:44px; height:44px; border-radius:10px; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
}
.category-icon svg{ width:22px; height:22px; }
.category-title{ font:600 1.0625rem/1.2 var(--display); }
/* ============================================================
   TARJETA DE CALCULADORA — estándar único (claro y oscuro).
   Antes convivían 3 estilos: las .card de categorías sin caja (pasaban
   inadvertidas), las .popular-card del hub con su propio look y las
   "Calculadoras relacionadas" de cada calc con estilos inline (fondo
   var(--bg-card) v1, radius 16, icono gris). Una sola apariencia:
   caja visible, icono de marca gray-900+lima, hover con elevación.
============================================================ */
.card-grid .card,
.popular-card,
a[style*="var(--bg-card)"] {
  display: block;
  background: var(--surface) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: 10px !important;
  padding: 22px !important;
  box-shadow: none !important;
  text-decoration: none !important;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease !important;
}
.card-grid .card:hover,
.popular-card:hover,
a[style*="var(--bg-card)"]:hover {
  border-color: var(--gray-900) !important;
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-2px);
}
[data-theme="dark"] .card-grid .card,
[data-theme="dark"] .popular-card,
[data-theme="dark"] a[style*="var(--bg-card)"] {
  background: var(--surface-2) !important;
}
[data-theme="dark"] .card-grid .card:hover,
[data-theme="dark"] .popular-card:hover,
[data-theme="dark"] a[style*="var(--bg-card)"]:hover {
  border-color: var(--lime-400) !important;
}
/* Icono de marca también en las relacionadas (traían surface-2 + icono gris) */
a[style*="var(--bg-card)"] div[style*="var(--surface-2)"] {
  background: var(--gray-900) !important;
  border-radius: 10px !important;
}
a[style*="var(--bg-card)"] div[style*="var(--surface-2)"] svg {
  color: var(--lime-400) !important;
}
/* El hub de categorías gana el mismo hover para ser igual de navegable */
.category-card {
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.category-card:hover {
  border-color: var(--gray-900);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
[data-theme="dark"] .category-card:hover {
  border-color: var(--lime-400);
}

/* !important: el <style> del hub redefine .category-links con padding
   lateral 0 y los nombres quedaban pegados al borde de la card */
.category-links{ display:flex; flex-direction:column; padding:.35rem 1.25rem .75rem !important; flex:1; }
.category-links a{
  display:flex; align-items:center; justify-content:space-between;
  padding:.65rem 0 !important; font-size:.9375rem; color:var(--text);
  border-bottom:1px solid var(--border);
}
.category-links a:last-child{ border-bottom:none; }
.category-links a:hover{ color:var(--text); }
.category-links a svg{ width:16px; height:16px; color:var(--text-subtle); }
.category-footer{
  display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  margin-top:auto; padding:.95rem 1.25rem; border-top:1px solid var(--border);
  background:var(--surface-2); font:600 13px/1 var(--sans); color:var(--text);
}
.category-footer svg{ width:16px; height:16px; }

/* CTA oscura (hub) */
.cta-section{ background:var(--gray-900); padding:4.5rem 0; text-align:center; color:#fff; }
.cta-title{ font:600 clamp(1.6rem,4vw,2.4rem)/1.15 var(--display); letter-spacing:-.02em; margin:0 0 1rem; color:#fff; }
.cta-description{ font-size:1.0625rem; color:#bcbcbc; max-width:560px; margin:0 auto 2rem; line-height:1.6; }
.cta-section .btn-secondary{ background:var(--lime-400); color:var(--gray-900); border-color:var(--lime-400); }
.cta-section .btn-secondary:hover{ background:var(--lime-500); border-color:var(--lime-500); }

/* Hero de calculadora: título + badges (sobre fondo oscuro) */
.calc-title{ font:700 1.75rem/1.2 var(--display); margin:.5rem 0; }
.calc-badges{ display:flex; gap:.6rem; margin-top:1rem; flex-wrap:wrap; }
/* Pills claras estilo handoff (antes rgba blanca para el hero negro) */
.calc-badge{
  display:inline-flex; align-items:center; gap:.45rem; padding:.45rem .85rem;
  background:var(--surface); border:1px solid var(--border-strong);
  border-radius:999px; font:500 12px/1 var(--mono); letter-spacing:.02em;
  color:var(--text) !important;
}
.calc-badge svg{ width:13px; height:13px; color:var(--lime-500); }
[data-theme="dark"] .calc-badge svg{ color:var(--lime-400); }

/* Título pequeño de sección dentro de la calc */
.section-title-sm{
  display:flex; align-items:center; gap:.5rem;
  font:600 12px/1.2 var(--mono); color:var(--text-muted);
  text-transform:uppercase; letter-spacing:.08em; margin-bottom:1rem;
}
.section-title-sm svg{ width:16px; height:16px; }

/* Steppers numéricos (hijos a cargo, nº de años, etc.) */
.counter-group{ display:flex; align-items:center; gap:1rem; }
.counter-label{ flex:1; font-size:.9375rem; }
.counter-controls{ display:flex; align-items:center; gap:.5rem; }
.counter-btn{
  width:38px; height:38px; display:flex; align-items:center; justify-content:center;
  background:var(--surface-2); border:1px solid var(--border-strong); border-radius:8px;
  color:var(--text); cursor:pointer; transition:background .15s, border-color .15s, color .15s;
}
.counter-btn:hover{ background:var(--gray-900); border-color:var(--gray-900); color:#fff; }
.counter-btn svg{ width:18px; height:18px; }
.counter-value{ min-width:48px; text-align:center; font:600 1.125rem/1 var(--sans); font-variant-numeric:tabular-nums; }

/* Gráfico de barras de distribución (neto / SS / IRPF) — paleta del branding */
.chart-section{ margin-top:1.5rem; padding-top:1.5rem; border-top:1px solid var(--border); }
.chart-title{ font:600 12px/1.2 var(--mono); color:var(--text-muted); text-transform:uppercase; letter-spacing:.08em; margin-bottom:1rem; }
.chart-bar{ display:flex; height:34px; border-radius:8px; overflow:hidden; }
.chart-segment{ display:flex; align-items:center; justify-content:center; font:600 .75rem/1 var(--sans); transition:width .5s ease; min-width:30px; }
.chart-segment.neto{ background:var(--lime-400); color:var(--gray-900); }
.chart-segment.ss{ background:var(--gray-500); color:#fff; }
.chart-segment.irpf{ background:var(--gray-600); color:#fff; }
.chart-legend{ display:flex; justify-content:center; gap:1.5rem; margin-top:1rem; flex-wrap:wrap; }
.legend-item{ display:flex; align-items:center; gap:.4rem; font-size:.8125rem; color:var(--text-muted); }
.legend-dot{ width:10px; height:10px; border-radius:50%; }
.legend-dot.neto{ background:var(--lime-400); }
.legend-dot.ss{ background:var(--gray-500); }
.legend-dot.irpf{ background:var(--gray-600); }

/* Desglose de resultado (breakdown) */
.breakdown-list{ display:flex; flex-direction:column; gap:.6rem; }
.breakdown-item{
  display:flex; justify-content:space-between; align-items:center;
  padding:.75rem 1rem; background:var(--surface-2); border:1px solid var(--border); border-radius:10px;
}
.breakdown-label{ display:flex; align-items:center; gap:.5rem; font-size:.875rem; color:var(--text-muted); }
.breakdown-label svg{ width:16px; height:16px; }
.breakdown-value{ font:600 .9375rem/1 var(--sans); font-variant-numeric:tabular-nums; }
.breakdown-item.deduction .breakdown-value,
.breakdown-value.neg{ color:var(--negative); }
.breakdown-item.total{ background:var(--lime-100); border-color:transparent; margin-top:.5rem; }
.breakdown-item.total .breakdown-label,
.breakdown-item.total .breakdown-value{ font-weight:600; color:var(--gray-900); }
.results-monthly{ font-size:1rem; opacity:.9; margin-top:.25rem; }

/* Cards genéricas (sobre-nosotros, plantilla de categoría) */
.card-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:1.5rem; }
.card-grid.cols-2{ grid-template-columns:repeat(2,1fr); }
.card-icon{
  display:flex; align-items:center; justify-content:center; width:52px; height:52px;
  background:var(--lime-100); border-radius:var(--r-lg); margin-bottom:1rem; color:var(--gray-900);
}
.card-icon svg{ width:26px; height:26px; }
.card-title{ font:600 1.2rem/1.25 var(--display); margin-bottom:.5rem; }
.card-description{ font-size:.9375rem; color:var(--text-muted); margin-bottom:1rem; line-height:1.55; }

/* Formularios (contacto) */
.input-group{ position:relative; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.form-input,.form-select,.form-textarea{
  width:100%; padding:.75rem 1rem; background:var(--surface);
  border:1px solid var(--border-strong); border-radius:var(--r-md);
  color:var(--text); font-size:.9375rem;
}
.form-input:focus,.form-select:focus,.form-textarea:focus{
  outline:none; border-color:var(--gray-900);
  box-shadow:0 0 0 3px color-mix(in oklab, var(--gray-900) 12%, transparent);
}
.form-label{ display:block; font:600 13px/1 var(--sans); margin-bottom:.4rem; color:var(--text); }

/* Contenido de artículo (páginas legales) */
.article-content{ max-width:760px; }
.article-content h2{ font:600 1.5rem/1.3 var(--display); margin:2rem 0 1rem; }
.article-content h2:first-child{ margin-top:0; }
.article-content h3{ font:600 1.2rem/1.3 var(--display); margin:1.5rem 0 .75rem; }
.article-content p{ margin-bottom:1rem; line-height:1.7; color:var(--text-muted); }
.article-content ul,.article-content ol{ margin-bottom:1rem; padding-left:1.5rem; }
.article-content li{ margin-bottom:.5rem; line-height:1.6; color:var(--text-muted); }
.article-content li strong,.article-content p strong{ color:var(--text); }
.article-content a{ color:var(--text); text-decoration:underline; }
.article-content a:hover{ text-decoration:none; }
.article-content table{ width:100%; border-collapse:collapse; margin:1rem 0; }
.article-content th,.article-content td{ padding:.75rem; text-align:left; border-bottom:1px solid var(--border); }
.article-content th{ background:var(--surface-2); font-weight:600; }

/* Responsive de los componentes rescatados */
@media (max-width:768px){
  .category-grid{ grid-template-columns:1fr; }
  .card-grid.cols-2{ grid-template-columns:1fr; }
}

/* Cinturón en móvil: ningún elemento puede provocar scroll lateral del
   documento (los px sueltos que sobresalgan se recortan). Solo ≤900px:
   en desktop el clip en html interfiere con el sticky de las
   result-cards (quirk de Chromium), y en móvil el layout es de una
   columna y el sticky no tiene recorrido. */
@media (max-width:900px){
  html, body{ overflow-x: clip; }
}

/* Grid de 2 columnas que colapsa en móvil (sustituye grids inline sin
   media query de sobre-nosotros y contacto, que desbordaban el viewport) */
.two-col-responsive{ display:grid; grid-template-columns:1fr 1fr; gap:2.5rem; align-items:center; }
.two-col-responsive.wide-left{ grid-template-columns:1.5fr 1fr; align-items:start; }
@media (max-width:860px){
  .two-col-responsive, .two-col-responsive.wide-left{ grid-template-columns:1fr; }
}

/* Toggles con textos largos: en pantallas estrechas el nowrap los hacía
   desbordar el form-card (p. ej. "Enfermedad común / accidente no laboral"). */
@media (max-width:640px){
  .toggle-group{ flex-wrap:wrap; }
  .toggle-group .toggle-btn{ white-space:normal; line-height:1.25; padding:10px 8px; flex:1 1 45%; }
}

/* Restos de paleta v1 en estilos INLINE: pasos numerados de las guías
   (círculos ámbar #d97706), cluster-icons del blog y similares → marca
   (negro + lima). Los .dot pequeños del blog van aparte, en lima. */
.dot[style*="background: #"],
.dot[style*="background:#"] {
  background: var(--lime-500) !important;
}
[data-theme="dark"] .dot[style*="background: #"],
[data-theme="dark"] .dot[style*="background:#"] {
  background: var(--lime-400) !important;
}
span[style*="background: #d97706"], span[style*="background:#d97706"],
span[style*="background: #22c55e"], span[style*="background:#22c55e"],
span[style*="background: #2563eb"], span[style*="background:#2563eb"],
span[style*="background: #8b5cf6"], span[style*="background:#8b5cf6"],
span[style*="background: #ec4899"], span[style*="background:#ec4899"],
span[style*="background: #0891b2"], span[style*="background:#0891b2"],
span[style*="background: #4f46e5"], span[style*="background:#4f46e5"],
div.cluster-icon[style*="background"] {
  background: var(--gray-900) !important;
  color: var(--lime-400) !important;
}

/* Guías "cómo se calcula" (.field-guide): cuando hay EXACTAMENTE 4
   cards, 2×2 en desktop en vez de 3+1 (huérfana en segunda línea).
   Con 3, 5 o 6 cards no cambia. Navegadores sin :has() conservan el
   comportamiento original. */
@media (min-width: 901px){
  .field-guide:has(> :nth-child(4)):not(:has(> :nth-child(5))){
    grid-template-columns: 1fr 1fr !important;
  }
}

/* Tablas de contenido: scroll horizontal propio en pantallas estrechas.
   Sin esto desbordan el viewport, descentran el container y el texto
   queda pegado/cortado en los márgenes. */
@media (max-width:760px){
  .seo-content table,
  .guide-section table,
  .calc-page table,
  .post-content table,
  .article-content table,
  .faq-section table{
    display:block;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    max-width:100%;
  }
}
@media (max-width:640px){
  .hero-stats{ gap:1.5rem; }
  .hero-stat-value{ font-size:1.6rem; }
  .form-row{ grid-template-columns:1fr; }
  .chart-legend{ gap:1rem; }
}