/* ============================================================
BITFIN — Cinematic Luxury Layer
Sobre styles.css. Añade motion, parallax, layered visuals,
reveals, cursor, hero fullscreen y atmósfera premium.
============================================================ */
/* ============================================================
TIPOGRAFÍA UNIFICADA · Sans-serif puro estilo Stripe/Brex/Mercury
Sin serif italic decorativo. La diferenciación viene del COLOR + PESO.
Vende confianza institucional a CFOs B2B.
============================================================ */
.serif-italic,
h1 .serif-italic,
h2 .serif-italic,
h3 .serif-italic,
h4 .serif-italic,
.hero h1 .serif-italic,
.product-hero h1 .serif-italic,
section .title .serif-italic,
.outcomes-hero .big .serif-italic,
.cta-strip h2 .serif-italic,
.outcomes-closing q,
.quote q {
font-family: var(--f-sans, 'Geist', system-ui, -apple-system, sans-serif) !important;
font-style: normal !important;
font-weight: 500 !important;
font-variation-settings: normal !important;
letter-spacing: -0.028em !important;
color: #C4ADFF !important;
}
/* La frase serif-italic en el hero es un poco más pequeña que el headline principal */
.hero h1 .serif-italic,
.product-hero h1 .serif-italic {
font-size: 0.82em !important;
}
/* ============================================================
CTA strip · jerarquía editorial entre las dos líneas
"Conecta tu operación." bold blanco
"Ve tus finanzas como nunca antes." más pequeña, gradient violet light
============================================================ */
section.cta-strip h2 {
line-height: 1.04 !important;
letter-spacing: -0.025em !important;
}
section.cta-strip h2 .serif-italic {
display: inline-block !important;
font-size: 0.58em !important;
font-weight: 400 !important;
letter-spacing: -0.015em !important;
margin-top: 0.18em !important;
color: rgba(255,255,255,0.78) !important;
background: none !important;
-webkit-text-fill-color: rgba(255,255,255,0.78) !important;
}
:root {
/* Motion premium */
--cine-ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* exit slow & smooth */
--cine-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* gallery transitions */
--cine-ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94);
--cine-dur-fast: 600ms;
--cine-dur: 1100ms;
--cine-dur-slow: 1600ms;
/* Aura & glow */
--aura-violet: rgba(109, 40, 217, 0.55);
--aura-violet-soft: rgba(155, 91, 255, 0.28);
--aura-deep: rgba(30, 10, 74, 0.95);
/* Cursor */
--cursor-size: 8px;
--cursor-ring: 36px;
}
/* Cuando Lenis está activo, neutralizamos el smooth nativo */
html.lenis { scroll-behavior: auto; }
html.lenis, html.lenis body { height: auto; }
html.lenis.lenis-smooth { scroll-behavior: auto; }
html.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
html.lenis.lenis-stopped body { overflow: clip; }
html.lenis.lenis-scrolling iframe { pointer-events: none; }
/* Tipografía: sutil refinamiento global */
body {
font-feature-settings: "ss01", "cv11", "ss02";
letter-spacing: -0.005em;
}
/* DARK MODE TOTAL · luxury cinematic con iluminación sutil */
html, body {
background: #120822 !important;
color: rgba(255,255,255,0.94);
overflow-x: hidden !important;
max-width: 100vw;
}
/* Logo del nav: presencia editorial fuerte */
html body header.nav .nav-logo img,
html body header.nav a.nav-logo img {
display: block !important;
height: 72px !important;
width: auto !important;
max-width: none !important;
max-height: none !important;
transition: transform 0.4s var(--cine-ease-out);
}
header.nav .nav-logo:hover img {
transform: scale(1.04);
}
@media (max-width: 1200px) {
html body header.nav .nav-logo img,
html body header.nav a.nav-logo img {
height: 56px !important;
}
}
@media (max-width: 768px) {
html body header.nav .nav-logo img,
html body header.nav a.nav-logo img {
height: 42px !important;
}
}
/* Nav: respetar layout del cliente, solo nowrap + altura ajustada */
html body header.nav .nav-inner {
height: 92px !important;
align-items: center !important;
padding-left: 64px !important;
padding-right: 32px !important;
}
@media (max-width: 1200px) {
html body header.nav .nav-inner {
height: 78px !important;
padding-left: 48px !important;
}
}
@media (max-width: 768px) {
html body header.nav .nav-inner {
padding-left: 24px !important;
padding-right: 16px !important;
}
}
html body header.nav .nav-link,
html body header.nav .nav-login,
html body header.nav .nav-actions,
html body header.nav .nav-links {
white-space: nowrap !important;
}
@media (max-width: 768px) {
html body header.nav .nav-inner { height: 60px !important; }
}
/* ============================================================
FOCUS VISIBLE · accesibilidad a teclado
============================================================ */
*:focus { outline: none; }
*:focus-visible {
outline: 2px solid var(--violet-500, #6d28d9);
outline-offset: 3px;
border-radius: 4px;
}
button:focus-visible,
a.btn:focus-visible {
outline-color: #C4ADFF;
outline-offset: 4px;
}
/* ============================================================
WHATSAPP FLOTANTE · canal #1 de venta B2B LATAM
============================================================ */
.wa-float {
position: fixed;
bottom: 24px;
right: 24px;
z-index: 999;
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 20px;
background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
color: #fff !important;
border-radius: 999px;
box-shadow:
0 14px 32px -8px rgba(37, 211, 102, 0.5),
0 6px 16px -4px rgba(0, 0, 0, 0.3),
0 0 0 1px rgba(255,255,255,0.15) inset;
font-family: var(--f-sans, system-ui);
font-size: 14px;
font-weight: 500;
text-decoration: none !important;
transition: transform 0.4s var(--cine-ease-out), box-shadow 0.4s, gap 0.4s;
will-change: transform;
animation: waFloat 4s ease-in-out infinite;
}
.wa-float:hover {
transform: translateY(-3px) scale(1.03);
box-shadow:
0 20px 40px -8px rgba(37, 211, 102, 0.6),
0 10px 20px -6px rgba(0, 0, 0, 0.4),
0 0 0 1px rgba(255,255,255,0.22) inset;
gap: 14px;
}
.wa-float svg {
width: 22px;
height: 22px;
flex-shrink: 0;
}
.wa-float .wa-pulse {
position: absolute;
top: -4px; right: -4px;
width: 12px; height: 12px;
background: #00FF7F;
border-radius: 50%;
box-shadow: 0 0 0 0 rgba(0, 255, 127, 0.5);
animation: waPulse 2s infinite;
}
@keyframes waPulse {
0% { box-shadow: 0 0 0 0 rgba(0, 255, 127, 0.7); }
70% { box-shadow: 0 0 0 14px rgba(0, 255, 127, 0); }
100% { box-shadow: 0 0 0 0 rgba(0, 255, 127, 0); }
}
@keyframes waFloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-4px); }
}
@media (max-width: 768px) {
.wa-float {
bottom: 16px;
right: 16px;
padding: 12px 16px;
font-size: 13px;
}
.wa-float .wa-text { display: none; }
.wa-float { padding: 14px; }
}
@media (prefers-reduced-motion: reduce) {
.wa-float, .wa-float .wa-pulse { animation: none !important; }
}
/* Logo del footer: editorial, gran presencia */
html body footer .footer-brand img,
html body footer img {
height: 100px !important;
width: auto !important;
max-width: none !important;
max-height: none !important;
margin-bottom: 24px;
}
@media (max-width: 768px) {
html body footer .footer-brand img,
html body footer img {
height: 72px !important;
}
}
body::before {
content: "";
position: fixed;
inset: 0;
background:
radial-gradient(ellipse 90% 55% at 50% -5%, rgba(155, 91, 255, 0.22), transparent 60%),
radial-gradient(ellipse 70% 50% at 0% 50%, rgba(109, 40, 217, 0.10), transparent 65%),
radial-gradient(ellipse 60% 50% at 100% 100%, rgba(196, 173, 255, 0.08), transparent 65%);
pointer-events: none;
z-index: 0;
opacity: 0.75;
}
body > * { position: relative; z-index: 1; }
/* Secciones que originalmente eran paper claras: forzar dark cinematic
con ambient light sutil que evita que se vean planas y muertas */
section.logos,
section.outcomes,
section:not(.dark):not(.hero):not(.product-hero):not(.transform):not(.cta-strip):not(.pipeline-strip) {
background: transparent !important;
color: rgba(255,255,255,0.9);
position: relative;
isolation: isolate;
}
section.logos::before,
section.outcomes::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
z-index: -1;
background:
radial-gradient(ellipse 60% 50% at 80% 20%, rgba(109, 40, 217, 0.10), transparent 65%),
radial-gradient(ellipse 70% 60% at 10% 90%, rgba(196, 173, 255, 0.08), transparent 65%);
}
/* Texto en secciones que eran claras: subir a colores legibles en dark */
section.logos .logos-label,
section.outcomes .lede,
section.outcomes .section-num,
section.outcomes .eyebrow {
color: rgba(255,255,255,0.78) !important;
}
section.outcomes h2.title,
section.outcomes h4 {
color: #fff !important;
}
section.outcomes h2.title .serif-italic { color: #C4ADFF !important; }
/* Outcome cards: bg dark con borde sutil */
/* Outcome cards más sutiles — el .big del cliente era enorme */
section.outcomes .outcomes-hero {
padding: 36px 40px !important;
min-height: auto !important;
}
section.outcomes .outcomes-hero .big {
font-size: clamp(44px, 4.8vw, 72px) !important;
line-height: 1.05 !important;
letter-spacing: -0.03em !important;
}
section.outcomes .outcomes-hero .num-tag {
font-size: 11px !important;
margin-bottom: 24px !important;
}
section.outcomes .outcomes-hero .h-title {
font-size: 18px !important;
margin-bottom: 10px !important;
}
section.outcomes .outcomes-hero .h-desc {
font-size: 13.5px !important;
line-height: 1.55 !important;
}
section.outcomes .outcomes-hero .bottom {
margin-top: 28px !important;
}
section.outcomes .outcomes-hero.dark,
section.outcomes .outcomes-hero.violet {
/* preserva los gradientes originales */
}
section.outcomes .outcome-sub {
background: rgba(255,255,255,0.03) !important;
border: 1px solid rgba(255,255,255,0.08) !important;
color: rgba(255,255,255,0.85) !important;
}
section.outcomes .outcome-sub h4 { color: #fff !important; }
section.outcomes .outcome-sub p { color: rgba(255,255,255,0.78) !important; }
section.outcomes .outcome-sub .marker { color: rgba(196, 173, 255, 0.85) !important; }
/* Quote/outcomes closing */
section.outcomes .outcomes-closing q,
.quote q { color: #fff !important; }
section.outcomes .outcomes-closing .by { color: rgba(255,255,255,0.5) !important; }
/* Logos cells visibles en dark */
.logo-cell { color: rgba(255,255,255,0.55) !important; }
/* Footer dark */
footer {
background: #050308 !important;
border-top: 1px solid rgba(255,255,255,0.08);
color: rgba(255,255,255,0.72);
}
footer h5 { color: rgba(255,255,255,0.92) !important; }
footer a { color: rgba(255,255,255,0.6) !important; }
footer a:hover { color: rgba(196,173,255,1) !important; }
footer .footer-bottom { color: rgba(255,255,255,0.4); border-top-color: rgba(255,255,255,0.08); }
footer .footer-brand p { color: rgba(255,255,255,0.55) !important; }
/* Anchor-row de páginas de producto: dark también */
.anchor-row {
background: rgba(255,255,255,0.025) !important;
border-top: 1px solid rgba(255,255,255,0.06);
border-bottom: 1px solid rgba(255,255,255,0.06);
}
.anchor-row a { color: rgba(255,255,255,0.6) !important; }
.anchor-row a:hover { color: #fff !important; }
.anchor-row .lbl { color: rgba(255,255,255,0.45) !important; }
/* ============================================================
MEGA-MENU · dark luxury con depth, glow y mesh
============================================================ */
.mm-panel {
background:
radial-gradient(ellipse 60% 50% at 20% 0%, rgba(109, 40, 217, 0.22), transparent 60%),
radial-gradient(ellipse 50% 40% at 90% 100%, rgba(196, 173, 255, 0.10), transparent 65%),
rgba(10, 6, 18, 0.96) !important;
backdrop-filter: blur(32px) saturate(180%);
-webkit-backdrop-filter: blur(32px) saturate(180%);
border: 1px solid rgba(255,255,255,0.10) !important;
box-shadow:
0 60px 140px -20px rgba(0, 0, 0, 0.85),
0 30px 60px -10px rgba(109, 40, 217, 0.45),
0 0 0 1px rgba(196,173,255,0.06) inset,
0 1px 0 0 rgba(255,255,255,0.08) inset !important;
color: rgba(255,255,255,0.85);
overflow: hidden;
isolation: isolate;
position: absolute !important;
pointer-events: none;
opacity: 0;
max-width: calc(100vw - 32px) !important;
}
/* — Mega-menú anclado al viewport en pantallas < 1400px para que no se salga — */
@media (max-width: 1400px) {
.mm-panel {
position: fixed !important;
top: 78px !important;
left: 50% !important;
right: auto !important;
transform: translateX(-50%) translateY(8px) !important;
width: min(1080px, calc(100vw - 32px)) !important;
max-width: calc(100vw - 32px) !important;
transition: opacity 0.22s ease, transform 0.32s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.has-mm.open > .mm-panel {
transform: translateX(-50%) translateY(0) !important;
}
}
@media (max-width: 720px) {
.mm-panel { display: none !important; }
}
/* Solo visible cuando el .has-mm padre está open */
.has-mm.open > .mm-panel {
opacity: 1 !important;
pointer-events: auto !important;
}
/* Las has-mm que tienen el mega-menu NO deben expandir el nav-links */
.has-mm {
position: relative;
}
/* Floating orb decorativo detrás del mega-menu */
.mm-panel::before {
content: "";
position: absolute;
top: -30%;
right: -10%;
width: 50%;
height: 80%;
background: radial-gradient(circle, rgba(155,91,255,0.18), transparent 65%);
filter: blur(50px);
pointer-events: none;
z-index: -1;
animation: mmOrbDrift 14s ease-in-out infinite;
}
@keyframes mmOrbDrift {
0%, 100% { transform: translate(0, 0) scale(1); }
50% { transform: translate(-3%, 4%) scale(1.08); }
}
.mm-panel .mm-title {
color: #fff !important;
font-weight: 500 !important;
}
.mm-panel .mm-title .serif-italic {
color: #C4ADFF !important;
font-family: var(--f-serif) !important;
}
.mm-panel .mm-subtitle {
color: rgba(196,173,255,0.85) !important;
}
.mm-panel .mm-section-label {
color: rgba(255,255,255,0.45) !important;
font-weight: 500 !important;
letter-spacing: 0.18em !important;
}
/* ===== Product cards: depth 3D + glow ===== */
.mm-product {
position: relative;
background: rgba(255,255,255,0.03) !important;
border: 1px solid rgba(255,255,255,0.10) !important;
color: rgba(255,255,255,0.85);
transition: transform 0.5s var(--cine-ease-out),
background 0.4s,
border-color 0.4s,
box-shadow 0.5s var(--cine-ease-out) !important;
overflow: hidden;
isolation: isolate;
}
.mm-product::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(circle at 20% 0%, rgba(196,173,255,0.18), transparent 60%);
opacity: 0;
transition: opacity 0.5s var(--cine-ease-out);
pointer-events: none;
z-index: 0;
}
.mm-product > * { position: relative; z-index: 1; }
.mm-product:hover {
transform: translateY(-4px) scale(1.012);
border-color: rgba(196,173,255,0.4) !important;
box-shadow:
0 30px 60px -15px rgba(0,0,0,0.6),
0 12px 30px -10px rgba(109,40,217,0.45),
0 0 0 1px rgba(196,173,255,0.15) inset;
}
.mm-product:hover::before { opacity: 1; }
.mm-product.dark {
background: linear-gradient(135deg, rgba(30,16,50,0.9), rgba(20,8,31,1)) !important;
border-color: rgba(255,255,255,0.10) !important;
box-shadow:
0 14px 30px -10px rgba(0,0,0,0.5),
0 0 0 1px rgba(255,255,255,0.04) inset;
}
.mm-product.dark::after {
content: "";
position: absolute;
top: -50%; left: -20%;
width: 60%; height: 200%;
background: radial-gradient(ellipse, rgba(196,173,255,0.12), transparent 60%);
filter: blur(30px);
pointer-events: none;
z-index: 0;
}
.mm-product.violet {
background:
radial-gradient(circle at 30% 20%, rgba(196,173,255,0.5), transparent 60%),
linear-gradient(135deg, var(--violet-600, #5b21b6) 0%, var(--violet-800, #3b1789) 50%, var(--violet-950, #1e0a4a) 100%) !important;
border-color: rgba(196,173,255,0.35) !important;
color: #fff;
box-shadow:
0 18px 40px -10px rgba(109,40,217,0.6),
0 8px 20px -6px rgba(0,0,0,0.5),
0 0 0 1px rgba(255,255,255,0.12) inset,
0 -2px 6px rgba(255,255,255,0.08) inset;
}
.mm-product.violet:hover {
box-shadow:
0 30px 70px -10px rgba(109,40,217,0.75),
0 16px 36px -8px rgba(0,0,0,0.55),
0 0 0 1px rgba(196,173,255,0.4) inset,
0 -2px 8px rgba(255,255,255,0.14) inset;
}
.mm-product h4 {
color: #fff !important;
font-weight: 500 !important;
letter-spacing: -0.015em;
}
.mm-product p { color: rgba(255,255,255,0.75) !important; }
.mm-product.violet p { color: rgba(255,255,255,0.92) !important; }
/* Glyph icon en mega-menu: cuadro 3D con gradient */
.mm-product .mm-glyph {
background: linear-gradient(135deg, rgba(196,173,255,0.18), rgba(109,40,217,0.32)) !important;
border: 1px solid rgba(196,173,255,0.25) !important;
color: #fff !important;
box-shadow:
0 6px 14px -4px rgba(109,40,217,0.45),
0 0 0 1px rgba(255,255,255,0.08) inset;
width: 44px !important;
height: 44px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 12px !important;
font-size: 20px !important;
transition: transform 0.4s var(--cine-ease-out), box-shadow 0.4s;
}
.mm-product:hover .mm-glyph {
transform: scale(1.08) rotate(-3deg);
box-shadow:
0 10px 22px -4px rgba(109,40,217,0.6),
0 0 0 1px rgba(196,173,255,0.25) inset;
}
.mm-product.violet .mm-glyph {
background: rgba(255,255,255,0.18) !important;
border-color: rgba(255,255,255,0.32) !important;
box-shadow:
0 6px 14px -4px rgba(0,0,0,0.3),
0 0 0 1px rgba(255,255,255,0.18) inset;
}
/* Bullets violeta con glow */
.mm-layer-cap.primary::before,
.mm-layer-cap::before {
background: radial-gradient(circle, #C4ADFF, #6d28d9);
box-shadow: 0 0 8px rgba(196,173,255,0.6);
}
/* Separadores entre columnas más visibles */
.mm-layer-col + .mm-layer-col {
border-left: 1px solid rgba(255,255,255,0.06);
padding-left: 24px;
margin-left: 4px;
}
/* Capability layers */
.mm-layer-head {
color: rgba(255,255,255,0.55) !important;
border-bottom-color: rgba(255,255,255,0.08) !important;
}
.mm-layer-head .num { color: rgba(196,173,255,0.8) !important; }
.mm-layer-head .name { color: rgba(255,255,255,0.9) !important; }
.mm-layer-cap {
color: rgba(255,255,255,0.75);
transition: background 0.2s;
}
.mm-layer-cap:hover { background: rgba(255,255,255,0.04) !important; }
.mm-layer-cap-h { color: #fff !important; }
.mm-layer-cap-s { color: rgba(255,255,255,0.55) !important; }
.mm-layer-cap.primary .mm-layer-cap-h { color: #C4ADFF !important; }
/* Solution cards */
.mm-sol {
background: rgba(255,255,255,0.03) !important;
border: 1px solid rgba(255,255,255,0.06) !important;
color: rgba(255,255,255,0.85);
}
.mm-sol:hover {
background: rgba(255,255,255,0.06) !important;
border-color: rgba(196,173,255,0.25) !important;
}
.mm-sol .num { color: rgba(196,173,255,0.7) !important; }
.mm-sol h5 { color: #fff !important; }
.mm-sol p { color: rgba(255,255,255,0.6) !important; }
.mm-cap {
color: rgba(255,255,255,0.75);
}
.mm-cap:hover { color: #fff; }
.mm-cap-h { color: #fff !important; }
.mm-cap-s { color: rgba(255,255,255,0.55) !important; }
/* Trust bar (SOC 2, ISO 27001, etc.) */
.mm-trust-bar {
border-top: 1px solid rgba(255,255,255,0.08) !important;
border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}
.mm-trust-bar .lbl { color: rgba(255,255,255,0.45) !important; }
.mm-trust-bar .badge {
background: rgba(255,255,255,0.05) !important;
border: 1px solid rgba(255,255,255,0.1) !important;
color: rgba(255,255,255,0.8) !important;
}
/* Footer del mega-menu */
.mm-footer {
border-top: 1px solid rgba(255,255,255,0.08) !important;
color: rgba(255,255,255,0.55) !important;
}
.mm-footer a { color: #C4ADFF !important; }
.mm-footer a:hover { color: #fff !important; }
/* Feature blocks en páginas de producto — sweep amplio */
.feat .feat-copy .eyebrow,
.feat .eyebrow,
.feat-meta { color: rgba(196,173,255,0.8) !important; }
.feat h3, .feat-h3 { color: #fff !important; }
.feat .feat-copy p,
.feat p.lede,
.feat .feat-lede { color: rgba(255,255,255,0.75) !important; }
/* TODOS los strong en feature blocks (no solo .feature-list) */
.feat strong,
.feat .row strong,
.feat ul strong,
.feat .feature-list strong { color: #fff !important; font-weight: 600 !important; }
.feat .row span,
.feat ul li span,
.feat .feature-list span { color: rgba(255,255,255,0.72) !important; }
.feat .row .ic,
.feat .feature-list .ic,
.feat ul li .ic,
.feat .row > div:first-child {
background: rgba(196,173,255,0.12) !important;
color: #C4ADFF !important;
border-color: rgba(196,173,255,0.25) !important;
}
/* SWEEP general: cualquier strong en secciones que no son hero queda legible */
section:not(.hero):not(.product-hero) strong { color: #fff !important; }
/* DASHBOARDS / MOCKS del cliente con fondo paper claro: convertir a dark cinematic */
.mock { background: rgba(20, 8, 31, 0.92) !important; color: rgba(255,255,255,0.88); }
.mock-chrome { background: rgba(10, 6, 18, 0.95) !important; border-bottom-color: rgba(255,255,255,0.08) !important; }
.mock-url { color: rgba(255,255,255,0.5) !important; }
.mock .kpi { background: rgba(255,255,255,0.03) !important; border-color: rgba(255,255,255,0.08) !important; }
.mock .kpi .k { color: rgba(255,255,255,0.5) !important; }
.mock .kpi .v { color: #fff !important; }
.mock .kpi .delta { color: rgba(94,224,170,0.9) !important; }
.mock .kpi .delta.neg { color: rgba(230,57,70,0.9) !important; }
.mock .chart { background: rgba(255,255,255,0.02) !important; border-color: rgba(255,255,255,0.06) !important; }
.mock .chart-title { color: rgba(255,255,255,0.7) !important; }
.mock .chart-legend { color: rgba(255,255,255,0.55) !important; }
.mock .complex,
.mock .complex-head,
.mock .complex-body { background: transparent !important; color: rgba(255,255,255,0.88); }
.mock .complex-final { background: rgba(109,40,217,0.15) !important; }
.mock .dash { background: transparent !important; }
.mock .dash-sidebar {
background: rgba(10,6,18,0.5) !important;
border-right: 1px solid rgba(255,255,255,0.06) !important;
}
.mock .dash-sidebar .dash-nav-item {
color: rgba(255,255,255,0.6) !important;
}
.mock .dash-sidebar .dash-nav-item.active {
background: rgba(109,40,217,0.18) !important;
color: #fff !important;
}
.mock table, .mock th, .mock td { color: rgba(255,255,255,0.85); border-color: rgba(255,255,255,0.08) !important; background: transparent !important; }
.mock th { color: rgba(255,255,255,0.5) !important; }
/* Cards genéricos (.card) en secciones dark */
.card { background: rgba(20,8,31,0.85) !important; border: 1px solid rgba(255,255,255,0.08) !important; color: rgba(255,255,255,0.88); }
.card h4, .card h3 { color: #fff !important; }
.card p { color: rgba(255,255,255,0.65) !important; }
/* Charts SVG del cliente: forzar grid lines y áreas a dark */
.chart svg g[stroke="#EEE9F5"] line,
.chart svg line[stroke="#EEE9F5"] {
stroke: rgba(255,255,255,0.06) !important;
}
/* ============================================================
SWEEP TOTAL · convertir TODOS los backgrounds claros inline a dark
Esto cubre los mocks, cards, dashboards complejos del cliente
============================================================ */
[style*="background: #fff"],
[style*="background:#fff"],
[style*="background: white"],
[style*="background:white"],
[style*="background: var(--paper)"],
[style*="background:var(--paper)"],
[style*="background-color: #fff"],
[style*="background-color:#fff"],
[style*="background: rgba(255,255,255,1)"],
[style*="background: rgba(255, 255, 255, 1)"],
[style*="background:rgba(255,255,255,1)"],
[style*="background:#FBFAFD"],
[style*="background:#FFFFFF"],
[style*="background:#fff;"],
[style*="background: #fff;"],
[style*="background:#FFF"] {
background: rgba(20, 8, 31, 0.6) !important;
border-color: rgba(255,255,255,0.08) !important;
color: rgba(255,255,255,0.88) !important;
}
/* Cualquier elemento dentro de section/mock con bg blanco/gray inline */
.mock div[style*="background"],
section div[style*="background"] {
/* permite override del sweep general arriba */
}
[style*="background: var(--ink-025)"],
[style*="background:var(--ink-025)"],
[style*="background: var(--ink-050)"],
[style*="background:var(--ink-050)"],
[style*="background:#F8F7FB"],
[style*="background:#F2F0F7"] {
background: rgba(255,255,255,0.03) !important;
}
[style*="color: var(--ink-900)"],
[style*="color:var(--ink-900)"],
[style*="color: var(--ink-1000)"],
[style*="color:var(--ink-1000)"],
[style*="color: var(--ink-700)"],
[style*="color:var(--ink-700)"],
[style*="color:#14081f"],
[style*="color:#0a0612"] {
color: #fff !important;
}
[style*="color: var(--ink-500)"],
[style*="color:var(--ink-500)"],
[style*="color: var(--ink-400)"],
[style*="color:var(--ink-400)"],
[style*="color: var(--ink-300)"],
[style*="color:var(--ink-300)"],
[style*="color: var(--ink-200)"],
[style*="color:var(--ink-200)"] {
color: rgba(255,255,255,0.6) !important;
}
[style*="color: var(--ink-600)"],
[style*="color:var(--ink-600)"] {
color: rgba(255,255,255,0.75) !important;
}
[style*="border: 1px solid var(--line)"],
[style*="border:1px solid var(--line)"],
[style*="border-bottom: 1px solid var(--line)"],
[style*="border-top: 1px solid var(--line)"] {
border-color: rgba(255,255,255,0.08) !important;
}
/* Tags y badges con violet-700 oscuro: aclarar a violeta claro */
[style*="color: var(--violet-700)"],
[style*="color:var(--violet-700)"] { color: #C4ADFF !important; }
/* CSS variables overrides globales: redefinir ink-* en dark mode */
:root {
--line-dark: rgba(255,255,255,0.08);
--line-strong-dark: rgba(255,255,255,0.18);
}
/* Charts SVG: grids más visibles en dark */
svg line[stroke="#EEE9F5"],
svg [stroke="#EEE9F5"] { stroke: rgba(255,255,255,0.08) !important; }
svg [fill="#E2D7FF"] { fill: rgba(196,173,255,0.25) !important; }
/* Buttons del cliente con bg blanco */
button[style*="background: #fff"],
button[style*="background:#fff"] {
background: rgba(255,255,255,0.08) !important;
color: #fff !important;
}
/* ============================================================
FIX BITTOOLS · clases .complex, .complex-head, .complex-body, etc.
Estas son clases del CLIENTE (no inline) que NO match con [style*=]
============================================================ */
html body .complex {
background: rgba(20, 8, 31, 0.92) !important;
border-color: rgba(255,255,255,0.08) !important;
color: rgba(255,255,255,0.88) !important;
}
html body .complex-head {
background: rgba(255,255,255,0.03) !important;
border-bottom-color: rgba(255,255,255,0.08) !important;
color: rgba(255,255,255,0.88) !important;
}
html body .complex-head h4 { color: #fff !important; }
html body .complex-head .meta { color: rgba(255,255,255,0.55) !important; }
html body .complex-body { color: rgba(255,255,255,0.88) !important; }
html body .complex-body th {
color: rgba(255,255,255,0.5) !important;
border-bottom-color: rgba(255,255,255,0.08) !important;
}
html body .complex-body td {
color: rgba(255,255,255,0.88) !important;
border-bottom-color: rgba(255,255,255,0.06) !important;
}
html body .complex-body .totals-row td {
background: rgba(196,173,255,0.12) !important;
color: #fff !important;
font-weight: 500 !important;
}
/* Engines cards (RETEFUENTE / RETEIVA / RETEICA) */
html body .complex-engines > * {
background: rgba(255,255,255,0.04) !important;
border-color: rgba(255,255,255,0.08) !important;
color: rgba(255,255,255,0.88) !important;
}
html body .complex-engines h5 { color: #fff !important; }
html body .complex-engines .meta { color: rgba(196,173,255,0.85) !important; }
/* Final summary card */
html body .complex-final {
background: linear-gradient(135deg, rgba(109,40,217,0.18), rgba(46,16,101,0.32)) !important;
border: 1px solid rgba(196,173,255,0.3) !important;
color: #fff !important;
}
/* Sim strip steps (live simulation) */
html body .sim-step {
background: rgba(255,255,255,0.03) !important;
border-color: rgba(255,255,255,0.08) !important;
color: rgba(255,255,255,0.88) !important;
}
html body .sim-step.done { background: rgba(0,184,113,0.10) !important; }
html body .sim-step.active { background: rgba(196,173,255,0.12) !important; }
/* Status tags inline con backgrounds light (verde, azul, amber, rosa) */
[style*="background: #E8F8F1"],
[style*="background:#E8F8F1"],
[style*="background: var(--pos-soft)"],
[style*="background:var(--pos-soft)"] {
background: rgba(0, 184, 113, 0.16) !important;
color: rgba(94, 224, 170, 1) !important;
border-color: rgba(0, 184, 113, 0.3) !important;
}
[style*="background: #EAF4FF"],
[style*="background:#EAF4FF"] {
background: rgba(96, 165, 250, 0.16) !important;
color: rgba(147, 197, 253, 1) !important;
}
[style*="background: #FFF6E0"],
[style*="background:#FFF6E0"] {
background: rgba(245, 158, 11, 0.16) !important;
color: rgba(252, 211, 77, 1) !important;
}
/* Status circles small (los dot indicators violet/green/etc) */
[style*="background:#C4ADFF"],
[style*="background: #C4ADFF"] {
background: #C4ADFF !important;
}
[style*="background: #00B871"],
[style*="background:#00B871"] {
background: #00B871 !important;
}
/* Approval queue cards (Constructora Sigma, Microsoft Colombia, etc) */
html body div[style*="border-left"][style*="solid"] {
background: rgba(255,255,255,0.025) !important;
color: rgba(255,255,255,0.88) !important;
}
html body div[style*="border-left: 4px solid"] *,
html body div[style*="border-left:4px solid"] * {
color: inherit;
}
/* Cost center hierarchy (PDF/Histórico/Catálogo) — preservar dark */
html body div[style*="grid-template-columns"][style*="gap"] > div[style*="padding"] {
background: transparent !important;
}
/* ============================================================
FIX BITFIN CFO · clases .dash, .kpi, .chart, .table
Todas tienen backgrounds claros en CSS del cliente
============================================================ */
html body .dash {
background: transparent !important;
}
html body .dash-sidebar {
background: rgba(255,255,255,0.03) !important;
border-right: 1px solid rgba(255,255,255,0.08) !important;
color: rgba(255,255,255,0.88) !important;
}
html body .dash-brand {
border-bottom-color: rgba(255,255,255,0.08) !important;
color: rgba(255,255,255,0.88) !important;
}
html body .dash-section-label {
color: rgba(255,255,255,0.45) !important;
}
html body .dash-nav-item {
color: rgba(255,255,255,0.7) !important;
}
html body .dash-nav-item .icn {
background: rgba(255,255,255,0.08) !important;
}
html body .dash-nav-item.active {
background: rgba(196,173,255,0.16) !important;
color: #C4ADFF !important;
}
html body .dash-nav-item.active .icn {
background: var(--violet-500, #6d28d9) !important;
}
html body .dash-main {
background: transparent !important;
color: rgba(255,255,255,0.88) !important;
}
/* KPI cards (Ingresos, Egresos, Margen, Liquidez) */
html body .kpi {
background: rgba(255,255,255,0.04) !important;
border-color: rgba(255,255,255,0.08) !important;
color: rgba(255,255,255,0.88) !important;
}
html body .kpi .k {
color: rgba(255,255,255,0.5) !important;
}
html body .kpi .v {
color: #fff !important;
}
html body .kpi .delta {
color: rgba(94,224,170,0.95) !important;
}
html body .kpi .delta.neg {
color: rgba(230,57,70,0.9) !important;
}
/* Chart container (flujo de caja, etc) */
html body .chart {
background: rgba(255,255,255,0.03) !important;
border-color: rgba(255,255,255,0.08) !important;
color: rgba(255,255,255,0.88) !important;
}
html body .chart-title {
color: rgba(255,255,255,0.88) !important;
}
html body .chart-legend {
color: rgba(255,255,255,0.55) !important;
}
/* Tabla Reportes (P&G/balance/flujo) */
html body .table {
background: rgba(20,8,31,0.92) !important;
border-color: rgba(255,255,255,0.08) !important;
color: rgba(255,255,255,0.88) !important;
}
html body .table .row {
border-bottom-color: rgba(255,255,255,0.06) !important;
color: rgba(255,255,255,0.88) !important;
}
html body .table .row.head {
background: rgba(255,255,255,0.04) !important;
color: rgba(255,255,255,0.5) !important;
}
html body .table .row.highlight,
html body .table .row.totals {
background: rgba(196,173,255,0.12) !important;
color: #fff !important;
}
/* Alert items (sección 04 alertas) */
html body .alert-item,
html body .alert {
background: rgba(255,255,255,0.03) !important;
border-color: rgba(255,255,255,0.08) !important;
color: rgba(255,255,255,0.88) !important;
}
/* CFO Agent chat thread */
html body .agent-thread,
html body .agent-bubble {
background: rgba(255,255,255,0.03) !important;
border-color: rgba(255,255,255,0.08) !important;
color: rgba(255,255,255,0.88) !important;
}
/* ============================================================
DASHBOARD CFO REDISEÑADO · KPIs + charts + score + tabs
POLISH iterativo — sutil, profesional, llamativo
============================================================ */
.cfo-dash { background: linear-gradient(180deg, rgba(10,6,18,0.98) 0%, rgba(15,9,28,0.96) 100%) !important; }
.cfo-dash-body {
padding: 20px 22px 24px;
display: flex;
flex-direction: column;
gap: 14px;
font-family: var(--f-sans, system-ui);
font-size: 12px;
color: rgba(255,255,255,0.85);
font-variant-numeric: tabular-nums;
}
.cfo-dash-body .val,
.cfo-dash-body b,
.cfo-dash-body .num,
.cfo-dash-body .v {
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1;
}
/* Toolbar */
.cfo-toolbar {
display: flex; justify-content: space-between; align-items: center;
padding-bottom: 4px;
border-bottom: 1px solid rgba(255,255,255,0.06);
}
.cfo-controls { display: inline-flex; gap: 10px; align-items: center; }
.cfo-pill {
display: inline-flex; align-items: center; gap: 6px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 6px;
padding: 5px 10px;
font-size: 11px;
}
.cfo-pill.small { font-size: 10px; padding: 3px 8px; }
.cfo-period {
display: inline-flex; align-items: center; gap: 8px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 6px;
padding: 3px 10px;
font-size: 11px;
}
.cfo-arrow {
background: transparent; border: 0; color: rgba(196,173,255,0.8);
cursor: pointer; padding: 0 4px; font-size: 14px;
}
.cfo-export {
background: linear-gradient(135deg, #9B5BFF, #6d28d9) !important;
color: #fff !important;
border: 0 !important;
border-radius: 6px !important;
padding: 6px 14px !important;
font-size: 11px !important;
font-weight: 500 !important;
cursor: pointer;
box-shadow: 0 4px 12px -4px rgba(109,40,217,0.5);
}
/* KPI cards grid */
.cfo-kpis {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 8px;
}
.cfo-kpi {
position: relative;
background: rgba(255,255,255,0.025);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 8px;
padding: 10px 12px 8px;
overflow: hidden;
}
.cfo-kpi .lbl {
font-size: 9.5px;
color: rgba(255,255,255,0.55);
font-family: var(--f-mono);
letter-spacing: 0.04em;
text-transform: uppercase;
margin-bottom: 4px;
}
.cfo-kpi .val {
font-size: 18px;
font-weight: 500;
color: #fff;
letter-spacing: -0.01em;
line-height: 1.1;
}
.cfo-kpi .trend {
font-size: 9px;
color: rgba(255,255,255,0.55);
font-family: var(--f-mono);
margin-top: 3px;
}
.cfo-kpi .trend.pos { color: rgba(94,224,170,0.9); }
.cfo-kpi .trend.neg { color: rgba(230,57,70,0.9); }
.cfo-kpi .trend.warn { color: rgba(245,158,11,0.9); }
.cfo-kpi .spark {
display: block;
width: 100%;
height: 22px;
margin-top: 6px;
}
/* Grid principal */
.cfo-grid {
display: grid;
grid-template-columns: 1.2fr 1fr 1fr;
gap: 10px;
}
.cfo-card {
background: rgba(255,255,255,0.025);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 10px;
padding: 14px;
display: flex;
flex-direction: column;
gap: 10px;
}
.cfo-card h4 {
font-size: 12.5px;
font-weight: 500;
margin: 0;
color: rgba(255,255,255,0.92);
letter-spacing: -0.01em;
}
.cfo-card-head {
display: flex; justify-content: space-between; align-items: flex-start;
}
/* Line chart */
.cfo-legend {
display: flex; gap: 12px; flex-wrap: wrap;
font-size: 9px;
color: rgba(255,255,255,0.7);
font-family: var(--f-mono);
}
.cfo-legend .leg-item { display: inline-flex; align-items: center; gap: 4px; }
.cfo-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
.cfo-line-chart { width: 100%; height: 130px; }
.cfo-axis {
display: flex; justify-content: space-between;
font-size: 8.5px;
color: rgba(255,255,255,0.45);
font-family: var(--f-mono);
margin-top: -4px;
}
/* Donut chart */
.cfo-donut-wrap {
position: relative;
width: 105px; height: 105px;
margin: 2px auto 4px;
}
.cfo-donut { width: 100%; height: 100%; }
.cfo-donut-center {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
text-align: center;
pointer-events: none;
}
.cfo-donut-center .lbl {
font-size: 8px;
font-family: var(--f-mono);
color: rgba(255,255,255,0.55);
letter-spacing: 0.04em;
text-transform: uppercase;
}
.cfo-donut-center .val {
font-size: 11px;
font-weight: 600;
color: #fff;
}
.cfo-asset-list {
display: flex; flex-direction: column; gap: 5px;
font-size: 10px;
}
.cfo-asset-list .row {
display: grid;
grid-template-columns: 10px 1fr auto;
gap: 8px;
align-items: center;
color: rgba(255,255,255,0.78);
}
.cfo-asset-list i {
width: 8px; height: 8px; border-radius: 2px;
}
.cfo-asset-list b {
color: #fff;
font-weight: 500;
font-family: var(--f-mono);
font-size: 10px;
}
/* Score card / Resumen Ejecutivo */
.cfo-score {
position: relative;
width: 56px; height: 56px;
flex-shrink: 0;
}
.cfo-score .score-circle { width: 100%; height: 100%; transform: rotate(0deg); }
.cfo-score .score-num {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
font-size: 17px;
font-weight: 600;
color: #fff;
}
.cfo-score .score-num small {
font-size: 8px;
color: rgba(255,255,255,0.5);
display: block;
font-weight: 400;
}
.cfo-health {
background: rgba(94,224,170,0.08);
border: 1px solid rgba(94,224,170,0.2);
border-radius: 6px;
padding: 8px 10px;
}
.cfo-health .health-label {
font-size: 9px;
color: rgba(94,224,170,0.9);
font-family: var(--f-mono);
letter-spacing: 0.04em;
text-transform: uppercase;
}
.cfo-health .health-val {
font-size: 13px;
font-weight: 500;
color: #fff;
margin-top: 1px;
}
.cfo-insights {
display: flex; flex-direction: column; gap: 8px;
margin-top: 4px;
}
.cfo-insights .insight {
display: grid;
grid-template-columns: 20px 1fr;
gap: 8px;
font-size: 10px;
}
.cfo-insights .insight .ic {
width: 18px; height: 18px;
border-radius: 4px;
display: grid; place-items: center;
font-size: 11px;
font-weight: 600;
font-family: var(--f-mono);
}
.cfo-insights .insight.ok .ic { background: rgba(94,224,170,0.18); color: rgba(94,224,170,1); }
.cfo-insights .insight.info .ic { background: rgba(196,173,255,0.18); color: #C4ADFF; }
.cfo-insights .insight.warn .ic { background: rgba(245,158,11,0.18); color: rgba(252,211,77,1); }
.cfo-insights .insight b {
font-size: 10.5px;
color: #fff;
font-weight: 500;
display: block;
}
.cfo-insights .insight p {
margin: 2px 0 0;
color: rgba(255,255,255,0.6);
line-height: 1.4;
font-size: 9.5px;
}
.cfo-link {
font-size: 10px;
color: #C4ADFF !important;
text-decoration: none;
margin-top: 4px;
}
.cfo-link:hover { color: #fff !important; }
/* Tabs + tabla indicadores clave */
.cfo-tabs {
display: flex; flex-wrap: wrap; gap: 4px;
margin-bottom: 4px;
}
.cfo-tabs button {
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 999px;
padding: 4px 10px;
font-size: 10px;
color: rgba(255,255,255,0.6);
cursor: pointer;
font-family: var(--f-sans);
}
.cfo-tabs button.on {
background: rgba(196,173,255,0.2);
border-color: rgba(196,173,255,0.45);
color: #fff;
}
.cfo-tab-table {
display: flex; flex-direction: column;
font-size: 10px;
}
.cfo-tab-table .head {
display: grid;
grid-template-columns: 1.4fr 0.6fr 0.7fr 0.7fr 0.7fr;
gap: 6px;
padding: 6px 0;
border-bottom: 1px solid rgba(255,255,255,0.06);
color: rgba(255,255,255,0.45);
font-family: var(--f-mono);
font-size: 9px;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.cfo-tab-table .row {
display: grid;
grid-template-columns: 1.4fr 0.6fr 0.7fr 0.7fr 0.7fr;
gap: 6px;
padding: 7px 0;
border-bottom: 1px solid rgba(255,255,255,0.04);
color: rgba(255,255,255,0.85);
align-items: center;
}
.cfo-tab-table .row b { color: #fff; font-weight: 500; }
.cfo-tab-table .row .neg { color: rgba(230,57,70,0.95); font-family: var(--f-mono); }
.cfo-tab-table .warn-pill {
background: rgba(245,158,11,0.12);
color: rgba(252,211,77,0.95);
border: 1px solid rgba(245,158,11,0.25);
border-radius: 999px;
padding: 2px 8px;
font-size: 9px;
font-family: var(--f-mono);
justify-self: start;
}
/* Análisis Vertical (barras horizontales) */
.cfo-vertical {
display: flex; flex-direction: column; gap: 6px;
}
.cfo-vertical .row {
display: grid;
grid-template-columns: 6px 1.4fr auto auto;
gap: 10px;
align-items: center;
padding: 6px 0;
font-size: 10.5px;
color: rgba(255,255,255,0.8);
border-bottom: 1px solid rgba(255,255,255,0.04);
}
.cfo-vertical .row i {
display: block;
height: 4px;
background: linear-gradient(90deg, #9B5BFF, #6d28d9);
border-radius: 4px;
width: 100%;
max-width: 60px;
}
.cfo-vertical .row.hl b { color: #fff; }
.cfo-vertical .row.hl { color: rgba(255,255,255,0.92); }
.cfo-vertical .row b { color: #fff; font-weight: 500; font-family: var(--f-mono); }
.cfo-vertical .row .pos { color: rgba(94,224,170,0.95); font-family: var(--f-mono); font-size: 9.5px; }
.cfo-vertical .row .neg { color: rgba(230,57,70,0.95); font-family: var(--f-mono); font-size: 9.5px; }
/* Indicadores en Tendencia */
.cfo-trend-list { display: flex; flex-direction: column; gap: 8px; }
.cfo-trend-list .trend-row {
display: grid;
grid-template-columns: 1fr auto 60px;
gap: 10px;
align-items: center;
padding: 4px 0;
font-size: 10.5px;
border-bottom: 1px solid rgba(255,255,255,0.04);
}
.cfo-trend-list .trend-row .name { color: rgba(255,255,255,0.78); }
.cfo-trend-list .trend-row .val { color: #fff; font-weight: 500; font-family: var(--f-mono); }
.cfo-trend-list .trend-spark { width: 60px; height: 18px; }
/* Responsive: en mobile el dashboard reduce a stack */
@media (max-width: 980px) {
.cfo-kpis { grid-template-columns: repeat(3, 1fr); }
.cfo-grid { grid-template-columns: 1fr; }
.cfo-dash-body { font-size: 11px; padding: 14px; }
}
/* ============================================================
SWEEP FINAL · mocks/tablas con backgrounds inline residuales
============================================================ */
/* Cualquier fila/celda dentro de un .mock — texto siempre legible */
html body .mock div[style*="grid-template-columns"],
html body .mock div[style*="display: grid"] {
background: transparent !important;
border-color: rgba(255,255,255,0.08) !important;
}
html body .mock div[style*="grid-template-columns"] > div,
html body .mock div[style*="grid-template-columns"] > div * {
color: rgba(255,255,255,0.88) !important;
}
html body .mock div[style*="grid-template-columns"] > div > div[style*="font-weight"],
html body .mock div[style*="grid-template-columns"] strong {
color: #fff !important;
}
html body .mock div[style*="background: rgba(0, 184, 113, 0"],
html body .mock div[style*="background:rgba(0,184,113"],
html body .mock div[style*="background:rgba(0, 184"] {
background: rgba(0, 184, 113, 0.16) !important;
}
html body .mock div[style*="background: rgba(0, 184, 113, 0"] *,
html body .mock div[style*="background:rgba(0,184,113"] * {
color: rgba(94, 224, 170, 1) !important;
}
html body .mock div[style*="background: rgba(0, 184, 113, 0"] strong,
html body .mock div[style*="background:rgba(0,184,113"] strong {
color: #fff !important;
}
/* Tabla "Bandeja DIAN" y similares — filas con background plain */
html body .mock table,
html body .mock table tr,
html body .mock table td,
html body .mock table th {
background: transparent !important;
color: rgba(255,255,255,0.88) !important;
border-color: rgba(255,255,255,0.08) !important;
}
html body .mock table th { color: rgba(255,255,255,0.5) !important; }
html body .mock table tr:nth-child(even) {
background: rgba(255,255,255,0.015) !important;
}
/* Cabeceras grid uppercase (headers de tabla) */
html body .mock div[style*="text-transform: uppercase"] {
color: rgba(255,255,255,0.5) !important;
}
/* "PROVEEDOR", "DOCUMENTO" etc cuando son labels mono uppercase */
html body .mock div[style*="font-family: var(--f-mono)"] {
color: rgba(255,255,255,0.5) !important;
}
/* Cross section */
.cross h3 { color: #fff !important; }
.cross p { color: rgba(255,255,255,0.65) !important; }
.cross .cross-card {
background: rgba(255,255,255,0.03) !important;
border: 1px solid rgba(255,255,255,0.08) !important;
}
.cross .cross-card.featured {
background: linear-gradient(135deg, rgba(109,40,217,0.25), rgba(46,16,101,0.4)) !important;
border-color: rgba(196,173,255,0.3) !important;
}
/* ============================================================
ISOLATION sutil · prevenir que cards 3D invadan logos
Sin contain (rompía el hero), solo z-index + overflow
============================================================ */
html body section.logos {
position: relative;
z-index: 5;
overflow: hidden;
isolation: isolate;
}
/* ============================================================
HERO · contenido pegado al nav, sin huecos vacíos
Override agresivo del padding/margin del cliente
============================================================ */
html body .hero,
html body .product-hero {
min-height: auto !important;
display: flex !important;
align-items: center !important;
padding: 32px 0 40px !important;
margin: 0 !important;
position: relative;
overflow: hidden;
isolation: isolate;
}
html body .hero > .container,
html body .product-hero > .container {
padding-top: 0 !important;
padding-bottom: 0 !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
html body .hero .hero-v2,
html body .product-hero .product-hero-inner {
margin-top: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
/* Hero-left tiene padding-top: 24px del cliente — neutralizarlo */
html body .hero .hero-v2 .hero-left,
html body .product-hero .product-hero-inner > div:first-child {
padding-top: 0 !important;
margin-top: 0 !important;
}
@media (max-width: 980px) {
html body .hero, html body .product-hero {
padding: 20px 0 32px !important;
}
}
/* Aura layers detrás del hero */
.hero-aura {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
overflow: hidden;
}
.hero-aura .orb {
position: absolute;
border-radius: 50%;
filter: blur(80px);
opacity: 0.85;
will-change: transform;
}
.hero-aura .orb.o-1 {
width: 60vw; height: 60vw; max-width: 900px; max-height: 900px;
background: radial-gradient(circle, var(--aura-violet) 0%, transparent 70%);
top: -10%; left: -10%;
}
.hero-aura .orb.o-2 {
width: 50vw; height: 50vw; max-width: 720px; max-height: 720px;
background: radial-gradient(circle, var(--aura-violet-soft) 0%, transparent 70%);
bottom: -15%; right: -10%;
}
.hero-aura .orb.o-3 {
width: 30vw; height: 30vw; max-width: 420px; max-height: 420px;
background: radial-gradient(circle, rgba(255,255,255,0.10) 0%, transparent 70%);
top: 30%; left: 40%;
}
.hero-aura .grain {
position: absolute; inset: 0;
background-image: url("data:image/svg+xml;utf8,");
background-size: 220px;
mix-blend-mode: overlay;
opacity: 0.5;
}
.hero-aura .scan-lines {
position: absolute; inset: 0;
background: repeating-linear-gradient(
180deg,
transparent 0px,
transparent 3px,
rgba(255,255,255,0.012) 3px,
rgba(255,255,255,0.012) 4px
);
pointer-events: none;
}
.hero-aura .vignette {
position: absolute; inset: 0;
background: radial-gradient(ellipse at center, transparent 55%, rgba(10, 6, 18, 0.55) 100%);
pointer-events: none;
}
/* Watermark deshabilitado — se ve mal con el contenido */
.hero-watermark { display: none !important; }
/* Hero content debe estar por encima de la aura */
.hero .container,
.product-hero .container { position: relative; z-index: 2; }
/* Layer cards: cuando cinematic está activo, GSAP gestiona la entrada */
html.cine-ready .hero .layer-card { animation: none !important; opacity: 0; transform: translateY(40px); }
/* ============================================================
SECCIONES OSCURAS · gradient breathing
============================================================ */
section.dark, section.transform, section.cta-strip, section.pipeline-strip {
position: relative;
overflow: hidden;
isolation: isolate;
}
section.dark::before, section.transform::before, section.cta-strip::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
radial-gradient(ellipse 70% 50% at 10% 0%, rgba(155, 91, 255, 0.22), transparent 60%),
radial-gradient(ellipse 60% 40% at 90% 100%, rgba(196, 173, 255, 0.16), transparent 65%),
radial-gradient(ellipse 40% 30% at 50% 50%, rgba(109, 40, 217, 0.10), transparent 70%);
z-index: 0;
opacity: 1;
transition: opacity 1.2s var(--cine-ease-out);
}
section.dark.in-view::before,
section.transform.in-view::before,
section.cta-strip.in-view::before { opacity: 1; }
section.dark > *, section.transform > *, section.cta-strip > *,
section.pipeline-strip > * { position: relative; z-index: 1; }
/* Sutil grain en secciones oscuras */
section.dark::after, section.cta-strip::after {
content: "";
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml;utf8,");
background-size: 240px;
mix-blend-mode: overlay;
opacity: 0.35;
pointer-events: none;
z-index: 0;
}
/* ============================================================
REVEALS · sólo se ocultan cuando JS confirma cine-ready.
Progressive enhancement: si JS falla, todo se ve normal.
============================================================ */
html.cine-ready [data-reveal] {
opacity: 0;
transform: translateY(40px);
will-change: opacity, transform;
}
html.cine-ready [data-reveal="fade"] { transform: none; }
html.cine-ready [data-reveal="up"] { transform: translateY(50px); }
html.cine-ready [data-reveal="up-soft"] { transform: translateY(24px); }
html.cine-ready [data-reveal="left"] { transform: translateX(-50px); }
html.cine-ready [data-reveal="right"] { transform: translateX(50px); }
html.cine-ready [data-reveal="scale"] { transform: scale(0.94); }
html.cine-ready [data-reveal="curtain"] { transform: translateY(60px) scale(0.97); }
/* ============================================================
PARALLAX · controlado por ScrollTrigger
============================================================ */
[data-parallax] { will-change: transform; }
/* ============================================================
IMAGE/CARD expansion on scroll
============================================================ */
html.cine-ready [data-scale-in] {
transform: scale(0.92);
opacity: 0;
will-change: transform, opacity;
transform-origin: center bottom;
}
/* Los mockups del cliente se sienten más cinemáticos */
.mock, .card, .world {
transition: box-shadow 0.6s var(--cine-ease-out), transform 0.6s var(--cine-ease-out);
}
.mock { box-shadow: 0 30px 80px -30px rgba(10, 6, 18, 0.35), 0 8px 24px -8px rgba(10, 6, 18, 0.15); }
section.dark .mock, section.transform .mock {
box-shadow: 0 40px 120px -40px rgba(0, 0, 0, 0.7), 0 12px 30px -10px rgba(0, 0, 0, 0.35);
}
/* ============================================================
SPLIT TEXT (animado por JS, fallback inline)
============================================================ */
/* Word-level reveal: cada palabra se anima sin cortar descendentes.
Sin overflow:hidden, los descendentes (g, p, j, y, q) respiran. */
.cine-word {
display: inline-block;
will-change: transform, opacity, filter;
}
html.cine-ready .cine-word {
opacity: 0;
transform: translateY(0.5em);
filter: blur(8px);
}
/* Asegurar line-height generoso en headlines con palabras animadas */
[data-split] {
line-height: 1.08 !important;
padding-bottom: 0.12em;
}
/* ============================================================
PIPELINE STRIP · travel highlight on scroll
============================================================ */
.pipeline-strip .pipe-stop { transition: opacity .5s var(--cine-ease-soft), transform .5s var(--cine-ease-soft); }
.pipeline-strip .pipe-stop.cine-dim { opacity: 0.32; }
.pipeline-strip .pipe-stop.cine-on { opacity: 1; transform: translateY(-4px); }
/* Cursor personalizado desactivado por preferencia del usuario */
.cine-cursor, .cine-cursor-ring { display: none !important; }
html.cine-cursor-on body { cursor: auto !important; }
html.cine-cursor-on a, html.cine-cursor-on button { cursor: pointer !important; }
/* ============================================================
BOTONES PRO · shimmer, depth, arrow animation premium
============================================================ */
.btn, a.btn, button.btn-primary {
position: relative;
isolation: isolate;
overflow: hidden;
font-weight: 500 !important;
letter-spacing: -0.005em;
padding: 14px 24px !important;
border-radius: 999px !important;
transition:
transform 0.5s var(--cine-ease-out),
background 0.4s var(--cine-ease-out),
border-color 0.4s,
box-shadow 0.5s var(--cine-ease-out),
color 0.3s !important;
will-change: transform;
font-size: 14.5px !important;
display: inline-flex !important;
align-items: center !important;
gap: 10px !important;
cursor: pointer;
white-space: nowrap;
}
/* Shimmer sweep effect en todos los botones */
.btn::before, a.btn::before {
content: "";
position: absolute;
top: 0; left: -100%;
width: 60%; height: 100%;
background: linear-gradient(
90deg,
transparent 0%,
rgba(255,255,255,0.12) 50%,
transparent 100%
);
transition: left 0.7s var(--cine-ease-out);
pointer-events: none;
z-index: 1;
}
.btn:hover::before, a.btn:hover::before {
left: 200%;
}
.btn > *, a.btn > * { position: relative; z-index: 2; }
/* Arrow animation premium */
.btn .arrow, a.btn .arrow {
display: inline-block;
transition: transform 0.5s var(--cine-ease-out);
font-weight: 400;
}
.btn:hover .arrow, a.btn:hover .arrow {
transform: translateX(5px);
}
/* ============================================================
BOTONES GLASS · glassmorphism estilo Apple Vision / iOS
backdrop-filter blur + translúcido + inner highlights
============================================================ */
/* === Primary violeta GLASS === */
.btn-primary, a.btn-primary, button.btn-primary {
background:
linear-gradient(180deg, rgba(196,173,255,0.35) 0%, rgba(109,40,217,0.55) 100%),
rgba(109,40,217,0.4) !important;
backdrop-filter: blur(24px) saturate(180%) !important;
-webkit-backdrop-filter: blur(24px) saturate(180%) !important;
color: #fff !important;
border: 1px solid rgba(255,255,255,0.25) !important;
box-shadow:
0 1px 0 rgba(255,255,255,0.35) inset,
0 -1px 0 rgba(0,0,0,0.2) inset,
0 0 0 1px rgba(196,173,255,0.15),
0 8px 24px -8px rgba(109,40,217,0.5),
0 16px 40px -10px rgba(109,40,217,0.4) !important;
text-shadow: 0 1px 2px rgba(0,0,0,0.25);
}
.btn-primary:hover, a.btn-primary:hover {
transform: translateY(-3px) scale(1.03);
background:
linear-gradient(180deg, rgba(255,255,255,0.4) 0%, rgba(155,91,255,0.65) 100%),
rgba(155,91,255,0.5) !important;
border-color: rgba(255,255,255,0.45) !important;
box-shadow:
0 2px 0 rgba(255,255,255,0.45) inset,
0 -1px 0 rgba(0,0,0,0.18) inset,
0 0 0 2px rgba(196,173,255,0.45),
0 12px 32px -8px rgba(109,40,217,0.7),
0 24px 60px -10px rgba(155,91,255,0.55),
0 0 80px rgba(196,173,255,0.4) !important;
}
.btn-primary:active {
transform: translateY(0) scale(0.98);
}
/* === On-dark (white glass sobre fondo dark) === */
.btn-onDark, a.btn-onDark {
background:
linear-gradient(180deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.75) 100%) !important;
backdrop-filter: blur(20px) saturate(180%) !important;
-webkit-backdrop-filter: blur(20px) saturate(180%) !important;
color: #1a0a2e !important;
border: 1px solid rgba(255,255,255,0.6) !important;
box-shadow:
0 2px 0 rgba(255,255,255,1) inset,
0 -2px 4px rgba(196,173,255,0.1) inset,
0 0 0 1px rgba(196,173,255,0.2),
0 8px 24px -6px rgba(255,255,255,0.2),
0 20px 50px -12px rgba(196,173,255,0.4) !important;
font-weight: 600 !important;
}
.btn-onDark:hover, a.btn-onDark:hover {
transform: translateY(-3px) scale(1.03);
background:
linear-gradient(180deg, #fff 0%, rgba(244,237,255,0.95) 100%) !important;
color: var(--violet-700, #4c1d95) !important;
border-color: rgba(196,173,255,0.7) !important;
box-shadow:
0 2px 0 rgba(255,255,255,1) inset,
0 -3px 6px rgba(196,173,255,0.18) inset,
0 0 0 2px rgba(196,173,255,0.5),
0 12px 32px -8px rgba(255,255,255,0.3),
0 30px 70px -12px rgba(196,173,255,0.6),
0 0 60px rgba(196,173,255,0.3) !important;
}
/* === Dark ghost GLASS (translucent dark) === */
.btn-darkGhost, a.btn-darkGhost {
background:
linear-gradient(180deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.04) 100%) !important;
backdrop-filter: blur(20px) saturate(180%) !important;
-webkit-backdrop-filter: blur(20px) saturate(180%) !important;
color: #fff !important;
border: 1px solid rgba(255,255,255,0.18) !important;
box-shadow:
0 1px 0 rgba(255,255,255,0.25) inset,
0 -1px 0 rgba(0,0,0,0.15) inset,
0 0 0 1px rgba(255,255,255,0.04),
0 8px 24px -8px rgba(0,0,0,0.4),
0 16px 40px -12px rgba(109,40,217,0.15) !important;
font-weight: 500 !important;
}
.btn-darkGhost:hover, a.btn-darkGhost:hover {
transform: translateY(-3px) scale(1.03);
background:
linear-gradient(180deg, rgba(196,173,255,0.22) 0%, rgba(109,40,217,0.12) 100%) !important;
border-color: rgba(196,173,255,0.5) !important;
color: #fff !important;
box-shadow:
0 1px 0 rgba(255,255,255,0.3) inset,
0 -1px 0 rgba(0,0,0,0.15) inset,
0 0 0 2px rgba(196,173,255,0.3),
0 12px 32px -8px rgba(0,0,0,0.45),
0 22px 50px -12px rgba(109,40,217,0.4),
0 0 60px rgba(155,91,255,0.25) !important;
}
/* === Light / Ghost (sobre fondo claro — solo si aparecen) === */
.btn-light, a.btn-light {
background: rgba(255,255,255,0.06) !important;
color: #fff !important;
border: 1px solid rgba(255,255,255,0.15) !important;
backdrop-filter: blur(10px);
}
.btn-light:hover, a.btn-light:hover {
transform: translateY(-2px) scale(1.02);
background: rgba(255,255,255,0.12) !important;
border-color: rgba(196,173,255,0.4) !important;
}
.btn-ghost, a.btn-ghost {
background: transparent !important;
color: rgba(255,255,255,0.85) !important;
border: 1px solid rgba(255,255,255,0.18) !important;
}
.btn-ghost:hover, a.btn-ghost:hover {
background: rgba(255,255,255,0.06) !important;
border-color: rgba(196,173,255,0.4) !important;
color: #fff !important;
}
/* === Small variant del nav === */
.btn-sm, a.btn-sm {
padding: 10px 18px !important;
font-size: 13px !important;
gap: 8px !important;
}
/* Reducir animación con prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
.btn::before, a.btn::before { display: none !important; }
.btn:hover, a.btn:hover { transform: none !important; }
}
/* Outcome sub-cards, feature cards, segment cards */
.outcome-sub, .segment, .feat-cap, .cross-card {
transition: transform 0.5s var(--cine-ease-out), background 0.4s, border-color 0.4s, box-shadow 0.5s var(--cine-ease-out) !important;
will-change: transform;
}
.outcome-sub:hover, .segment:hover, .cross-card:hover {
transform: translateY(-4px);
background: rgba(255,255,255,0.05) !important;
border-color: rgba(196,173,255,0.25) !important;
box-shadow: 0 24px 50px -12px rgba(0, 0, 0, 0.55);
}
/* Pipeline stops también con hover refinado */
.pipe-stop {
transition: transform 0.4s var(--cine-ease-out), opacity 0.4s !important;
cursor: default;
}
.pipe-stop:hover {
transform: translateY(-6px) scale(1.04);
}
/* Logos celdas con micro-fade en hover */
.logo-cell {
transition: color 0.4s var(--cine-ease-out), transform 0.4s !important;
}
.logo-cell:hover { color: #fff !important; transform: scale(1.04); }
/* Ecosystem tabs */
.ecosystem-tabs button {
transition: transform 0.3s var(--cine-ease-out), opacity 0.3s !important;
}
.ecosystem-tabs button:hover { transform: translateY(-1px); }
/* ============================================================
NAV · cinematic shrink + hide-on-scroll
============================================================ */
header.nav {
transition: transform 0.6s var(--cine-ease-out), backdrop-filter 0.5s, background-color 0.5s, padding 0.5s;
}
html.cine-nav-hidden header.nav { transform: translateY(-110%); }
html.cine-nav-condensed header.nav .nav-inner { padding-top: 8px; padding-bottom: 8px; }
/* ============================================================
LOGOS marquee — adaptado de 21st.dev Logo Cloud 4
Con progressive blur multicapa en los bordes (estilo Vercel)
============================================================ */
section.logos {
position: relative;
isolation: isolate;
}
section.logos .logos-inner {
position: relative;
}
.logos-grid {
position: relative;
overflow: hidden;
}
.logos-grid.cine-marquee {
display: flex;
gap: 96px;
align-items: center;
width: max-content;
will-change: transform;
animation: cineMarquee 50s linear infinite;
padding: 8px 0;
}
.logos-grid.cine-marquee:hover {
animation-play-state: paused;
}
@keyframes cineMarquee {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
.logos-grid.cine-marquee .logo-cell {
flex: 0 0 auto;
white-space: nowrap;
font-family: var(--f-serif, Georgia, serif);
font-style: italic;
font-size: 22px;
letter-spacing: -0.01em;
color: rgba(255,255,255,0.5) !important;
transition: color 0.4s var(--cine-ease-out), transform 0.4s, filter 0.4s;
position: relative;
}
.logos-grid.cine-marquee .logo-cell::before {
content: "";
position: absolute;
left: -48px; top: 50%;
width: 4px; height: 4px;
border-radius: 50%;
background: rgba(196,173,255,0.4);
transform: translateY(-50%);
}
.logos-grid.cine-marquee .logo-cell:first-child::before { display: none; }
.logos-grid.cine-marquee .logo-cell:hover {
color: #fff !important;
transform: translateY(-2px);
filter: drop-shadow(0 4px 12px rgba(196,173,255,0.4));
}
/* Progressive blur eliminado — generaba rectángulos borrosos en el centro
porque .logos-inner del cliente tiene align-items: center y se reduce
al ancho del label, no al del marquee */
.logos-inner::before,
.logos-inner::after { display: none !important; }
/* Label arriba del marquee */
section.logos .logos-label {
font-family: var(--f-mono, monospace) !important;
font-size: 11px !important;
letter-spacing: 0.18em !important;
text-transform: uppercase !important;
color: rgba(255,255,255,0.5) !important;
margin-bottom: 32px !important;
text-align: center !important;
}
/* ============================================================
CTA STRIP · breathing aura
============================================================ */
.cta-strip { position: relative; isolation: isolate; }
.cta-strip .cta-aura {
position: absolute;
width: 60vw; height: 60vw;
max-width: 700px; max-height: 700px;
border-radius: 50%;
filter: blur(90px);
background: radial-gradient(circle, rgba(255,255,255,0.18), transparent 70%);
top: 50%; left: 50%;
transform: translate(-50%, -50%);
pointer-events: none;
z-index: 0;
opacity: 0.6;
animation: ctaBreath 9s ease-in-out infinite;
}
@keyframes ctaBreath {
0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; }
50% { transform: translate(-50%, -50%) scale(1.12); opacity: 0.85; }
}
/* ============================================================
ACCESIBILIDAD · respeta prefers-reduced-motion
============================================================ */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
[data-reveal], [data-scale-in], .cine-line > .cine-line-inner {
opacity: 1 !important;
transform: none !important;
}
.hero-aura .orb, .cta-strip .cta-aura,
.logos-grid.cine-marquee { animation: none !important; }
.cine-cursor, .cine-cursor-ring { display: none !important; }
html.cine-cursor-on body { cursor: auto !important; }
}
/* ============================================================
HERO TYPOGRAPHY · Editorial luxury, NO childish
Geist con peso 500 a tamaño moderado para sensación premium.
============================================================ */
.hero h1,
.product-hero h1 {
font-size: clamp(32px, 3.2vw, 56px) !important;
line-height: 1.08 !important;
letter-spacing: -0.032em !important;
font-weight: 500 !important;
padding-bottom: 0.08em;
max-width: 20ch;
margin: 0 0 24px !important;
}
/* ============================================================
SECTION HEADERS · balancear columna left vs right
La columna izquierda (section-num + eyebrow) era mucho menor
que el H2 enorme de la derecha → quedaba aire feo arriba/izq.
============================================================ */
html body section .section-header,
html body section .transform-header,
html body section .outcomes-header {
align-items: center !important;
}
html body section h2.title {
font-size: clamp(28px, 3.2vw, 52px) !important;
line-height: 1.1 !important;
letter-spacing: -0.028em !important;
max-width: 22ch;
}
.hero h1 .serif-italic,
.product-hero h1 .serif-italic {
font-family: var(--f-serif);
font-style: italic;
font-weight: 400;
letter-spacing: -0.018em;
/* Más cuerpo al serif para que tenga presencia editorial */
font-size: 1.08em;
}
/* Lede más respirable y refinada */
.hero .lede,
.product-hero .lede {
font-size: clamp(16px, 1.15vw, 19px) !important;
line-height: 1.6 !important;
max-width: 48ch !important;
margin-top: 4px !important;
margin-bottom: 32px !important;
color: rgba(255,255,255,0.65) !important;
font-weight: 400 !important;
}
.hero-badge { margin-bottom: 24px !important; opacity: 0.85; }
.hero .cta-row,
.product-hero .product-hero-cta {
gap: 12px !important;
margin-top: 4px !important;
}
/* ============================================================
3D PERSPECTIVE · depth REAL visible en reposo
No es animación on-scroll: es presencia 3D inmediata.
============================================================ */
.hero,
.product-hero {
perspective: 2400px;
perspective-origin: 70% 50%;
background:
radial-gradient(ellipse 50% 70% at 100% 60%, rgba(155, 91, 255, 0.45), transparent 65%),
radial-gradient(ellipse 65% 55% at 80% 30%, rgba(109, 40, 217, 0.55), transparent 60%),
radial-gradient(ellipse 70% 80% at 0% 100%, rgba(46, 16, 101, 0.7), transparent 60%),
radial-gradient(ellipse 40% 50% at 20% 20%, rgba(76, 29, 149, 0.5), transparent 60%),
linear-gradient(180deg, #0a0612 0%, #1a0a2e 50%, #14081f 100%) !important;
}
/* Spotlight directo bajo las cards 3D para realzarlas */
.hero::after,
.product-hero::after {
content: "";
position: absolute;
top: 50%; right: -10%;
width: 70%; height: 90%;
transform: translateY(-50%);
background: radial-gradient(circle, rgba(196, 173, 255, 0.18), transparent 60%);
filter: blur(60px);
z-index: 0;
pointer-events: none;
}
.hero-v2,
.product-hero-inner {
transform-style: preserve-3d;
}
/* Layer stack: cards flotan en 3D, comprimido para cuadrar con texto */
.hero .layer-stack {
transform-style: preserve-3d;
perspective: 1800px;
perspective-origin: 100% 50%;
padding: 0;
gap: 14px !important;
display: flex;
flex-direction: column;
justify-content: center;
align-self: center;
}
/* Cards: GRID estricto 2 columnas que NO se cruzan + impact visual */
.hero .layer-card {
display: grid !important;
grid-template-columns: 124px 1fr !important;
gap: 28px !important;
padding: 22px 26px !important;
align-items: start !important;
position: relative;
overflow: hidden;
}
/* Glow violeta sutil en el lado izquierdo de cada card */
.hero .layer-card::before {
content: "";
position: absolute;
top: -40%; left: -10%;
width: 50%; height: 180%;
background: radial-gradient(ellipse, rgba(109,40,217,0.4), transparent 70%);
filter: blur(40px);
pointer-events: none;
z-index: 0;
opacity: 0.6;
}
.hero .layer-card > * { position: relative; z-index: 1; }
/* Columna 01 / 02 / 03 + label vertical */
.hero .layer-card .layer-num {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
justify-content: space-between !important;
align-self: stretch !important;
min-height: 88px;
font-family: var(--f-mono) !important;
font-size: 36px !important;
font-weight: 300 !important;
line-height: 1 !important;
color: rgba(196,173,255,0.55) !important;
letter-spacing: -0.02em;
}
.hero .layer-card .layer-num .label {
display: block !important;
font-size: 9px !important;
letter-spacing: 0.18em !important;
margin-top: auto !important;
padding-top: 16px;
color: rgba(255,255,255,0.4) !important;
font-weight: 500;
}
/* Columna body: nunca se cruza con la columna izquierda */
.hero .layer-card .layer-body {
min-width: 0;
display: flex;
flex-direction: column;
}
.hero .layer-card .layer-body .htitle {
font-size: 15px !important;
font-weight: 600 !important;
margin-bottom: 6px !important;
color: #fff !important;
letter-spacing: -0.01em;
}
.hero .layer-card .layer-body .htitle small {
font-weight: 400;
color: rgba(255,255,255,0.45) !important;
font-family: var(--f-mono);
font-size: 11px;
}
.hero .layer-card .layer-body .hdesc {
font-size: 12.5px !important;
line-height: 1.5 !important;
margin-bottom: 14px !important;
color: rgba(255,255,255,0.62) !important;
}
.hero .layer-card .layer-snippet {
padding: 10px 14px !important;
font-size: 10.5px !important;
background: rgba(0,0,0,0.35) !important;
border: 1px solid rgba(255,255,255,0.08) !important;
border-radius: 8px;
}
.hero .layer-connector {
height: 14px !important;
margin-left: 60px;
}
.hero .layer-connector .pulse {
background: rgba(196,173,255,0.7) !important;
box-shadow: 0 0 12px rgba(196,173,255,0.6);
}
/* Card 03 (Bitfin CFO): violeta dominante para crear punto de atención */
.hero .layer-card.l3 {
background: linear-gradient(135deg, rgba(76, 29, 149, 0.65), rgba(46, 16, 101, 0.85)) !important;
border: 1px solid rgba(196,173,255,0.25) !important;
}
.hero .layer-card.l3::before {
background: radial-gradient(ellipse, rgba(196,173,255,0.5), transparent 70%);
opacity: 0.8;
}
.hero .layer-card.l3 .layer-num { color: rgba(255,255,255,0.55) !important; }
.hero .layer-card.l3 .layer-num .label { color: rgba(255,255,255,0.55) !important; }
.hero .layer-card {
transform-style: preserve-3d;
backface-visibility: hidden;
will-change: transform;
transform-origin: 100% 50%;
box-shadow:
0 30px 60px -20px rgba(0, 0, 0, 0.7),
0 18px 36px -18px rgba(109, 40, 217, 0.35),
0 0 0 1px rgba(255, 255, 255, 0.06) inset;
background: rgba(20, 8, 31, 0.85) !important;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
transition: box-shadow 0.6s var(--cine-ease-out), background 0.6s var(--cine-ease-out);
}
.hero .layer-card:hover {
box-shadow:
0 50px 100px -20px rgba(0, 0, 0, 0.85),
0 30px 60px -20px rgba(109, 40, 217, 0.55),
0 0 0 1px rgba(255, 255, 255, 0.14) inset;
z-index: 10;
background: rgba(30, 16, 50, 0.95) !important;
}
/* Conector entre layer cards: línea 3D sutil */
.hero .layer-connector {
opacity: 0.4;
transform: rotateY(-7deg);
}
.product-hero .mock,
.hero .mock,
.hero .world {
transform-style: preserve-3d;
will-change: transform;
}
/* ============================================================
IMAGE EXPANSION · Apple Vision style
Los mockups grandes crecen al entrar al viewport con scrub
============================================================ */
[data-expand] {
transform-origin: center center;
will-change: transform, opacity;
}
html.cine-ready [data-expand] {
transform: scale(0.78) translateZ(0);
opacity: 0.4;
}
/* ============================================================
MEJORAS hero · espacio compacto, sin huecos
============================================================ */
.hero .container,
.product-hero .container {
padding-top: 0 !important;
padding-bottom: 2vh !important;
width: 100%;
}
.hero .hero-v2 {
gap: clamp(32px, 4vw, 64px) !important;
align-items: start !important;
}
.product-hero .product-hero-inner {
gap: clamp(32px, 4vw, 64px) !important;
align-items: start !important;
}
/* Stack derecho se alinea al top del grid + sin offsets */
html body .hero .layer-stack {
align-self: start !important;
justify-self: stretch !important;
padding-top: 0 !important;
margin-top: 0 !important;
position: relative !important;
top: 0 !important;
}
/* Primer hijo del stack (layer-card .l1) sin margin-top */
html body .hero .layer-stack > *:first-child {
margin-top: 0 !important;
}
/* Para que el contenido izquierdo respire y se vea balanceado,
el primer hijo (badge) tiene margin-top 0 */
html body .hero .hero-left > *:first-child,
html body .product-hero > div:first-child > *:first-child {
margin-top: 0 !important;
}
/* Hero scroll indicator inferior */
.hero-scroll-cue {
position: absolute;
bottom: 32px;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
font-family: var(--f-mono);
font-size: 10px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.45);
z-index: 3;
animation: scrollCueFade 3s var(--cine-ease-in-out) infinite;
}
.hero-scroll-cue::after {
content: "";
width: 1px;
height: 56px;
background: linear-gradient(180deg, rgba(255,255,255,0.5), transparent);
}
@keyframes scrollCueFade {
0%, 100% { opacity: 0.4; transform: translateX(-50%) translateY(0); }
50% { opacity: 0.9; transform: translateX(-50%) translateY(6px); }
}
@media (max-width: 980px) {
.hero-scroll-cue { display: none; }
}
/* ============================================================
GRADIENT MESH · reemplazo del watermark serif
Capa de profundidad sutil estilo Vision OS
============================================================ */
.hero-aura .mesh {
position: absolute;
inset: -10%;
background:
radial-gradient(ellipse 50% 40% at 20% 30%, rgba(155, 91, 255, 0.35), transparent 60%),
radial-gradient(ellipse 40% 50% at 80% 20%, rgba(109, 40, 217, 0.30), transparent 60%),
radial-gradient(ellipse 60% 50% at 50% 90%, rgba(196, 173, 255, 0.20), transparent 60%),
radial-gradient(ellipse 40% 60% at 90% 70%, rgba(109, 40, 217, 0.25), transparent 60%);
filter: blur(40px);
opacity: 0.85;
z-index: 0;
pointer-events: none;
animation: meshDrift 18s ease-in-out infinite;
}
@keyframes meshDrift {
0%, 100% { transform: translate(0%, 0%) scale(1); }
33% { transform: translate(2%, -1.5%) scale(1.05); }
66% { transform: translate(-1.5%, 1.5%) scale(0.98); }
}
/* Light beam eliminado — se veía como raya sin utilidad */
.hero-aura .beam { display: none !important; }
/* ============================================================
KPI STRIP en el hero · números con sliding digits (21st.dev port)
============================================================ */
.hero-kpis {
display: flex;
gap: 48px;
margin-top: 40px;
padding-top: 32px;
border-top: 1px solid rgba(255,255,255,0.10);
flex-wrap: wrap;
}
/* Sliding digits container */
.sliding-num {
display: inline-flex;
overflow: hidden;
line-height: 1;
vertical-align: top;
font-variant-numeric: tabular-nums;
}
.sliding-num .digit {
position: relative;
display: inline-block;
height: 1em;
width: 0.62em;
overflow: hidden;
}
.sliding-num .digit-track {
position: absolute;
top: 0; left: 0;
display: flex;
flex-direction: column;
transition: transform 1.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.sliding-num .digit-track span {
display: block;
height: 1em;
text-align: center;
}
.hero-kpi {
flex: 0 1 auto;
}
.hero-kpi .num {
font-family: var(--f-sans);
font-size: clamp(28px, 2.8vw, 44px);
font-weight: 500;
letter-spacing: -0.03em;
line-height: 1;
color: #fff;
display: flex;
align-items: baseline;
gap: 4px;
}
.hero-kpi .num .accent {
color: #C4ADFF;
font-family: var(--f-serif);
font-style: italic;
font-weight: 400;
font-size: 0.7em;
}
.hero-kpi .num .unit {
font-size: 0.45em;
font-weight: 400;
color: rgba(255,255,255,0.55);
letter-spacing: 0;
margin-left: 2px;
}
.hero-kpi .lbl {
font-family: var(--f-mono);
font-size: 10.5px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(255,255,255,0.5);
margin-top: 6px;
}
/* ============================================================
MARQUEE GIGANTE · KPI scroll horizontal estilo Stripe
============================================================ */
.kpi-marquee {
position: relative;
background: #050308;
padding: 36px 0;
overflow: hidden;
border-top: 1px solid rgba(255,255,255,0.06);
border-bottom: 1px solid rgba(255,255,255,0.06);
z-index: 2;
}
.kpi-marquee::before,
.kpi-marquee::after {
content: "";
position: absolute;
top: 0;
width: 240px;
height: 100%;
z-index: 3;
pointer-events: none;
}
.kpi-marquee::before {
left: 0;
background: linear-gradient(90deg, #050308 0%, transparent 100%);
}
.kpi-marquee::after {
right: 0;
background: linear-gradient(270deg, #050308 0%, transparent 100%);
}
.kpi-marquee-track {
display: flex;
gap: 80px;
width: max-content;
align-items: center;
animation: marqueeSlide 42s linear infinite;
will-change: transform;
}
.kpi-marquee-item {
display: flex;
align-items: baseline;
gap: 14px;
font-family: var(--f-sans);
font-size: clamp(40px, 6vw, 92px);
font-weight: 500;
letter-spacing: -0.035em;
color: rgba(255,255,255,0.95);
white-space: nowrap;
line-height: 1;
}
.kpi-marquee-item .lbl {
font-family: var(--f-mono);
font-size: 0.18em;
font-weight: 500;
letter-spacing: 0.2em;
text-transform: uppercase;
color: rgba(196,173,255,0.7);
}
.kpi-marquee-item .ser {
font-family: var(--f-serif);
font-style: italic;
color: #C4ADFF;
font-weight: 400;
}
.kpi-marquee-item .dot {
display: inline-block;
width: 8px; height: 8px;
border-radius: 50%;
background: rgba(196,173,255,0.5);
margin: 0 24px;
}
@keyframes marqueeSlide {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
/* ============================================================
DATA FLOW · línea de pulse entre cards del hero
============================================================ */
.hero .layer-connector {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.hero .layer-connector::before {
content: "";
position: absolute;
left: 50%;
top: 0;
bottom: 0;
width: 1px;
background: linear-gradient(180deg, rgba(196,173,255,0.4), rgba(255,255,255,0.05));
}
.hero .layer-connector .pulse {
width: 7px;
height: 7px;
border-radius: 50%;
background: #C4ADFF;
box-shadow: 0 0 14px rgba(196,173,255,0.8);
animation: flowPulse 2.2s var(--cine-ease-out) infinite;
z-index: 1;
}
@keyframes flowPulse {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.6); opacity: 0.6; box-shadow: 0 0 24px rgba(196,173,255,1); }
}
/* Live badge pulsing en card 03 */
.hero .layer-card.l3 .layer-snippet {
position: relative;
}
.hero .layer-card.l3 .layer-snippet::before {
content: "● LIVE";
position: absolute;
top: -22px;
right: 0;
font-family: var(--f-mono);
font-size: 9px;
letter-spacing: 0.18em;
color: #5EE0AA;
animation: liveBlink 2s ease-in-out infinite;
}
@keyframes liveBlink {
0%, 100% { opacity: 1; }
50% { opacity: 0.45; }
}
/* ============================================================
DASHBOARD CFO — POLISH PROFESIONAL (capa final)
Refinamiento sutil: jerarquía, gradient fills, glow, tabular nums
============================================================ */
/* — Layout: equilibrar grid feat para que el dashboard no domine — */
#dashboard.feat,
.feat:has(.cfo-dash) {
grid-template-columns: 1fr 1.15fr !important;
gap: 48px !important;
align-items: center !important;
}
.feat .feat-visual:has(.cfo-dash) {
display: flex;
justify-content: flex-end;
}
.cfo-dash {
max-width: 760px !important;
width: 100% !important;
margin-left: auto !important;
}
@media (max-width: 1100px) {
#dashboard.feat,
.feat:has(.cfo-dash) { grid-template-columns: 1fr !important; gap: 32px !important; }
.cfo-dash { max-width: 100% !important; margin: 0 auto !important; }
}
/* — Escala global: reducir densidad para proporción con copy del lado izquierdo — */
.cfo-dash-body {
padding: 11px 13px 14px !important;
font-size: 10px !important;
gap: 8px !important;
}
.cfo-toolbar { margin-bottom: 0 !important; }
.cfo-pill, .cfo-period {
font-size: 9.5px !important;
padding: 3px 8px !important;
}
.cfo-period span { font-size: 10px !important; }
.cfo-arrow { font-size: 11px !important; padding: 0 3px !important; }
.cfo-export {
padding: 5px 11px !important;
font-size: 9.5px !important;
}
/* — KPI grid: gap más justo + padding reducido — */
.cfo-kpis { gap: 5px !important; }
/* — KPI cards: más respiración, hover sutil con lift + glow violeta — */
.cfo-kpi {
background: linear-gradient(180deg, rgba(255,255,255,0.028) 0%, rgba(255,255,255,0.015) 100%) !important;
border: 1px solid rgba(255,255,255,0.07) !important;
padding: 7px 8px 6px !important;
transition: transform 0.35s cubic-bezier(0.16,1,0.3,1), border-color 0.35s ease, box-shadow 0.35s ease;
}
.cfo-kpi::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: radial-gradient(120% 80% at 100% 0%, rgba(155,91,255,0.10) 0%, transparent 55%);
opacity: 0;
transition: opacity 0.45s ease;
pointer-events: none;
}
.cfo-kpi:hover {
transform: translateY(-1px);
border-color: rgba(196,173,255,0.18) !important;
box-shadow: 0 8px 22px -10px rgba(109,40,217,0.35);
}
.cfo-kpi:hover::before { opacity: 1; }
.cfo-kpi .lbl {
font-size: 7px !important;
letter-spacing: 0.08em !important;
color: rgba(255,255,255,0.48) !important;
margin-bottom: 3px !important;
}
.cfo-kpi .val {
font-size: 13px !important;
letter-spacing: -0.015em !important;
font-variant-numeric: tabular-nums !important;
}
.cfo-kpi .trend { font-size: 7.5px !important; margin-top: 2px !important; }
/* — Sparklines: drop-shadow para "halo" editorial (simula gradient fill) — */
.cfo-kpi .spark { height: 14px !important; margin-top: 4px !important; }
.cfo-kpi .spark polyline {
stroke-linecap: round;
stroke-linejoin: round;
filter: drop-shadow(0 1px 3px currentColor);
}
.cfo-kpi .spark polyline[stroke="#9B5BFF"] { filter: drop-shadow(0 2px 6px rgba(155,91,255,0.55)); }
.cfo-kpi .spark polyline[stroke="#5EE0AA"] { filter: drop-shadow(0 2px 6px rgba(94,224,170,0.50)); }
.cfo-kpi .spark polyline[stroke="#F59E0B"] { filter: drop-shadow(0 2px 6px rgba(245,158,11,0.50)); }
.cfo-kpi .spark polyline[stroke="#E63946"] { filter: drop-shadow(0 2px 6px rgba(230,57,70,0.50)); }
.cfo-kpi .spark polyline[stroke="#22D3EE"] { filter: drop-shadow(0 2px 6px rgba(34,211,238,0.50)); }
.cfo-trend-list .trend-spark polyline {
stroke-linecap: round;
stroke-linejoin: round;
filter: drop-shadow(0 1px 2px currentColor);
}
/* — Botón Exportar: gradient más vibrante + glow expandido — */
.cfo-export {
background: linear-gradient(135deg, #A78BFA 0%, #9B5BFF 45%, #6d28d9 100%) !important;
padding: 7px 16px !important;
font-size: 11px !important;
letter-spacing: 0.02em !important;
font-weight: 600 !important;
box-shadow:
0 0 0 1px rgba(196,173,255,0.20) inset,
0 6px 16px -6px rgba(109,40,217,0.55),
0 2px 4px -1px rgba(0,0,0,0.4) !important;
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.cfo-export:hover {
transform: translateY(-1px);
box-shadow:
0 0 0 1px rgba(196,173,255,0.32) inset,
0 10px 24px -8px rgba(155,91,255,0.65),
0 3px 6px -1px rgba(0,0,0,0.4) !important;
}
/* — Pills toolbar: más institucionales — */
.cfo-pill {
background: rgba(255,255,255,0.035) !important;
border: 1px solid rgba(255,255,255,0.08) !important;
letter-spacing: 0.02em !important;
}
/* — Cards: borde y fondo levemente más definidos — */
.cfo-card {
background: linear-gradient(180deg, rgba(255,255,255,0.028) 0%, rgba(255,255,255,0.012) 100%) !important;
border: 1px solid rgba(255,255,255,0.07) !important;
padding: 9px !important;
gap: 7px !important;
position: relative;
}
.cfo-card::after {
content: "";
position: absolute;
top: 0; left: 10px; right: 10px;
height: 1px;
background: linear-gradient(90deg, transparent 0%, rgba(196,173,255,0.18) 50%, transparent 100%);
pointer-events: none;
}
.cfo-card h4 {
font-size: 10px !important;
letter-spacing: 0.01em !important;
color: rgba(255,255,255,0.94) !important;
}
.cfo-grid { gap: 6px !important; align-items: stretch !important; }
/* — Cards se estiran al mismo alto y su contenido distribuye el espacio — */
.cfo-card { height: 100% !important; }
.cfo-line-chart { height: auto !important; min-height: 130px !important; flex: 1 1 auto !important; }
.cfo-axis { font-size: 7.5px !important; }
.cfo-legend { font-size: 8px !important; gap: 8px !important; }
.cfo-asset-list { flex: 1 1 auto !important; display: flex !important; flex-direction: column !important; justify-content: space-evenly !important; }
.cfo-asset-list .row { font-size: 9.5px !important; padding: 5px 0 !important; }
.cfo-asset-list b { font-size: 9.5px !important; }
.cfo-donut-wrap { margin-top: auto !important; margin-bottom: auto !important; }
/* Resumen Ejecutivo: insights distribuyen alto disponible */
.cfo-insights { flex: 1 1 auto !important; display: flex !important; flex-direction: column !important; justify-content: space-evenly !important; gap: 4px !important; }
/* — Mock chrome (barra del navegador): más comprimida — */
.cfo-dash > .mock-chrome,
.mock.cfo-dash .mock-chrome {
padding: 6px 12px !important;
min-height: 0 !important;
height: auto !important;
gap: 6px !important;
}
.cfo-dash .mock-dot {
width: 7px !important;
height: 7px !important;
}
.cfo-dash .mock-url {
font-size: 9px !important;
padding: 3px 10px !important;
border-radius: 999px !important;
}
/* — Cards inferiores: distribuir contenido para que las 3 cards rellenen mismo alto — */
.cfo-tab-table {
flex: 1 1 auto !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-evenly !important;
}
.cfo-vertical {
flex: 1 1 auto !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-evenly !important;
gap: 2px !important;
}
.cfo-trend-list {
flex: 1 1 auto !important;
justify-content: space-evenly !important;
gap: 4px !important;
}
.cfo-tabs button { font-size: 9.5px !important; padding: 5px 9px !important; }
.cfo-tab-table .head { font-size: 7.5px !important; }
.cfo-tab-table .row { font-size: 9.5px !important; padding: 5px 0 !important; }
.cfo-tab-table .warn-pill { font-size: 8px !important; padding: 2px 7px !important; }
.cfo-vertical .row { font-size: 9.5px !important; }
.cfo-vertical .row b { font-size: 9.5px !important; }
.cfo-trend-list .trend-row { font-size: 9.5px !important; padding: 4px 0 !important; }
.cfo-insights .insight b { font-size: 10px !important; }
.cfo-insights .insight p { font-size: 9px !important; }
.cfo-insights .insight .ic { width: 18px !important; height: 18px !important; font-size: 10px !important; }
.cfo-health .health-label { font-size: 8.5px !important; }
.cfo-health .health-val { font-size: 11px !important; }
.cfo-link { font-size: 9.5px !important; }
/* — Donut: stroke más fino + glow ambiente — */
.cfo-donut-wrap {
filter: drop-shadow(0 0 18px rgba(155,91,255,0.18));
}
.cfo-donut-center {
text-align: center !important;
max-width: 75% !important;
pointer-events: none;
}
.cfo-donut-center .lbl {
font-size: 6.5px !important;
letter-spacing: 0.12em !important;
color: rgba(255,255,255,0.48) !important;
text-transform: uppercase;
margin-bottom: 2px !important;
white-space: nowrap;
}
.cfo-donut-center .val {
font-size: 10.5px !important;
font-variant-numeric: tabular-nums !important;
letter-spacing: -0.01em !important;
font-weight: 600 !important;
white-space: nowrap !important;
color: #fff !important;
line-height: 1.1 !important;
}
.cfo-asset-list .row {
padding: 4px 0 !important;
border-bottom: 1px solid rgba(255,255,255,0.04);
}
.cfo-asset-list .row:last-child { border-bottom: 0; }
.cfo-asset-list i {
width: 9px !important;
height: 9px !important;
border-radius: 2px !important;
box-shadow: 0 0 6px currentColor;
}
.cfo-asset-list b {
font-variant-numeric: tabular-nums !important;
font-family: var(--f-mono) !important;
font-weight: 500 !important;
}
/* — Score circle: glow verde sutil + tipografía refinada — */
.cfo-score {
filter: drop-shadow(0 0 10px rgba(94,224,170,0.28));
width: 44px !important; height: 44px !important;
}
.cfo-score .score-num {
font-size: 13px !important;
font-variant-numeric: tabular-nums !important;
letter-spacing: -0.02em !important;
}
.cfo-score .score-num small {
font-size: 6.5px !important;
color: rgba(255,255,255,0.45) !important;
font-weight: 400 !important;
}
/* — Health card refinado — */
.cfo-health {
background: rgba(94,224,170,0.06) !important;
border: 1px solid rgba(94,224,170,0.14) !important;
border-radius: 8px;
}
.cfo-health .health-val {
color: #5EE0AA !important;
font-weight: 600 !important;
letter-spacing: 0.01em;
}
/* — Insights: más respiración entre items — */
.cfo-insights .insight {
padding: 8px 2px !important;
border-bottom: 1px solid rgba(255,255,255,0.04);
}
.cfo-insights .insight:last-child { border-bottom: 0 !important; }
/* — Tabs activo más refinado: underline gradient + bg sutil — */
.cfo-tabs {
border-bottom: 1px solid rgba(255,255,255,0.06);
gap: 0 !important;
}
.cfo-tabs button {
position: relative;
padding: 6px 12px !important;
background: transparent !important;
border: 0 !important;
color: rgba(255,255,255,0.55) !important;
font-weight: 500 !important;
letter-spacing: 0.01em;
transition: color 0.25s ease;
}
.cfo-tabs button:hover { color: rgba(255,255,255,0.85) !important; }
.cfo-tabs button.on {
background: linear-gradient(180deg, rgba(155,91,255,0.10) 0%, rgba(155,91,255,0.02) 100%) !important;
color: #fff !important;
}
.cfo-tabs button.on::after {
content: "";
position: absolute;
bottom: -1px; left: 8px; right: 8px;
height: 2px;
background: linear-gradient(90deg, transparent, #C4ADFF 50%, transparent);
border-radius: 2px;
}
/* — Tab table: numerics tabular — */
.cfo-tab-table .row,
.cfo-tab-table .head { font-variant-numeric: tabular-nums !important; }
.cfo-tab-table .row b { font-family: var(--f-mono) !important; }
.cfo-tab-table .row {
padding: 7px 0 !important;
border-bottom: 1px solid rgba(255,255,255,0.035) !important;
transition: background 0.2s ease;
}
.cfo-tab-table .row:hover { background: rgba(255,255,255,0.015); }
.cfo-tab-table .row:last-child { border-bottom: 0 !important; }
/* — Análisis Vertical: barras más limpias — */
.cfo-vertical .row {
padding: 5px 0 !important;
font-variant-numeric: tabular-nums !important;
}
.cfo-vertical .row i {
height: 5px !important;
border-radius: 3px !important;
background: linear-gradient(90deg, rgba(155,91,255,0.65), rgba(196,173,255,0.85)) !important;
box-shadow: 0 0 8px rgba(155,91,255,0.25);
}
.cfo-vertical .row.hl i {
background: linear-gradient(90deg, #9B5BFF, #C4ADFF) !important;
box-shadow: 0 0 12px rgba(155,91,255,0.45);
}
/* — Trend list: spark más sutil — */
.cfo-trend-list .trend-row {
padding: 6px 0 !important;
border-bottom: 1px solid rgba(255,255,255,0.04);
font-variant-numeric: tabular-nums !important;
}
.cfo-trend-list .trend-row:last-child { border-bottom: 0; }
.cfo-trend-list .trend-spark { opacity: 0.85; }
/* — Link "Ver análisis detallado": más editorial — */
.cfo-link {
display: inline-flex !important;
align-items: center;
gap: 4px;
margin-top: 4px;
font-size: 11px !important;
color: #C4ADFF !important;
letter-spacing: 0.01em;
transition: transform 0.25s ease, color 0.25s ease;
}
.cfo-link:hover { transform: translateX(2px); color: #E5D8FF !important; }
/* — Line chart: glow sutil en la línea principal — */
.cfo-line-chart path[stroke]:not([stroke="none"]) {
filter: drop-shadow(0 0 4px rgba(155,91,255,0.35));
}
/* — Reduce motion: desactivar transforms — */
@media (prefers-reduced-motion: reduce) {
.cfo-kpi, .cfo-export, .cfo-link, .cfo-tab-table .row,
.cfo-tabs button { transition: none !important; }
.cfo-kpi:hover, .cfo-export:hover, .cfo-link:hover { transform: none !important; }
}
/* ============================================================
CLIENT LOGOS — marquee infinito tipo "tren pasando"
Logos blancos mono (fondos ya transparentes via Pillow)
============================================================ */
.logos-grid.client-logos,
.logos-grid.client-logos.cine-marquee {
gap: 64px !important;
align-items: center !important;
padding: 12px 0 !important;
}
/* Bounding box uniforme: el celda tiene ancho fijo, pero la imagen interna
se dimensiona por altura según el "bucket" de aspect ratio del logo.
Esto iguala el PESO visual percibido, no las dimensiones literales. */
.client-logos .logo-cell {
display: inline-flex !important;
align-items: center;
justify-content: center;
position: relative;
padding: 0 !important;
color: transparent !important;
font-size: 0 !important;
flex-shrink: 0;
transform: none !important;
width: 150px !important;
height: 60px !important;
}
.client-logos .logo-cell::before { display: none !important; }
.client-logos .logo-cell img {
display: block;
max-width: 100%;
width: auto;
object-fit: contain;
object-position: center;
opacity: 0.70;
/* Default: silueta blanca uniforme (funciona en logos tipo texto/wordmark) */
filter: brightness(0) invert(1);
transition: opacity 0.35s cubic-bezier(0.16,1,0.3,1),
transform 0.35s cubic-bezier(0.16,1,0.3,1);
will-change: opacity;
}
.client-logos .logo-cell:hover img {
opacity: 1;
transform: scale(1.08);
}
/* Logos con ILUSTRACIÓN detallada (Amalfi · HOT): preservar gradientes internos.
Para estos, grayscale + brightness moderado conserva la silueta legible. */
.client-logos .logo-cell img[alt="Amalfi"],
.client-logos .logo-cell img[alt="HOT"] {
filter: grayscale(1) brightness(2.2) contrast(0.9) saturate(0);
opacity: 0.78;
}
.client-logos .logo-cell:hover img[alt="Amalfi"],
.client-logos .logo-cell:hover img[alt="HOT"] {
filter: grayscale(1) brightness(2.5) contrast(1) saturate(0);
}
/* — Heights específicos por aspect ratio para igualar peso visual — */
/* Logos cuadrados o casi (ratio < 2): aprovechar altura completa */
.client-logos .logo-cell img[alt="Amalfi"],
.client-logos .logo-cell img[alt="HOT"],
.client-logos .logo-cell img[alt="DCM"] { height: 48px; }
/* Logos medianos (ratio 2-3): altura intermedia */
.client-logos .logo-cell img[alt="Edén"],
.client-logos .logo-cell img[alt="Selma"] { height: 40px; }
/* MC&I tiene slogan pequeño — necesita más altura para legibilidad,
y celda más ancha para acomodar su ratio amplio */
.client-logos .logo-cell img[alt="MC&I America"] { height: 44px; }
.client-logos .logo-cell:has(img[alt="MC&I America"]) { width: 180px !important; }
/* Logos panorámicos (ratio > 3): altura más baja, dejar que ancho se vea */
.client-logos .logo-cell img[alt="Fullstack"],
.client-logos .logo-cell img[alt="Cumbia"],
.client-logos .logo-cell img[alt="Milio"] { height: 32px; }
/* Ultra-wide (ratio > 5): ASECAP necesita más respiración vertical menos altura */
.client-logos .logo-cell img[alt="ASECAP"] { height: 26px; }
.client-logos .logo-cell:has(img[alt="ASECAP"]) { width: 180px !important; }
/* Velocidad del marquee: 40s para ritmo "tren" — más rápido que 50s, menos vertiginoso que 25s */
.logos-grid.client-logos.cine-marquee {
animation-duration: 40s !important;
}
/* Contenedor con fade lateral — logos "entran y salen" del viewport como tren */
section.logos .logos-inner {
overflow: hidden;
-webkit-mask-image: linear-gradient(90deg,
transparent 0%,
rgba(0,0,0,0.4) 4%,
#000 12%,
#000 88%,
rgba(0,0,0,0.4) 96%,
transparent 100%);
mask-image: linear-gradient(90deg,
transparent 0%,
rgba(0,0,0,0.4) 4%,
#000 12%,
#000 88%,
rgba(0,0,0,0.4) 96%,
transparent 100%);
}
/* Mobile — logos más compactos */
@media (max-width: 720px) {
.logos-grid.client-logos,
.logos-grid.client-logos.cine-marquee { gap: 40px !important; }
.client-logos .logo-cell { width: 120px !important; height: 44px !important; }
}
/* ============================================================
BitTools Facturas Mock — force dark mode total
Cualquier child del mock con fondo blanco/claro → oscuro translúcido
============================================================ */
.mock div[style*="background: #fff"],
.mock div[style*="background:#fff"],
.mock div[style*="background:#FFFFFF"],
.mock > div[style*="background"],
.mock div[style*="background: white"] {
background: transparent !important;
}
/* KPI cards del mock BitTools: borde violeta sutil + bg semitransparente */
.mock div[style*="border-radius: 12px"][style*="background: #fff"],
.mock div[style*="border-radius: 12px"][style*="background:#fff"] {
background: rgba(255,255,255,0.025) !important;
border-color: rgba(255,255,255,0.08) !important;
}
/* Iconos de los KPIs (los cuadrados de color que envuelven emojis) */
.mock div[style*="background: #EAF4FF"],
.mock div[style*="background:#EAF4FF"] { background: rgba(59,130,246,0.15) !important; }
.mock div[style*="background: #FFF6E0"],
.mock div[style*="background:#FFF6E0"] { background: rgba(245,158,11,0.15) !important; }
.mock div[style*="background: #E8F8F1"],
.mock div[style*="background:#E8F8F1"] { background: rgba(94,224,170,0.15) !important; }
.mock div[style*="background: #FEF2F2"],
.mock div[style*="background:#FEF2F2"] { background: rgba(230,57,70,0.15) !important; }
/* Búsqueda, pills filter, etc. */
.mock input[style*="background"],
.mock div[style*="background: #F8F7FB"],
.mock div[style*="background:#F8F7FB"],
.mock div[style*="background: #FAFAFC"],
.mock div[style*="background:#FAFAFC"] {
background: rgba(255,255,255,0.04) !important;
border-color: rgba(255,255,255,0.08) !important;
color: rgba(255,255,255,0.88) !important;
}
/* Botones blancos secundarios (Sincronizar) → glass dark */
.mock button[style*="background: #fff"],
.mock button[style*="background:#fff"] {
background: rgba(255,255,255,0.05) !important;
border: 1px solid rgba(255,255,255,0.12) !important;
color: rgba(255,255,255,0.9) !important;
}
/* Inputs y selects */
.mock input, .mock select { background: rgba(255,255,255,0.04) !important; color: rgba(255,255,255,0.88) !important; }
/* Tags de estado claros */
.mock span[style*="background: #DCFCE7"],
.mock span[style*="background:#DCFCE7"] { background: rgba(94,224,170,0.18) !important; color: #5EE0AA !important; }
.mock span[style*="background: #FEF3C7"],
.mock span[style*="background:#FEF3C7"] { background: rgba(245,158,11,0.18) !important; color: #FCD34D !important; }
.mock span[style*="background: #DBEAFE"],
.mock span[style*="background:#DBEAFE"] { background: rgba(59,130,246,0.18) !important; color: #93C5FD !important; }
.mock span[style*="background: #FEE2E2"],
.mock span[style*="background:#FEE2E2"] { background: rgba(230,57,70,0.18) !important; color: #FCA5A5 !important; }
/* Colores ink-XXX → blanco/translúcido */
.mock [style*="color: var(--ink-900)"],
.mock [style*="color:var(--ink-900)"] { color: #fff !important; }
.mock [style*="color: var(--ink-700)"],
.mock [style*="color:var(--ink-700)"] { color: rgba(255,255,255,0.92) !important; }
.mock [style*="color: var(--ink-500)"],
.mock [style*="color:var(--ink-500)"] { color: rgba(255,255,255,0.65) !important; }
.mock [style*="color: var(--ink-400)"],
.mock [style*="color:var(--ink-400)"] { color: rgba(255,255,255,0.55) !important; }
.mock [style*="color: var(--ink-300)"],
.mock [style*="color:var(--ink-300)"] { color: rgba(255,255,255,0.4) !important; }
/* Border var(--line) → translúcido */
.mock [style*="border: 1px solid var(--line)"],
.mock [style*="border:1px solid var(--line)"],
.mock [style*="border-color: var(--line)"] { border-color: rgba(255,255,255,0.08) !important; }