/* Tema "Fersa Tools · Extensión BIM": encabezado blanco, portada navy, botones dorados, cuerpo claro, IBM Plex.
   Se inyecta al construir el sitio en todas las páginas (tools/construir.cjs). La paleta de Tailwind se remapea
   en construir.cjs; aquí van los ajustes que el remapeo no cubre (portadas, encabezado y botones). */
:root { --navy: #14305E; --navy2: #0F2547; --oro: #F2B705; --texto: #16202E; --gris: #4A5565; --borde: #E3E8EF; --claro: #EEF2F7; --azul: #1E4C8A; }
body { font-family: 'IBM Plex Sans', 'Segoe UI', sans-serif !important; background: #FFFFFF !important; color: var(--texto) !important; }
.font-mono, code, kbd { font-family: 'IBM Plex Mono', monospace !important; }

/* Encabezado blanco con menú navy */
header { background: rgba(255,255,255,.97) !important; border-bottom: 1px solid var(--borde) !important; box-shadow: 0 1px 0 rgba(20,48,94,.04); }
header nav a, header a span, header span { color: var(--navy) !important; }
header nav a:hover { color: var(--azul) !important; }

/* Portadas (hero) en navy, con texto blanco */
.mesh-gradient, .mesh, .fersa-hero { background: var(--navy) !important; background-image: none !important; }
.mesh-gradient h1, .mesh h1, .mesh-gradient h2, .mesh h2, .mesh-gradient .text-white, .mesh .text-white,
.mesh-gradient .font-bold, .mesh .font-bold, .mesh-gradient .font-extrabold, .mesh .font-extrabold { color: #FFFFFF !important; }
.mesh-gradient .bg-clip-text, .mesh .bg-clip-text { color: transparent !important; background-image: linear-gradient(90deg, #F2B705, #FFD45C) !important; }
/* Tarjetas dentro de la portada: blancas con texto navy */
.mesh-gradient .bg-fersa-card\/60, .mesh-gradient .bg-fersa-card\/80, .mesh .bg-fersa-card\/80 { background: rgba(255,255,255,.08) !important; border-color: rgba(255,255,255,.18) !important; }
/* Menú compacto en una sola línea */
header nav { gap: 1.25rem !important; white-space: nowrap; font-size: .85rem; }
header nav > * { margin-left: 0 !important; }
.mesh-gradient p, .mesh p { color: #C9D6E5 !important; }
.mesh-gradient .text-fersa-cyan, .mesh .text-fersa-cyan { color: var(--oro) !important; letter-spacing: .12em; font-family: 'IBM Plex Mono', monospace; }
.grid-pattern { background-image: none !important; }

/* Botón principal dorado con texto navy; secundarios con borde */
.from-fersa-accent, .bg-fersa-accent { background: var(--oro) !important; background-image: none !important; color: var(--navy) !important; box-shadow: none !important; }
.from-fersa-accent *, .bg-fersa-accent * { color: var(--navy) !important; }
header .from-fersa-accent, header .bg-fersa-accent { background: var(--navy) !important; color: #FFFFFF !important; }
header .from-fersa-accent *, header .bg-fersa-accent * { color: #FFFFFF !important; }
.mesh-gradient a.border, .mesh a.border { border-color: #FFFFFF !important; background: transparent !important; }
.mesh-gradient a.border *, .mesh a.border *, .mesh-gradient a.border, .mesh a.border { color: #FFFFFF !important; }

/* Tarjetas claras con borde suave */
.rounded-2xl, .rounded-3xl, .rounded-xl { border-color: var(--borde); }
.shadow-2xl { box-shadow: 0 10px 30px rgba(20,48,94,.10) !important; }
section { border-color: var(--borde) !important; }

/* Bloques oscuros que deben seguir oscuros (simulaciones de software dentro de las demos) */
#videoCanvas, #videoCanvas * { color: inherit; }
#videoCanvas { background: #0B1426 !important; }