/* === ZEROLAGIA INDEX-PRO — Estilos premium 2026 === */
/* Fuentes Geist/Geist Mono cargadas desde el (sin @import para no bloquear el render) */
:root {
--bg-zinc: #09090B;
--bg-zinc-2: #18181B;
--surface: #1C1C20;
--border-soft: rgba(255,255,255,0.06);
--border-hov: rgba(255,255,255,0.12);
--text-strong: #FAFAFA;
--text-soft: #D7DBE3;
--text-mute: #92959F;
--accent-violet: #8B5CF6;
--accent-cyan: #06B6D4;
--accent-emerald: #10B981;
--aurora-1: #8B5CF6;
--aurora-2: #06B6D4;
--aurora-3: #EC4899;
--ease-premium: cubic-bezier(0.65, 0, 0.35, 1);
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* Body — TRANSPARENTE para que Vanta DOTS se vea de fondo */
body {
background: transparent !important;
color: var(--text-strong);
font-family: 'Geist', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
font-feature-settings: 'cv11','ss01','ss03';
position: relative;
overflow-x: hidden;
}
/* Grano de pelicula sutil sobre el fondo (textura/profundidad, sin requests de red) */
body::before {
content: '';
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
opacity: 0.05;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
background-size: 240px 240px;
}
body::after { content: none; }
/* Anillo de foco visible en todos los formularios (accesibilidad + sensacion premium) */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
outline: 2px solid transparent;
box-shadow: 0 0 0 3px rgba(200,212,224,0.22);
border-color: rgba(200,212,224,0.55) !important;
}
/* CTA de articulos del blog: el boton no debe ir subrayado (gana a .article-body a) */
.article-body .cta-box a,
.cta-box a.btn { text-decoration: none; }
/* === Navbar + desplegable de sectores en BLANCO en todo el sitio === */
.nav-brand .brand-word,
.nav-links li a,
.nav-dd-trigger,
.nav-links a.nav-active,
.mob-link,
.nav-mega-title,
.nav-mega-icon { color: #fff !important; }
.mob-sublink,
.nav-mega-desc { color: rgba(255,255,255,0.62) !important; }
.nav-mega-card.is-active .nav-mega-icon { color: #FF4F1F !important; }
/* Logo del navbar: misma fuente que el footer (Bruno Ace SC) */
.nav-brand .brand-word, .nav-brand .brand-dot { font-family: 'Bruno Ace SC', Georgia, serif !important; font-weight: 400 !important; }
.nav-brand .brand-word { font-size: 14px !important; letter-spacing: 0.5px !important; }
/* Iconos del desplegable de sectores: baldosa con degradado (badge); el icono ya va en blanco */
.nav-mega-icon { background: linear-gradient(135deg, rgba(167,139,250,0.20), rgba(34,211,238,0.10)) !important; border-color: rgba(200,212,224,0.16) !important; }
.nav-mega-card.is-active .nav-mega-icon { background: rgba(255,79,31,0.15) !important; border-color: rgba(255,79,31,0.30) !important; }
/* Nav: resaltado de palabras instantaneo al pasar el raton (sin lag perceptible) */
.nav-links li a, .nav-dd-trigger, .nav-mega-card, .nav-mega-title, .nav-mega-icon, .mob-menu a.mob-link { transition: none !important; }
/* Embeds de herramientas/CRM: iframe transparente, sin cuadro negro que tape el fondo del sitio */
.z-embed { background: transparent !important; }
/* Exito de formularios inline (mismo flujo, sin cambiar de pantalla) */
.form-ok { text-align: center; padding: 40px 28px; border: 1px solid rgba(34,197,94,0.30); border-radius: 18px; background: linear-gradient(180deg, rgba(34,197,94,0.08), rgba(34,197,94,0)); animation: formOkIn .4s var(--ease-premium) both; }
.form-ok-ic { width: 48px; height: 48px; margin: 0 auto 16px; border-radius: 50%; background: rgba(34,197,94,0.15); color: #22c55e; display: grid; place-items: center; font-size: 24px; font-weight: 700; }
.form-ok p { margin: 0 auto; color: var(--text); font-size: 16px; line-height: 1.6; max-width: 440px; }
@keyframes formOkIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
/* Logos de marca alojados localmente (apps sin icono en Simple Icons): baldosa redondeada para uniformar */
.mega-stack-row img.is-brand { border-radius: 5px; object-fit: contain; }
/* Tap target del boton de cierre del menu movil >=44px (accesibilidad movil) */
.mob-close { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
/* Puntos viajeros como DIV (offset-path en HTML = animacion en GPU, suave durante scroll) */
.eco-diagram { position: relative; }
.eco-dots-layer { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 2; }
.eco-dot { position: absolute; top: 0; left: 0; width: 6px; height: 6px; border-radius: 50%; background: #c8d4e0; opacity: 0; will-change: transform, opacity; }
.mega-grid { position: relative; }
.mw-dots-layer { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 2; }
.mw-dot { position: absolute; top: 0; left: 0; width: 7px; height: 7px; border-radius: 50%; background: #8B5CF6; opacity: 0; will-change: transform, opacity; }
/* Form checkbox RGPD consent */
.field-check { margin-top: 4px; }
.check-row { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--text-soft, rgba(228,236,242,0.7)); line-height: 1.55; cursor: pointer; }
.check-row input[type="checkbox"] { margin-top: 3px; flex-shrink: 0; accent-color: var(--accent-violet, #8B5CF6); width: 16px; height: 16px; cursor: pointer; }
.check-row a { color: var(--accent, #c8d4e0); text-decoration: underline; text-underline-offset: 2px; }
.check-row a:hover { color: #fff; }
/* Mega-hub: sin rays. Vanta global del fondo se ve detrás */
.mega-hub { position: relative; isolation: isolate; }
.mega-core { position: relative; z-index: 2; }
/* #vanta-bg ya tiene z-index:-1, no necesita override hijos */
h1, h2, h3, h4 { font-family: 'Geist', sans-serif; font-weight: 600; letter-spacing: -0.02em; text-wrap: balance; }
p, li { text-wrap: pretty; }
/* Aurora gradient mesh background HERO */
.hero {
position: relative;
background: transparent;
overflow: hidden;
isolation: isolate;
}
.hero::before {
content: '';
position: absolute;
inset: -20% -10% auto -10%;
height: 120%;
background: radial-gradient(ellipse 60% 50% at 30% 30%, var(--aurora-1) 0%, transparent 60%),
radial-gradient(ellipse 50% 40% at 70% 40%, var(--aurora-2) 0%, transparent 60%),
radial-gradient(ellipse 40% 30% at 50% 70%, var(--aurora-3) 0%, transparent 55%);
filter: blur(80px);
opacity: 0.25;
z-index: 0;
animation: aurora-shift 20s ease-in-out infinite;
}
.hero > * { position: relative; z-index: 2; }
@keyframes aurora-shift {
0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.25; }
33% { transform: translate(-3%, 2%) scale(1.05); opacity: 0.32; }
66% { transform: translate(2%, -1%) scale(0.98); opacity: 0.22; }
}
/* Hero badge moderno */
.badge {
background: rgba(255,255,255,0.04);
backdrop-filter: blur(12px) saturate(180%);
-webkit-backdrop-filter: blur(12px) saturate(180%);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 100px;
padding: 8px 16px;
font-family: 'Geist Mono', monospace;
font-size: 12px;
letter-spacing: 0.5px;
}
.badge-dot { background: var(--accent-emerald); box-shadow: 0 0 12px var(--accent-emerald); }
/* Glassmorphism tool-card */
.tool-card {
background: rgba(28,28,32,0.6);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border: 1px solid rgba(255,255,255,0.08);
box-shadow: 0 1px 0 0 rgba(255,255,255,0.05) inset,
0 20px 40px -10px rgba(0,0,0,0.5),
0 0 100px -20px rgba(139,92,246,0.15);
border-radius: 18px;
transition: transform 0.4s var(--ease-premium), box-shadow 0.4s var(--ease-premium);
}
.tool-card:hover {
transform: translateY(-4px);
box-shadow: 0 1px 0 0 rgba(255,255,255,0.08) inset,
0 30px 60px -10px rgba(0,0,0,0.6),
0 0 140px -10px rgba(139,92,246,0.25);
}
/* Scanner button pro */
.sc-btn {
background: linear-gradient(135deg, var(--text-strong) 0%, #E4E4E7 100%);
color: #09090B;
font-weight: 600;
letter-spacing: -0.01em;
box-shadow: 0 1px 0 0 rgba(255,255,255,0.5) inset,
0 10px 30px -5px rgba(255,255,255,0.15);
transition: all 0.3s var(--ease-premium);
}
.sc-btn:hover:not(:disabled) {
transform: translateY(-2px) scale(1.01);
box-shadow: 0 1px 0 0 rgba(255,255,255,0.6) inset,
0 15px 40px -5px rgba(255,255,255,0.25);
}
/* === SECTORES CARDS — workflow visual === */
.sectors-section {
padding: 100px 24px;
position: relative;
}
.sectors-eyebrow {
font-family: 'Geist Mono', monospace;
font-size: 11px;
color: var(--text-mute);
text-transform: uppercase;
letter-spacing: 2px;
text-align: center;
margin-bottom: 14px;
}
.sectors-title {
font-size: clamp(32px, 5vw, 52px);
font-weight: 600;
letter-spacing: -0.03em;
text-align: center;
max-width: 720px;
margin: 0 auto 16px;
text-wrap: balance;
}
.sectors-sub {
font-size: 17px;
color: var(--text-soft);
max-width: 620px;
margin: 0 auto 64px;
text-align: center;
line-height: 1.6;
}
.sector-card {
max-width: 1080px;
margin: 0 auto 40px;
background: linear-gradient(180deg, rgba(28,28,32,0.72) 0%, rgba(20,20,24,0.6) 100%);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border: 1px solid rgba(255,255,255,0.07);
border-radius: 24px;
padding: 48px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
align-items: center;
position: relative;
overflow: hidden;
transition: transform 0.16s var(--ease-premium);
}
.sector-card::before {
content: '';
position: absolute;
inset: 0;
border-radius: 24px;
padding: 1px;
background: linear-gradient(135deg, var(--sector-color, rgba(139,92,246,0.4)) 0%, rgba(6,182,212,0.2) 50%, transparent 100%);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
opacity: 0.55;
}
.sector-card > * { position: relative; z-index: 1; }
.sector-card:hover {
transform: translateY(-4px);
box-shadow: 0 22px 48px -18px rgba(0,0,0,0.45), 0 0 60px -22px var(--sector-color, rgba(139,92,246,0.22));
}
.sector-card .sector-content { display: flex; flex-direction: column; gap: 18px; }
.sector-card .sector-eyebrow {
font-family: 'Geist Mono', monospace;
font-size: 11px;
color: var(--sector-color, var(--accent-violet));
text-transform: uppercase;
letter-spacing: 1.5px;
margin-bottom: -4px;
}
.sector-card h3 {
font-size: clamp(22px, 2.5vw, 30px);
font-weight: 600;
letter-spacing: -0.025em;
line-height: 1.15;
margin: 0;
text-wrap: balance;
}
.sector-card .sector-sub {
font-size: 15px;
color: var(--text-soft);
line-height: 1.55;
margin: 0;
}
.sector-card .sector-para {
font-size: 14px;
color: rgba(228,236,242,0.45);
line-height: 1.7;
margin: 6px 0 4px;
}
.sector-features {
list-style: none;
padding: 0;
margin: 6px 0 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.sector-features li {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 14px;
color: var(--text-soft);
line-height: 1.45;
}
.sector-features li::before {
content: '';
width: 16px;
height: 16px;
flex-shrink: 0;
background: var(--sector-color, var(--accent-violet));
-webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
margin-top: 2px;
}
/* CTA de cada tarjeta de sector: boton claro + toda la tarjeta clicable */
.sector-cta {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 9px;
align-self: flex-start;
margin-top: 8px;
padding: 13px 24px;
font-family: 'Geist', sans-serif;
font-size: 16px;
font-weight: 600;
line-height: 1.4;
letter-spacing: -0.01em;
color: var(--text-strong);
background: rgba(255,255,255,0.05);
border: 1px solid var(--sector-color, rgba(139,92,246,0.45));
border-radius: 12px;
text-decoration: none;
cursor: pointer;
transition: background 0.2s var(--ease-premium), border-color 0.2s var(--ease-premium), box-shadow 0.2s var(--ease-premium);
}
.sector-cta::after {
content: '';
position: absolute;
inset: 0;
z-index: 2;
border-radius: 24px;
}
.sector-card:hover .sector-cta {
background: var(--sector-color, rgba(139,92,246,0.2));
border-color: var(--sector-color, rgba(139,92,246,0.65));
box-shadow: 0 8px 26px -10px var(--sector-color, rgba(139,92,246,0.5));
}
/* Sector workflow visual */
.sector-workflow {
position: relative;
overflow: hidden;
background: linear-gradient(180deg, rgba(13,13,16,0.55) 0%, rgba(10,10,12,0.7) 100%);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 18px;
padding: 28px 24px;
display: flex;
flex-direction: column;
gap: 18px;
}
.sector-workflow::before {
content: '';
position: absolute;
inset: -40%;
background-image: radial-gradient(circle, var(--sector-color, rgba(139,92,246,0.5)) 1.6px, transparent 2.2px);
background-size: 32px 32px;
opacity: 0.35;
animation: sectorDotsFloat 28s linear infinite;
pointer-events: none;
z-index: 0;
will-change: transform;
}
.sector-workflow::after {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse at center, transparent 30%, rgba(10,10,12,0.65) 100%);
pointer-events: none;
z-index: 0;
}
.sector-workflow > * { position: relative; z-index: 1; }
@keyframes sectorDotsFloat {
0% { transform: translate(0, 0); }
50% { transform: translate(16px, 16px); }
100% { transform: translate(0, 0); }
}
.sector-workflow-label {
font-family: 'Geist Mono', monospace;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 1.5px;
color: var(--text-mute);
text-align: center;
margin-bottom: 4px;
}
.workflow-row {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
flex-wrap: wrap;
}
.workflow-step {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 12px;
transition: all 0.3s var(--ease-premium);
}
.workflow-step:hover {
background: rgba(255,255,255,0.07);
border-color: var(--sector-color, rgba(139,92,246,0.3));
}
.workflow-step img {
width: 22px;
height: 22px;
flex-shrink: 0;
}
.workflow-step span {
font-size: 12px;
color: var(--text-soft);
font-weight: 500;
white-space: nowrap;
}
.workflow-arrow {
color: var(--sector-color, var(--accent-violet));
font-size: 18px;
flex-shrink: 0;
opacity: 0.7;
animation: wf-arrow-flow 1.8s ease-in-out infinite;
font-weight: 700;
}
.workflow-arrow:nth-of-type(2) { animation-delay: 0.3s; }
.workflow-arrow:nth-of-type(3) { animation-delay: 0.6s; }
@keyframes wf-arrow-flow {
0%, 100% { opacity: 0.4; transform: translateX(0); }
50% { opacity: 1; transform: translateX(4px); }
}
.workflow-row { position: relative; }
.workflow-step {
position: relative;
animation: wf-step-fade 3s ease-in-out infinite;
}
@keyframes wf-step-fade {
0%, 90%, 100% { box-shadow: 0 0 0 0 rgba(139,92,246,0); }
45%, 55% { box-shadow: 0 0 0 3px rgba(139,92,246,0.18); }
}
.workflow-zerolagia {
animation: wf-hub-glow 2.6s ease-in-out infinite;
}
@keyframes wf-hub-glow {
0%, 100% { box-shadow: 0 0 24px -10px rgba(139,92,246,0.4); border-color: rgba(139,92,246,0.4); }
50% { box-shadow: 0 0 48px -10px rgba(139,92,246,0.75), 0 0 80px -20px rgba(6,182,212,0.35); border-color: rgba(139,92,246,0.7); }
}
.workflow-zerolagia {
background: linear-gradient(135deg, rgba(139,92,246,0.18) 0%, rgba(6,182,212,0.12) 100%);
border: 1px solid rgba(139,92,246,0.4);
padding: 12px 18px;
border-radius: 14px;
text-align: center;
position: relative;
margin: 4px auto;
}
.workflow-zerolagia-label {
font-family: 'Geist Mono', monospace;
font-size: 9px;
letter-spacing: 1.5px;
color: rgba(228,236,242,0.55);
text-transform: uppercase;
}
.workflow-zerolagia-name {
font-family: 'Geist', sans-serif;
font-size: 14px;
font-weight: 700;
background: linear-gradient(135deg, #FAFAFA 0%, #8B5CF6 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
margin-top: 2px;
}
/* === SECTORES MOBILE === */
@media (max-width: 880px) {
.sectors-section { padding: 70px 16px; }
.sector-card {
grid-template-columns: 1fr;
gap: 28px;
padding: 32px 24px;
}
.sector-workflow { padding: 22px 16px; }
.workflow-step { padding: 8px 10px; }
.workflow-step span { font-size: 11px; }
}
/* === ECO ANCHOR con logos reales === */
.eco-node { position: relative; z-index: 3; }
.eco-anchor, .eco-anchor-logo { position: relative; z-index: 3; background: #0d0d12 !important; }
.eco-hub { position: relative; z-index: 3; background: var(--bg-zinc); border-radius: 12px; padding: 4px; }
.eco-anchor-logo { padding: 6px !important; background: #0d0d12 !important; border: 1px solid rgba(255,255,255,0.08) !important; display: flex !important; align-items: center !important; justify-content: center !important; transition: all 0.3s var(--ease-premium) !important; }
.eco-anchor-logo img { width: 70% !important; height: 70% !important; min-width: 22px; min-height: 22px; object-fit: contain; transition: filter 0.3s ease; background: #ffffff; border-radius: 4px; padding: 2px; }
/* Pill background blanco para logos monocromáticos oscuros (Notion, Typeform, Pipedrive, X, etc.) */
.mega-logo img[src*="/000000"],
.eco-anchor img[src*="/000000"],
.eco-anchor-logo img[src*="/000000"],
.sector-card .eco-anchor img[src*="/000000"],
.mega-logo img[src*="/FFFFFF"],
.eco-anchor img[src*="/FFFFFF"],
.eco-anchor-logo img[src*="/FFFFFF"],
.sector-card .eco-anchor img[src*="/FFFFFF"],
.mega-stack-row img[src*="/000000"],
.mega-stack-row img[src*="/FFFFFF"] {
background: #ffffff !important;
border-radius: 5px !important;
padding: 3px !important;
filter: none !important;
}
.eco-anchor-logo:hover { background: rgba(255,255,255,0.08) !important; border-color: rgba(139,92,246,0.4) !important; transform: scale(1.08); }
.eco-anchor-logo:hover img { filter: grayscale(0) brightness(1.2); }
/* === MEGA WORKFLOW ZEROLAGIA === */
.mega-section {
padding: 100px 24px;
position: relative;
overflow: hidden;
}
.mega-header { max-width: 720px; margin: 0 auto 70px; text-align: center; }
.mega-grid {
max-width: 1100px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 200px 1fr;
gap: 0;
align-items: stretch;
position: relative;
}
.mega-svg-bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1;
overflow: visible;
}
.mega-logo, .mega-hub { position: relative; z-index: 2; }
.mega-col {
display: flex;
flex-direction: column;
gap: 12px;
padding: 20px 0;
}
.mega-col-in { align-items: flex-start; }
.mega-col-out { align-items: flex-end; }
.mega-col-label {
font-family: 'Geist Mono', monospace;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 2px;
color: var(--text-mute);
margin-bottom: 8px;
padding: 0 18px;
}
.mega-logo {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 18px;
background: rgba(28,28,32,0.72);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 12px;
width: 100%;
max-width: 240px;
transition: all 0.3s var(--ease-premium);
position: relative;
}
.mega-col-out .mega-logo { flex-direction: row-reverse; text-align: right; }
.mega-logo:hover {
background: rgba(28,28,32,0.95);
border-color: rgba(139,92,246,0.4);
transform: translateX(4px);
box-shadow: 0 8px 24px -8px rgba(139,92,246,0.3);
}
.mega-col-out .mega-logo:hover { transform: translateX(-4px); }
.mega-logo img {
width: 26px; height: 26px;
flex-shrink: 0;
filter: grayscale(0.2) brightness(1.1);
transition: filter 0.3s ease;
}
.mega-logo:hover img { filter: grayscale(0) brightness(1.2); }
.mega-logo span {
font-size: 14px;
font-weight: 600;
color: var(--text-strong);
letter-spacing: -0.01em;
}
.mega-hub {
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.mega-connections {
position: absolute;
top: 0; bottom: 0; left: 0;
width: 50%;
height: 100%;
pointer-events: none;
}
.mega-connections-r { left: 50%; }
.mega-line {
stroke-dasharray: 8 6;
stroke-linecap: round;
animation: mega-flow 2.2s linear infinite;
}
.mega-line:nth-child(2) { animation-delay: 0.3s; }
.mega-line:nth-child(3) { animation-delay: 0.6s; }
.mega-line:nth-child(4) { animation-delay: 0.9s; }
.mega-line:nth-child(5) { animation-delay: 1.2s; }
.mega-line:nth-child(6) { animation-delay: 1.5s; }
@keyframes mega-flow {
0% { stroke-dashoffset: 28; opacity: 0.3; }
50% { opacity: 1; }
100% { stroke-dashoffset: -28; opacity: 0.3; }
}
.mega-core {
position: relative;
width: 160px;
height: 160px;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
}
.mega-core-ring,
.mega-core-ring-2 { display: none; }
.mega-core-inner {
position: relative;
width: 140px;
height: 140px;
background: rgba(20,20,22,0.65);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(200,212,224,0.18);
border-radius: 50%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
box-shadow:
0 0 0 1px rgba(255,255,255,0.04) inset,
0 12px 40px -8px rgba(0,0,0,0.6);
}
.mega-core-name {
font-family: 'Bruno Ace SC', 'Geist', sans-serif;
font-weight: 400;
font-size: 10px;
letter-spacing: 0.8px;
color: var(--text-strong);
margin-top: 6px;
white-space: nowrap;
}
.mega-core-tag {
font-family: 'Geist Mono', monospace;
font-size: 10px;
letter-spacing: 1.5px;
color: rgba(228,236,242,0.65);
text-transform: uppercase;
}
/* Stack row bottom */
.mega-stack {
max-width: 1000px;
margin: 60px auto 0;
text-align: center;
padding: 32px 28px;
background: rgba(255,255,255,0.045);
border: 1px solid rgba(255,255,255,0.12);
border-radius: 16px;
box-shadow: 0 4px 24px rgba(0,0,0,0.25) inset;
}
.mega-stack-label {
font-family: 'Geist Mono', monospace;
font-size: 11px;
letter-spacing: 1.5px;
text-transform: uppercase;
color: rgba(228,236,242,0.75);
margin-bottom: 22px;
}
.mega-stack-row {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 26px;
align-items: center;
}
.mega-stack-row img {
width: 30px;
height: 30px;
opacity: 1;
filter: brightness(1.1);
transition: all 0.25s ease;
cursor: default;
}
.mega-stack-row img:hover {
filter: brightness(1.25);
transform: scale(1.15);
}
/* Movil: mismo workflow que en escritorio, a escala (logos -> Zerolagia -> logos, con lineas) */
@media (max-width: 880px) {
.mega-section { padding: 60px 14px; }
.mega-header { margin-bottom: 34px; }
.mega-grid { grid-template-columns: 1fr 90px 1fr; max-width: 460px; gap: 0; }
.mega-col { padding: 6px 0; gap: 9px; justify-content: center; }
.mega-col-in { align-items: stretch; padding-right: 34px; }
.mega-col-out { align-items: stretch; padding-left: 34px; }
.mega-logo, .mega-col-out .mega-logo {
width: 100%; max-width: none; min-width: 0; gap: 7px; padding: 8px 9px;
}
.mega-col-out .mega-logo { flex-direction: row-reverse; text-align: right; }
.mega-logo img { width: 17px; height: 17px; }
.mega-logo span { font-size: 11px; white-space: normal; overflow-wrap: anywhere; line-height: 1.2; }
.mega-logo:hover { transform: none; }
.mega-col-out .mega-logo:hover { transform: none; }
.mega-hub { padding: 0; }
.mega-core { width: 88px; height: 88px; }
.mega-core-inner { width: 82px; height: 82px; gap: 2px; }
.mega-core-inner svg { width: 36px; height: 36px; }
.mega-core-name { font-size: 8px; margin-top: 3px; }
.mega-stack { padding: 18px 14px; margin-top: 34px; }
.mega-stack-row { gap: 14px; }
.mega-stack-row img { width: 22px; height: 22px; }
}
/* Quitar restricción ancho proc-col original */
#proceso .wrap { max-width: 1280px; margin: 0 auto; padding: 0 24px; }
#proceso .proc-col { max-width: none !important; width: 100%; }
#proceso .sh { text-align: center; max-width: 720px; margin: 0 auto; }
#proceso .sh p { max-width: 640px; margin: 0 auto !important; }
/* === Proceso grid cards interactivas === */
.proc-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 14px;
max-width: 1240px;
margin: 50px auto 0;
}
.proc-card {
position: relative;
background: linear-gradient(180deg, rgba(28,28,32,0.7) 0%, rgba(20,20,24,0.55) 100%);
backdrop-filter: blur(18px) saturate(180%);
-webkit-backdrop-filter: blur(18px) saturate(180%);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 18px;
padding: 30px 26px;
overflow: hidden;
transition: all 0.4s var(--ease-premium);
cursor: default;
}
.proc-card::before {
content: '';
position: absolute;
inset: 0;
border-radius: 18px;
padding: 1px;
background: linear-gradient(135deg, rgba(139,92,246,0.5) 0%, rgba(6,182,212,0.2) 60%, transparent 100%);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: 0;
transition: opacity 0.4s var(--ease-premium);
pointer-events: none;
}
.proc-card:hover::before { opacity: 1; }
.proc-card:hover {
transform: translateY(-6px);
background: linear-gradient(180deg, rgba(32,32,38,0.85) 0%, rgba(22,22,26,0.7) 100%);
box-shadow: 0 25px 50px -15px rgba(0,0,0,0.5), 0 0 80px -20px rgba(139,92,246,0.35);
}
.proc-num-bg {
position: absolute;
top: 8px;
right: 18px;
font-family: 'Geist', sans-serif;
font-size: 100px;
font-weight: 700;
line-height: 1;
background: linear-gradient(135deg, rgba(139,92,246,0.18) 0%, rgba(139,92,246,0.04) 70%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
user-select: none;
pointer-events: none;
transition: all 0.4s var(--ease-premium);
}
.proc-card:hover .proc-num-bg {
background: linear-gradient(135deg, rgba(139,92,246,0.45) 0%, rgba(6,182,212,0.18) 70%);
-webkit-background-clip: text;
background-clip: text;
transform: scale(1.08);
}
.proc-card .proc-eyebrow {
display: inline-block;
font-family: 'Geist Mono', monospace;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 1.5px;
color: var(--accent-violet);
background: rgba(139,92,246,0.08);
border: 1px solid rgba(139,92,246,0.22);
padding: 4px 10px;
border-radius: 6px;
margin-bottom: 12px;
position: relative;
z-index: 2;
}
.proc-card h3 {
font-family: 'Geist', sans-serif;
font-size: 19px;
font-weight: 600;
letter-spacing: -0.02em;
line-height: 1.25;
margin: 4px 0 10px;
position: relative;
z-index: 2;
}
.proc-card p {
font-size: 14px;
color: var(--text-soft);
line-height: 1.62;
margin: 0;
position: relative;
z-index: 2;
}
.proc-card { padding: 26px 22px; }
.proc-card h3 { font-size: 17px; }
.proc-card p { font-size: 13px; }
.proc-num-bg { font-size: 80px; }
@media (max-width: 1100px) {
.proc-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
.proc-card { padding: 28px 24px; }
.proc-card h3 { font-size: 18px; }
.proc-card p { font-size: 14px; }
.proc-num-bg { font-size: 90px; }
}
@media (max-width: 760px) {
.proc-grid { grid-template-columns: repeat(2, 1fr); }
.proc-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
.proc-grid { grid-template-columns: 1fr; }
.proc-card:last-child:nth-child(odd) { grid-column: auto; }
.proc-num-bg { font-size: 60px !important; }
}
/* Proceso enriquecido */
.proc-step h3 { font-family: 'Geist', sans-serif; font-size: clamp(18px, 2.2vw, 22px); font-weight: 600; letter-spacing: -0.02em; margin: 6px 0 8px; }
.proc-step p { font-size: 14px; line-height: 1.65; color: var(--text-soft); margin-bottom: 10px; }
.proc-eyebrow {
display: inline-block;
font-family: 'Geist Mono', monospace;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 1.5px;
color: var(--accent-violet);
background: rgba(139,92,246,0.08);
border: 1px solid rgba(139,92,246,0.25);
padding: 4px 10px;
border-radius: 6px;
margin-bottom: 4px;
}
.proc-data {
font-family: 'Geist Mono', monospace;
font-size: 12px;
color: rgba(228,236,242,0.45);
padding: 8px 12px;
background: rgba(255,255,255,0.02);
border-left: 2px solid var(--accent-violet);
border-radius: 4px;
margin-top: 12px;
line-height: 1.5;
}
.proc-num {
font-family: 'Geist', sans-serif;
font-weight: 700;
background: linear-gradient(135deg, var(--accent-violet) 0%, var(--accent-cyan) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* Section integrations */
.integ-section {
padding: 80px 24px;
background: transparent;
position: relative;
overflow: hidden;
}
.integ-wrap { max-width: 1100px; margin: 0 auto; text-align: center; }
.integ-eyebrow {
font-family: 'Geist Mono', monospace;
font-size: 11px;
color: var(--text-mute);
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: 16px;
}
.integ-title {
font-size: clamp(28px, 4vw, 42px);
font-weight: 600;
letter-spacing: -0.03em;
margin-bottom: 14px;
}
.integ-sub {
font-size: 16px;
color: var(--text-soft);
max-width: 540px;
margin: 0 auto 50px;
line-height: 1.6;
}
.integ-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 16px;
max-width: 900px;
margin: 0 auto;
}
.integ-logo {
background: rgba(255,255,255,0.02);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 14px;
padding: 28px 16px;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
transition: all 0.3s var(--ease-premium);
}
.integ-logo:hover {
background: rgba(255,255,255,0.05);
border-color: rgba(255,255,255,0.12);
transform: translateY(-3px);
}
.integ-logo img {
width: 36px;
height: 36px;
filter: grayscale(0.3) brightness(1.1);
transition: filter 0.3s ease;
}
.integ-logo:hover img { filter: grayscale(0) brightness(1.2); }
.integ-logo span {
font-size: 11px;
color: var(--text-mute);
font-family: 'Geist Mono', monospace;
}
/* Section metrics */
.metrics-section {
padding: 90px 24px;
background: linear-gradient(180deg, var(--bg-zinc) 0%, var(--bg-zinc-2) 50%, var(--bg-zinc) 100%);
position: relative;
}
.metrics-wrap {
max-width: 1100px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 24px;
}
.metric-card {
background: rgba(255,255,255,0.02);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 16px;
padding: 36px 28px;
text-align: left;
position: relative;
overflow: hidden;
transition: all 0.3s var(--ease-premium);
}
.metric-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; height: 1px;
background: linear-gradient(90deg, transparent, var(--accent-violet), transparent);
opacity: 0.5;
}
.metric-card:hover {
background: rgba(255,255,255,0.04);
transform: translateY(-3px);
}
.metric-num {
font-family: 'Geist', sans-serif;
font-size: clamp(40px, 5vw, 56px);
font-weight: 600;
letter-spacing: -0.04em;
background: linear-gradient(135deg, var(--text-strong) 0%, var(--accent-cyan) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
line-height: 1;
}
.metric-label {
font-size: 13px;
color: var(--text-mute);
margin-top: 12px;
font-family: 'Geist Mono', monospace;
text-transform: uppercase;
letter-spacing: 1px;
}
.metric-desc {
font-size: 14px;
color: var(--text-soft);
margin-top: 14px;
line-height: 1.55;
}
/* SVG Dashboard Mockup */
.dashboard-mockup {
max-width: 720px;
width: 100%;
margin: 40px auto 20px;
display: block;
}
.dashboard-mockup .node {
animation: node-pulse 2.4s ease-in-out infinite;
}
.dashboard-mockup .node:nth-child(2) { animation-delay: 0.4s; }
.dashboard-mockup .node:nth-child(3) { animation-delay: 0.8s; }
.dashboard-mockup .node:nth-child(4) { animation-delay: 1.2s; }
@keyframes node-pulse {
0%, 100% { transform: scale(1); filter: drop-shadow(0 0 6px currentColor); }
50% { transform: scale(1.15); filter: drop-shadow(0 0 16px currentColor); }
}
.dashboard-mockup .flow-line {
stroke-dasharray: 6 4;
animation: flow-dash 1.8s linear infinite;
}
@keyframes flow-dash {
to { stroke-dashoffset: -20; }
}
/* Scroll-driven reveal */
@supports (animation-timeline: view()) {
.reveal-up {
animation: reveal-fade linear both;
animation-timeline: view();
animation-range: entry 0% cover 30%;
}
}
@keyframes reveal-fade {
from { opacity: 0; transform: translateY(40px); }
to { opacity: 1; transform: translateY(0); }
}
/* Fallback animation IntersectionObserver-style */
.fade-in { opacity: 0; transform: translateY(30px); transition: all 0.7s var(--ease-premium); }
.fade-in.in { opacity: 1; transform: translateY(0); }
/* Cursor follow dot (opcional, JS) */
.cursor-dot {
position: fixed;
width: 8px;
height: 8px;
background: var(--accent-violet);
border-radius: 50%;
pointer-events: none;
z-index: 9999;
mix-blend-mode: difference;
transition: transform 0.18s var(--ease-premium);
display: none;
}
@media (hover: hover) and (pointer: fine) {
.cursor-dot { display: block; }
}
/* CSS del nav ANTIGUO eliminado: todas las páginas usan el header cápsula nuevo
(estilos inline en cada página + assets/css/nav.css). Las reglas .nav viejas
con !important contaminaban el nav nuevo en todas las páginas. */
/* Lang switch refinado */
.lang-sw { display: flex; gap: 2px; padding: 3px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06); border-radius: 8px; }
.lang-btn { padding: 4px 9px !important; font-size: 11px !important; border-radius: 6px !important; }
.lang-btn.active { background: var(--accent, #c8d4e0) !important; color: #111113 !important; }
/* Disable hero canvas (replaced by aurora) */
#hero-nodes { display: none; }
/* Sections — background transparente para que se vea aurora global */
.sec, .sec-alt, .integ-section, .metrics-section, .hero {
background: transparent !important;
}
/* Sutiles separadores con borders */
.sec, .sec-alt {
border-top: 1px solid rgba(255,255,255,0.04);
}
.sec-alt {
background: rgba(255,255,255,0.015) !important;
}
/* Reduce padding hero scanner */
.hero#inicio { padding: 100px 20px 60px !important; }
/* Scanner card on hero — más prominente */
.hero#inicio .tools-wrap { max-width: 740px; }
/* Typography hero better */
.hero h1 { font-weight: 600; letter-spacing: -0.035em; }
.hero-desc { color: var(--text-soft); font-weight: 400; line-height: 1.65; }
/* === MOBILE-FIRST RESPONSIVE === */
@media (max-width: 1024px) {
.integ-grid { grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); }
}
@media (max-width: 768px) {
.hero { padding: 90px 16px 40px !important; }
.hero h1 { font-size: clamp(28px, 7vw, 40px) !important; letter-spacing: -0.025em; }
.hero-desc { font-size: 15px; padding: 0 8px; }
.hero::before { filter: blur(60px); opacity: 0.32; }
.badge { font-size: 11px; padding: 6px 14px; }
.dashboard-mockup { margin: 24px auto 8px; max-width: 100%; }
.tool-card { padding: 28px 22px !important; border-radius: 16px; }
.tool-card h3 { font-size: 22px; }
.tool-card .tool-sub { font-size: 14px; margin-bottom: 22px; }
.sc-input { padding: 16px 18px; font-size: 16px !important; }
.sc-btn { padding: 16px 24px; font-size: 15px; }
.integ-section { padding: 60px 16px; }
.integ-title { font-size: clamp(24px, 6vw, 32px); }
.integ-sub { font-size: 14px; margin-bottom: 36px; }
.integ-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
.integ-logo { padding: 16px 6px; gap: 6px; }
.integ-logo img { width: 26px; height: 26px; }
.integ-logo span { font-size: 9px; letter-spacing: 0.3px; }
.metrics-section { padding: 60px 16px; }
.metrics-wrap { grid-template-columns: 1fr; gap: 14px; }
.metric-card { padding: 26px 22px; }
.metric-num { font-size: 40px; }
.metric-desc { font-size: 13px; }
.hero#presentacion { padding: 50px 20px !important; }
.hero#presentacion h1 { font-size: clamp(26px, 6.5vw, 38px) !important; }
/* Tocar targets mínimo 44px móvil */
.sc-noweb-btn, .sc-reset, .nav-links a { min-height: 44px; display: inline-flex; align-items: center; }
.lang-btn { min-height: 44px; padding: 10px 14px !important; display: inline-flex; align-items: center; justify-content: center; }
.ck-btn { min-height: 44px; padding: 12px 18px !important; }
.sc-nw-opt { min-height: 56px; font-size: 13px; }
.sc-nw-next { min-height: 48px; position: sticky; bottom: 0; background: var(--surface, #18181b); margin-top: 16px; }
.field input, .field textarea { font-size: 16px !important; }
.sc-nw-modal { z-index: 1001 !important; }
.sc-nw-overlay { z-index: 1000 !important; }
}
@media (max-width: 480px) {
.hero { padding: 80px 14px 30px !important; }
.hero h1 { font-size: clamp(26px, 8vw, 34px) !important; line-height: 1.15; }
.tool-card { padding: 22px 18px !important; }
.sc-quickstats { gap: 6px; }
.sc-qs-item { padding: 6px 10px; font-size: 11px; }
.sc-finding { padding: 10px 12px; }
.sc-finding-title { font-size: 13px; }
.sc-finding-desc { font-size: 12px; }
.integ-grid { grid-template-columns: repeat(2, 1fr); }
.metric-num { font-size: 36px; }
.metric-card { padding: 24px 20px; }
}
/* Touch device specific */
@media (hover: none) and (pointer: coarse) {
.tool-card:hover { transform: none; }
.metric-card:hover { transform: none; }
.integ-logo:hover { transform: none; }
/* Disable cursor follow on touch */
.cursor-dot { display: none !important; }
}
/* Reduced-motion reset ELIMINADO a petición del cliente: el sitio debe animar
siempre (fades, hovers, navbar...) sin importar la preferencia del sistema. */