/* ==========================================================================
   Páginas y artículos heredados → sistema v2.4 (design-system/DESIGN.md, tabla
   «Páginas y artículos heredados»). Solo en <body class="af-heredado">.
   El texto no se toca: cambian la letra, los colores, las cajas y los botones.
   Va con !important porque cada página trae su propio CSS (Tailwind, <style> e inline).
   ========================================================================== */

/* Una sola sans: Satoshi. Se quedan el mono de las cifras y las fuentes de iconos. */
.af-heredado :is(.af-legado, .af-articulo__cuerpo) :not(code, pre, kbd, samp, .font-mono, .fa, .fas, .far, .fab, .fa-solid, .fa-regular, .fa-brands, svg, svg *) {
  font-family: var(--f-texto) !important;
}
.af-heredado :is(.af-legado, .af-articulo__cuerpo) :is(code, pre, kbd, samp, .font-mono) { font-family: var(--f-datos) !important; }

/* Titulares en tinta, en frase normal; la palabra clave, si ya iba resaltada, con la luz. */
.af-heredado :is(.af-legado, .af-articulo__cuerpo) :is(h1, h2, h3, h4, h5, h6) {
  color: var(--texto) !important;
  -webkit-text-fill-color: currentColor !important;
  background-image: none !important;
  text-transform: none !important;
  letter-spacing: -0.015em !important;
  font-weight: 600 !important;
  border-color: var(--linea) !important;
}
.af-heredado :is(.af-legado, .af-articulo__cuerpo) :is(h1, h2) { letter-spacing: -0.03em !important; line-height: 1.08 !important; }
.af-heredado :is(.af-legado, .af-articulo__cuerpo) :is(h1, h2, h3) :is(span, strong, em)[class*="text-"] { color: var(--luz) !important; -webkit-text-fill-color: currentColor !important; background: none !important; box-shadow: none !important; }
.af-heredado .gradient-text { background: none !important; color: var(--texto) !important; -webkit-text-fill-color: currentColor !important; }
.af-heredado :is(.af-legado, .af-articulo__cuerpo) .uppercase:is(h1, h2, h3, h4, p, span, div) { text-transform: none !important; letter-spacing: 0 !important; }

/* Los colores de otras marcas y los rojos o celestes de antes vuelven al sistema:
   la luz para cifras y enlaces, tinta para el resto. */
.af-heredado :is(.af-legado, .af-articulo__cuerpo) :is([class*="text-nvidia"], [class*="text-microsoft"], [class*="text-brand-red"], [class*="text-red-6"], [class*="text-red-7"], [class*="text-sky-"], [class*="text-cyan-"]) {
  color: var(--texto) !important;
}
.af-heredado :is(.af-legado, .af-articulo__cuerpo) :is(p, li, td, dd, blockquote) a:not([class*="boton"], [class*="btn"], [class*="button"]) {
  color: var(--luz) !important;
  text-decoration: underline !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 3px !important;
}

/* Cajas de colores: panel capa-1 con filete de 1 px; la frase destacada, cita. */
.af-heredado :is(.af-legado, .af-articulo__cuerpo) :is(
  [class*="border-green-"], [class*="border-red-"], [class*="border-blue-"], [class*="border-sky-"], [class*="border-emerald-"],
  [class*="border-yellow-"], [class*="border-microsoft"], [class*="border-nvidia"], [class*="border-brand-"],
  [class*="bg-blue-9"], [class*="bg-red-9"], [class*="bg-green-9"], [class*="from-blue"], [class*="from-red"],
  .highlight-box, .summary-box, .cta-box, .faro-card, .warning-box, .info-box, .tip-box
) {
  background: var(--superficie) !important;
  background-image: none !important;
  border-color: var(--linea) !important;
  border-width: 0 !important;
  box-shadow: inset 0 0 0 1px var(--linea) !important;
  border-radius: 10px !important;
  color: var(--texto-2) !important;
}
.af-heredado :is(.af-legado, .af-articulo__cuerpo) :is([class*="border-l-4"], blockquote) {
  border-width: 0 0 0 2px !important;
  border-style: solid !important;
  border-color: var(--luz) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}
/* Tarjetas claras con texto oscuro dentro de la noche (preguntas de Nvidia): a la capa, con texto claro. */
.af-heredado .af-articulo__cuerpo :is([style*="background:#f"], [style*="background: #f"], [style*="background-color:#f"], [style*="background-color: #f"], [style*="background:#e"], [style*="background:white"], [style*="background:#fff"]) {
  background: var(--superficie) !important;
  box-shadow: inset 0 0 0 1px var(--linea) !important;
}
.af-heredado .af-articulo__cuerpo :is([style*="color:#0"], [style*="color:#1"], [style*="color:#2"], [style*="color:#3"], [style*="color: #0"], [style*="color: #1"], [style*="color: #2"], [style*="color: #3"]):not(a, button) { color: var(--texto-2) !important; }
.af-heredado .af-articulo__cuerpo :is(h2, h3, h4)[style*="color:#"] { color: var(--texto) !important; }
.af-heredado .af-articulo__cuerpo [style*="border-bottom:2px solid #e"] { border-bottom-color: var(--linea) !important; }

/* Botones: la píldora blanca del sistema, uno por pantalla. */
.af-heredado :is(.af-legado, .af-articulo__cuerpo) :is(a, button):is(
  .btn-primary, .cta-button, .wp-block-button__link, [class*="bg-brand-red"], [class*="bg-red-"], [class*="bg-blue-5"], [class*="bg-blue-6"],
  [class*="bg-nvidia"], [class*="bg-green-5"], [class*="bg-green-6"], [class*="bg-yellow-"], [class*="bg-amber-"]
) {
  background: var(--texto) !important;
  background-image: none !important;
  color: var(--noche) !important;
  -webkit-text-fill-color: currentColor !important;
  border: 0 !important;
  border-radius: 999px !important;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .9), inset 0 -2px 0 rgb(11 18 32 / .16), 0 1px 2px rgb(0 0 0 / .5), 0 10px 24px -10px rgb(0 0 0 / .7) !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  text-decoration: none !important;
}
.af-heredado :is(.af-legado, .af-articulo__cuerpo) :is(a, button):is(.btn-primary, .cta-button, .wp-block-button__link, [class*="bg-brand-red"], [class*="bg-red-"]):hover { background: #fff !important; }
/* Pestañas y filtros activos (diccionario, Nvidia): sin rojo ni verde. */
.af-heredado .dict-letter.active, .af-heredado .dict-letter:hover { background: var(--texto) !important; color: var(--noche) !important; border-color: var(--texto) !important; }
.af-heredado .nav-btn { text-transform: none !important; letter-spacing: 0 !important; background: transparent !important; color: var(--texto-3) !important; box-shadow: none !important; }
.af-heredado .nav-btn:is(.active, [aria-selected="true"]), .af-heredado .nav-btn[class*="text-nvidia"] { color: var(--texto) !important; border-color: var(--luz) !important; }
/* Halos y brillos de colores detrás de los botones: fuera. */
.af-heredado :is(.af-legado, .af-articulo__cuerpo) :is(.-inset-1[class*="bg-gradient"], .absolute[class*="blur-"][class*="bg-"]):not(img) { display: none !important; }

/* Iconos decorativos (cohete, emojis sueltos en cajas): fuera. */
.af-heredado :is(.af-legado, .af-articulo__cuerpo) .cta-box > :is(span, div):first-child:not(:has(*)):empty { display: none !important; }

/* Las llamadas a FARO antiguas dentro del contenido sobran: la del final (.llamada-faro) es la única.
   En las páginas (Sobre mí, calculadora) no hay llamada del tema: allí su botón se queda, en blanco. */
.af-heredado .af-articulo__cuerpo :is(.cta-box, div):has(> a[href*="faro.ascensofinanciero"], > a[href*="ascensofinanciero.com/faro"]),
.af-heredado .af-articulo__cuerpo section.overflow-hidden:has(a[href*="faro.ascensofinanciero"]),
.af-heredado .af-articulo__cuerpo :is(p, div).has-luminous-vivid-amber-background-color { display: none !important; }
.af-heredado .af-legado a[href*="faro.ascensofinanciero"]:is(.block, [class*="px-8"]) {
  display: inline-flex !important; align-items: center; gap: 10px; width: auto !important; padding: 12px 22px !important;
  background: var(--texto) !important; color: var(--noche) !important; border: 0 !important; border-radius: 999px !important;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .9), inset 0 -2px 0 rgb(11 18 32 / .16), 0 1px 2px rgb(0 0 0 / .5), 0 10px 24px -10px rgb(0 0 0 / .7) !important;
  font-weight: 500 !important; text-transform: none !important; letter-spacing: 0 !important; text-decoration: none !important;
}
.af-heredado .af-legado a[href*="faro.ascensofinanciero"]:is(.block, [class*="px-8"]) * { color: inherit !important; background: none !important; text-transform: none !important; letter-spacing: 0 !important; }

/* Portada de noche del tema (diccionario). */
.af-portada-noche {
  display: grid; place-items: end start; margin: 0 auto var(--e-5); max-width: var(--lectura);
  aspect-ratio: 16 / 7; padding: clamp(24px, 4vw, 40px); border-radius: 10px; overflow: hidden;
  background: radial-gradient(120% 90% at 85% 0%, rgb(245 201 87 / .18), transparent 55%), linear-gradient(180deg, #0B1428 0%, #070B14 100%);
  box-shadow: inset 0 0 0 1px var(--linea);
}
.af-portada-noche p { margin: 0; font: 600 clamp(32px, 5vw, 56px)/1.04 var(--f-titular); letter-spacing: -0.03em; color: var(--texto); }
.palabra-luz { color: var(--luz); text-shadow: 0 0 24px rgb(245 201 87 / .35); }

/* Detalles de AMD: los puntos de la línea temporal y el rojo de WordPress, a la luz y a tinta. */
.af-heredado .timeline-item::before { background: var(--luz) !important; box-shadow: none !important; border-color: var(--luz) !important; }
.af-heredado :is(.has-vivid-red-color, .has-color-3-color) { color: var(--texto) !important; }

/* Grises que no se leen sobre la noche (text-gray-600 sobre negro): al tercer tono de texto, 6,6:1. */
.af-heredado :is(.af-legado, .af-articulo__cuerpo) :is([class*="text-gray-6"], [class*="text-gray-7"], [class*="text-slate-6"], [class*="text-slate-7"]) { color: var(--texto-3) !important; }
/* Dos botones juntos: el segundo, de contorno (uno blanco por pantalla). */
.af-heredado .af-legado a[href*="faro.ascensofinanciero"][class*="bg-transparent"] { background: transparent !important; color: var(--texto) !important; box-shadow: inset 0 0 0 1px var(--linea-fuerte) !important; }
/* Filetes laterales rojos (ejemplos del diccionario, nota de los libros): a la luz, finos. */
.af-heredado .af-articulo__cuerpo :is([style*="border-left"], .dict-term-example, .dict-example) { border-left: 2px solid var(--luz) !important; }
.af-heredado .af-articulo__cuerpo [style*="border-left"] { border-top-color: var(--linea) !important; border-right-color: var(--linea) !important; border-bottom-color: var(--linea) !important; }
.af-heredado :is(.wp-block-button, .wp-block-buttons) { border: 0 !important; background: none !important; box-shadow: none !important; outline: 0 !important; }
/* Sobre mí: la captura real de su deuda se queda (es la prueba de la historia); fuera el giro, el filete rojo y la etiqueta roja. */
.af-heredado .af-legado .rotate-1 { transform: none !important; border-color: transparent !important; box-shadow: inset 0 0 0 1px var(--linea), 0 24px 48px -24px rgb(0 0 0 / .7) !important; }
.af-heredado .af-legado .rotate-1 > .mix-blend-overlay { display: none !important; }
.af-heredado .af-legado .rotate-1 > .absolute[class*="bg-red-6"] { background: var(--noche) !important; color: var(--texto) !important; box-shadow: inset 0 0 0 1px var(--linea-fuerte) !important; border-radius: 999px !important; font-weight: 500 !important; }
.af-heredado .af-legado .rotate-1 > .absolute[class*="bg-red-6"] i { color: var(--luz) !important; }