/* Estilo B "editorial ligero" de Orbi — aprobado por Manuel el 1-oct-2026 (inspirado en Klaviyo y Shopify).
   Hoja ÚNICA para todas las páginas: deploy/build.sh la copia a /estilo-b.css y la enlaza al final del <head> de cada
   página publicada (landing, temporadas, /en/, /conectar, /precios, /precios/gracias, /privacidad, /terminos,
   /reportes y el dashboard /app), así gana sobre los estilos propios de cada una. Cambia el estilo aquí, no en cada página.
   Reglas: una sola familia (Instrument Sans), títulos en peso normal con la frase clave en semi-negrita, texto con aire.
   El código y los datos siguen en su letra monoespaciada (JetBrains Mono / Geist Mono). */
@import url("https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600;700&display=swap");

html:root{ /* html:root gana aunque la página declare su :root después */
  --f-display:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-body:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --sans:"Instrument Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; /* dashboard /app */
}
html body{font-family:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
h1,h2{font-family:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif!important;font-weight:400!important;letter-spacing:-.022em!important}
h1 em,h2 em,h1 strong,h2 strong,h1 b,h2 b{font-style:normal!important;font-weight:600!important}
h3,h4,h5{font-family:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;font-weight:600!important;letter-spacing:-.01em}
button,input,select,textarea{font-family:inherit}

/* Landings de temporada (/buen-fin, /black-friday): la cifra grande y el sello */
.season-band b{font-weight:500!important;letter-spacing:-.03em!important}
.season-top b,.bfcm b{font-weight:600!important}
.bf-badge{font-weight:700!important}

/* ---------- TEMA CLARO (1-oct-2026, Manuel: "los colores negros no me llaman para Orbi, se ve un SaaS barato") ----------
   Las páginas comparten variables de color: las secciones que antes eran negras (--ink) ahora son gris muy claro,
   los paneles blancos y el texto casi negro. El azul sigue de acento. Abajo se corrigen los textos con blanco fijo. */
html:root{ /* html:root gana aunque la página declare su :root después */
  --ink:#F5F7FA; --ink-2:#FFFFFF; --ink-3:#EEF1F5;
  --line-d:#E3E7EE; --text-d:#16171A; --muted-d:#5B6270; --blue-hi:#2563EB;
}
/* Barra, consola, demo del panel, pie y piezas del diagnóstico que tenían el negro escrito a mano */
.nav{background:rgba(255,255,255,.9)!important;color:var(--text-d)!important;border-bottom-color:#E3E7EE!important}
.console{background:#FFFFFF!important;box-shadow:0 30px 70px -36px rgba(22,23,26,.28)!important}
.app,.panel{background:#FFFFFF!important}
.app-bar,.rf,.tile,.tech div,.ask{background:#F5F7FA!important}
footer{background:#F5F7FA!important;color:var(--text-d)!important}
.field input,.field select{background:#FFFFFF!important;color:var(--text-d)!important;border-color:#D5DBE5!important}
.top select{background:#FFFFFF!important;color:var(--text-d)!important;border-color:#D5DBE5!important}
.dropdown{box-shadow:0 24px 60px -24px rgba(22,23,26,.25)!important}
.btn-ghost{color:var(--text-d)!important;border-color:#CDD5E1!important}
.burger{color:var(--text-d)!important}
.scrim{background:rgba(22,23,26,.35)!important}
/* Textos que eran blancos sobre negro */
.logo,.menu a:hover,.menu button:hover,.menu a[aria-current],.dropdown a b,.first,.first-grid b,.niv-card.dark,.hero h1,
.console-foot b,.stat,.rule h3,.layer b,.step .dotn,.tab[aria-selected="true"],.side .brand,.side a.on,.main h4,.area b,
.chg-item span,.mini b:first-child,.why p,.brain-rows .finding b,.soon,.mode h3,.final h2,.foot h5,.foot a:hover,.panel-top b,
.scan-meta b,.stage h3,.gauge .val b,.rf .h b,.lock-cta b,.tile b,.tech div,.ask .q,.log .val,.top,.top b,.res h2,.agencia h3,
.hero h2,.hero h3,.dark h1,.dark h2,.dark h3,.dark h4,.dark b,.dark strong{color:var(--text-d)!important}
.menu a:hover,.menu button:hover,.menu a[aria-current]{background:rgba(37,99,235,.07)!important}
.lang[data-lang-actual="es"] a[data-lang="es"],.lang[data-lang-actual="en"] a[data-lang="en"]{background:var(--text-d)!important;color:#FFFFFF!important}
/* Lo que va sobre azul o negro a propósito conserva el blanco */
.btn-blue,.btn-blue *,.badge-new,.pill .dot,.v,.compare-head > div:last-child,.lang-aviso a,.agencia .btn,.btn.primary{color:#FFFFFF!important}
.pq-seg button[aria-pressed="true"]{background:var(--blue,#2563EB)!important;border-color:var(--blue,#2563EB)!important;color:#FFFFFF!important}
/* Demo del panel ("Así se ve trabajando") y tarjetas del diagnóstico: tarjetas claras con borde fino */
.app{border-color:#E3E7EE!important}
.area,.finding,.chg-item,.why,.side .acct,.kws span,.brain-rows .finding{background:#F5F7FA!important;border-color:#E3E7EE!important;color:var(--text-d)!important}
.app-bar span{background:#EEF1F5!important;color:#5B6270!important}
.side a.on,.tab[aria-selected="true"]{background:rgba(37,99,235,.09)!important;color:#1D4FD7!important}
.area b,.area span,.finding span,.finding p,.chg-item p,.why span{color:var(--text-d)!important}
.side,.app-bar,.main{border-color:#E3E7EE!important}

/* ---------- Dashboard /app (1-oct-2026): ahí --ink es el color del TEXTO, no el fondo oscuro de la landing ----------
   El tema claro de arriba lo volvía gris clarísimo y los títulos quedaban invisibles. Solo el dashboard tiene
   body > #root. También se deshacen los arreglos de la landing que chocan con clases del dashboard (.nav, .ask, .app). */
html:root:has(body > #root){ --ink:#22231E; }
@media (prefers-color-scheme:dark){ html:root:has(body > #root):not([data-theme="light"]){ --ink:#E9EBE4; } }
html:root[data-theme="dark"]:has(body > #root){ --ink:#E9EBE4; }
html:has(body > #root) .nav{background:none!important;color:inherit!important;border-bottom-color:transparent!important}
html:has(body > #root) .ask{background:var(--panel)!important}
html:has(body > #root) .app{background:transparent!important}