/* ═══════════════════════════════════════════════
NODUX Landing v3 — Polished, compact, animated
═══════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* ─── Dark theme ──────────────────────────── */
[data-theme="dark"] {
--bg: #070d1a;
--bg-alt: #0b1120;
--bg-card: rgba(255,255,255,0.04);
--bg-card-hover: rgba(255,255,255,0.07);
--border: rgba(255,255,255,0.08);
--border-hover: rgba(255,255,255,0.15);
--text: #d4d4d8;
--text-heading: #f4f4f5;
--text-muted: #7c7c84;
--text-faint: #4a4a50;
--glass: rgba(255,255,255,0.03);
--glass-border: rgba(255,255,255,0.06);
--nav-bg: rgba(7,13,26,0.88);
--shadow-card: 0 2px 16px rgba(0,0,0,0.2);
--contrast-fail-bg: rgba(239,68,68,0.05);
--contrast-fail-border: rgba(239,68,68,0.12);
--contrast-win-bg: rgba(46,212,122,0.05);
--contrast-win-border: rgba(46,212,122,0.15);
color-scheme: dark;
}
/* ─── Light theme ─────────────────────────── */
[data-theme="light"] {
--bg: #f7f8fb;
--bg-alt: #eef0f5;
--bg-card: rgba(255,255,255,0.7);
--bg-card-hover: rgba(255,255,255,0.95);
--border: rgba(0,0,0,0.07);
--border-hover: rgba(0,0,0,0.14);
--text: #2a2a3a;
--text-heading: #0a0a1a;
--text-muted: #5a5a6a;
--text-faint: #9a9aa0;
--glass: rgba(255,255,255,0.55);
--glass-border: rgba(0,0,0,0.06);
--nav-bg: rgba(247,248,251,0.9);
--shadow-card: 0 2px 16px rgba(0,0,0,0.06);
--contrast-fail-bg: rgba(239,68,68,0.05);
--contrast-fail-border: rgba(239,68,68,0.18);
--contrast-win-bg: rgba(46,212,122,0.05);
--contrast-win-border: rgba(46,212,122,0.2);
color-scheme: light;
}
:root {
--accent: #1769FF;
--accent-2: #2ED47A;
--accent-3: #FF6B35;
--gradient: linear-gradient(135deg, #1769FF, #2ED47A, #FF6B35);
--radius: 12px;
--radius-lg: 18px;
--font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}
html {
scroll-behavior: smooth;
-webkit-font-smoothing: antialiased;
/* overflow-x:hidden en html (no solo body) evita el "se corre a la
derecha" en mobile cuando el browser hace scrollIntoView por focus
en un botón cercano al edge del viewport. Sin esto, body:overflow-x:hidden
no es suficiente en algunos Chrome/Safari mobile.
max-width:100% como defensa adicional contra anchos calculados
que excedan el viewport (vw, %, etc). */
overflow-x: hidden;
max-width: 100%;
}
body {
font-family: var(--font);
background: var(--bg);
color: var(--text);
line-height: 1.6;
overflow-x: hidden;
max-width: 100%;
position: relative;
transition: background 0.35s, color 0.35s;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
.container { max-width: 1100px; margin: 0 auto; padding: 0 1.25rem; }
.container-sm { max-width: 720px; }
.glass {
background: var(--glass);
border: 1px solid var(--glass-border);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.gradient-text {
background: var(--gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* ─── Buttons ─────────────────────────────── */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
padding: 0.6rem 1.3rem; border-radius: 8px;
font-family: var(--font); font-size: 0.88rem; font-weight: 600;
cursor: pointer; transition: all 0.2s; border: 1px solid transparent; white-space: nowrap;
}
.btn-sm { padding: 0.45rem 1rem; font-size: 0.82rem; }
.btn-primary { background: var(--accent); color: #070d1a; border-color: var(--accent); }
.btn-primary:hover { background: #5BA0FF; box-shadow: 0 0 24px rgba(59,139,246,0.25); }
.btn-outline { background: transparent; color: var(--text); border-color: var(--border-hover); }
.btn-outline:hover { border-color: var(--accent); color: var(--accent); }
.btn-ghost { background: transparent; color: var(--text); border: 1px solid var(--border); padding: 0.5rem 0.95rem; font-weight: 600; }
.btn-ghost:hover { color: var(--accent); border-color: var(--accent); }
.btn-lg { padding: 0.8rem 1.8rem; font-size: 0.95rem; border-radius: 10px; }
.btn-block { width: 100%; }
/* App glow button (Ugly Cash style) */
.btn-app-glow {
display: inline-flex; align-items: center; gap: 0.4rem;
padding: 0.45rem 1rem; border-radius: 10px;
background: #111; color: #fff;
border: 1px solid rgba(59,139,246,0.4);
box-shadow: 0 0 12px rgba(59,139,246,0.3), inset 0 0 8px rgba(59,139,246,0.1);
font-family: var(--font); font-size: 0.82rem; font-weight: 700;
cursor: pointer; transition: all 0.25s; white-space: nowrap;
animation: glow-pulse 2.5s ease-in-out infinite;
}
.btn-app-glow img { border-radius: 4px; }
.btn-app-glow:hover {
box-shadow: 0 0 20px rgba(59,139,246,0.5), inset 0 0 12px rgba(59,139,246,0.15);
border-color: rgba(59,139,246,0.7);
}
[data-theme="light"] .btn-app-glow {
background: #fff; color: #111;
border-color: rgba(59,139,246,0.3);
box-shadow: 0 0 12px rgba(59,139,246,0.2), inset 0 0 6px rgba(59,139,246,0.05);
}
@keyframes glow-pulse {
0%, 100% { box-shadow: 0 0 12px rgba(59,139,246,0.3), inset 0 0 8px rgba(59,139,246,0.1); }
50% { box-shadow: 0 0 22px rgba(59,139,246,0.5), inset 0 0 12px rgba(59,139,246,0.15); }
}
/* ═══════ THEME TOGGLE ══════════════════════ */
.theme-toggle {
display: inline-flex; align-items: center; justify-content: center;
width: 34px; height: 34px; border-radius: 8px;
border: 1px solid var(--border); background: transparent;
color: var(--text-muted); cursor: pointer; transition: all 0.2s; flex-shrink: 0;
}
.theme-toggle:hover { color: var(--accent); border-color: var(--accent); }
[data-theme="dark"] .icon-sun { display: block; }
[data-theme="dark"] .icon-moon { display: none; }
[data-theme="light"] .icon-sun { display: none; }
[data-theme="light"] .icon-moon { display: block; }
/* ═══════ NAV — compact ═════════════════════ */
.nav {
position: fixed; top: 0; left: 0; right: 0; z-index: 100;
padding: 0.85rem 0;
transition: background 0.3s, border-color 0.3s, box-shadow 0.3s;
background: var(--nav-bg);
backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
border-bottom: 1px solid var(--border);
}
.nav.scrolled {
border-bottom-color: var(--border-hover);
box-shadow: 0 4px 24px rgba(0,0,0,0.08);
}
.nav-inner {
max-width: 1100px; margin: 0 auto; padding: 0 1.25rem;
display: flex; align-items: center; gap: 1.8rem;
}
.nav-logo { display: flex; align-items: center; }
.nav-logo-img { height: 36px; width: auto; }
[data-theme="dark"] .logo-light { display: none !important; }
[data-theme="dark"] .logo-dark { display: block !important; }
[data-theme="light"] .logo-dark { display: none !important; }
[data-theme="light"] .logo-light { display: block !important; }
.nav-links { display: flex; gap: 1.6rem; flex: 1; }
.nav-links a { font-size: 0.92rem; font-weight: 600; color: var(--text); transition: color 0.2s; position: relative; }
.nav-links a::after {
content: ''; position: absolute; left: 0; right: 0; bottom: -6px;
height: 2px; background: var(--gradient); border-radius: 2px;
transform: scaleX(0); transform-origin: left; transition: transform 0.25s;
}
.nav-links a:hover { color: var(--accent); }
.nav-links a:hover::after { transform: scaleX(1); }
.nav-actions { display: flex; gap: 0.4rem; align-items: center; }
.nav-burger {
display: none; flex-direction: column; gap: 4px;
background: none; border: none; cursor: pointer; padding: 4px;
}
.nav-burger span { display: block; width: 20px; height: 2px; background: var(--text); border-radius: 2px; transition: all 0.3s; }
/* ═══════ HERO ══════════════════════════════ */
.hero {
position: relative; padding: 8rem 0 4rem; overflow: hidden;
min-height: 85vh; display: flex; align-items: center;
}
.hero-canvas {
position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0;
}
.hero-glow {
position: absolute; top: -150px; left: 50%; transform: translateX(-50%);
width: 700px; height: 500px;
background: radial-gradient(ellipse, rgba(59,139,246,0.1) 0%, rgba(46,212,122,0.05) 40%, transparent 70%);
pointer-events: none; z-index: 1;
}
[data-theme="light"] .hero-glow { opacity: 0.4; }
/* — Hero gradient mesh estatica —
4 blobs gigantes con radial-gradient + filter:blur que crean
"spatial depth" sin animation. A diferencia del network canvas
y el glow pulsante, ESTOS NO se suprimen con prefers-reduced-motion
porque no animan, solo aportan color/profundidad estatica.
Pattern: Stripe/Vercel/Linear gradient meshes. */
.hero-mesh {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 1;
overflow: hidden;
/* mask de borde — fade hacia abajo para que el mesh no compita
con el contenido de la siguiente seccion (leak). */
mask-image: linear-gradient(to bottom, #000 70%, transparent);
-webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent);
}
.mesh-blob {
position: absolute;
border-radius: 50%;
filter: blur(80px);
opacity: 0.55;
}
.mesh-blob-1 {
/* Top-left — azul brand */
top: -10%;
left: -10%;
width: 40%;
height: 50%;
background: radial-gradient(circle, rgba(23, 105, 255, 0.55), transparent 70%);
}
.mesh-blob-2 {
/* Top-right — cyan/teal */
top: -5%;
right: -10%;
width: 35%;
height: 45%;
background: radial-gradient(circle, rgba(6, 182, 212, 0.45), transparent 70%);
}
.mesh-blob-3 {
/* Bottom-left — verde brand */
bottom: 0;
left: 5%;
width: 30%;
height: 35%;
background: radial-gradient(circle, rgba(16, 185, 129, 0.30), transparent 70%);
}
.mesh-blob-4 {
/* Center-right — violeta accent */
top: 30%;
right: 15%;
width: 25%;
height: 30%;
background: radial-gradient(circle, rgba(139, 92, 246, 0.30), transparent 70%);
}
/* Light theme: bajamos opacity para que el contenido siga legible
sobre fondo claro. Los blobs siguen aportando depth sutil. */
[data-theme="light"] .hero-mesh { opacity: 0.45; }
[data-theme="light"] .mesh-blob { opacity: 0.7; }
/* En mobile achicamos los blobs y subimos el blur — no queremos que
tomen demasiada pantalla en celulares chicos. */
@media (max-width: 640px) {
.mesh-blob { filter: blur(60px); }
.mesh-blob-1, .mesh-blob-2 { width: 60%; height: 35%; }
.mesh-blob-3, .mesh-blob-4 { width: 50%; height: 30%; }
}
/* — Micro-trust strip debajo de los CTAs del hero —
4 chips con check + dato concreto, separados por dividers verticales.
En mobile colapsa: chips wrappean, dividers se ocultan. */
.hero-trust {
display: flex;
align-items: center;
justify-content: center;
gap: 0.85rem;
flex-wrap: wrap;
margin-top: 1.6rem;
font-size: 0.82rem;
color: var(--text-muted);
}
.trust-item {
display: inline-flex;
align-items: center;
gap: 0.4rem;
white-space: nowrap;
}
.trust-item svg {
color: #10b981;
flex-shrink: 0;
}
.trust-item strong {
color: var(--text-heading);
font-weight: 700;
}
.trust-divider {
width: 3px;
height: 3px;
border-radius: 50%;
background: var(--text-faint, rgba(255,255,255,0.2));
flex-shrink: 0;
}
@media (max-width: 600px) {
.hero-trust {
gap: 0.5rem;
font-size: 0.75rem;
}
/* Dividers se ocultan en mobile — los chips wrappean a 2 lineas
y dividers verticales no aportan ahi. */
.trust-divider { display: none; }
}
.hero-content { position: relative; z-index: 2; text-align: center; max-width: 700px; margin: 0 auto; }
.badge {
display: inline-block; padding: 0.3rem 0.85rem; border-radius: 999px;
font-size: 0.75rem; font-weight: 600; letter-spacing: 0.03em;
background: rgba(59,139,246,0.1); color: var(--accent);
border: 1px solid rgba(59,139,246,0.2); margin-bottom: 1.5rem;
}
.hero-text h1 {
font-size: clamp(1.7rem, 4vw, 2.8rem); font-weight: 800;
line-height: 1.2; letter-spacing: -0.03em; margin-bottom: 1.2rem;
color: var(--text-heading);
}
.hero-sub {
font-size: 1rem; color: var(--text-muted); max-width: 560px;
margin: 0 auto 2rem; line-height: 1.75;
}
.hero-sub strong { color: var(--text-heading); }
.hero-ctas { display: flex; gap: 0.7rem; flex-wrap: wrap; justify-content: center; }
.hero-hint { margin-top: 0.8rem; font-size: 0.78rem; color: var(--text-faint); }
/* ═══════ SECTIONS ══════════════════════════ */
/* Tightened v5: vertical padding reduced (was 5rem → 4rem) and section
head margin reduced (was 3rem → 2rem) to close big gaps between
sections and between heading and content. */
.section { padding: 4rem 0; }
.section-alt { background: var(--bg-alt); }
.section-head { text-align: center; margin-bottom: 2rem; }
.section-tag {
display: inline-block; padding: 0.25rem 0.7rem; border-radius: 999px;
font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em;
background: rgba(59,139,246,0.08); color: var(--accent);
border: 1px solid rgba(59,139,246,0.15); margin-bottom: 0.8rem;
}
.section-head h2 {
font-size: clamp(1.6rem, 3.5vw, 2.4rem); font-weight: 800;
letter-spacing: -0.02em; line-height: 1.2; margin-bottom: 0.7rem;
color: var(--text-heading);
}
.section-head p { font-size: 1rem; color: var(--text-muted); max-width: 540px; margin: 0 auto; line-height: 1.7; }
/* ═══════ PAIN CARDS ════════════════════════ */
.pain-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.pain-card { padding: 1.6rem; border-radius: var(--radius); transition: all 0.3s; }
.pain-card:hover { background: var(--bg-card-hover); border-color: var(--border-hover); transform: translateY(-2px); }
.pain-num { font-size: 0.72rem; font-weight: 800; color: var(--accent); letter-spacing: 0.05em; margin-bottom: 0.6rem; }
.pain-card h3 { font-size: 1rem; font-weight: 700; margin-bottom: 0.4rem; color: var(--text-heading); }
.pain-card p { font-size: 0.88rem; color: var(--text-muted); line-height: 1.65; }
.pain-closing { text-align: center; margin-top: 2rem; font-size: 1.05rem; color: var(--text-muted); }
.pain-closing strong { color: var(--text-heading); }
/* ═══════ CONTRAST ══════════════════════════ */
.contrast-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; max-width: 850px; margin: 0 auto; }
.contrast-card { padding: 1.8rem; border-radius: var(--radius); }
.contrast-fail { background: var(--contrast-fail-bg) !important; border-color: var(--contrast-fail-border) !important; }
.contrast-win { background: var(--contrast-win-bg) !important; border-color: var(--contrast-win-border) !important; }
.contrast-label {
display: inline-block; padding: 0.2rem 0.65rem; border-radius: 999px;
font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
margin-bottom: 1rem; background: rgba(239,68,68,0.1); color: #ef4444;
}
.contrast-label-win { background: rgba(46,212,122,0.1); color: #2ED47A; }
.contrast-card ul { list-style: none; display: flex; flex-direction: column; gap: 0.55rem; }
.contrast-card li { font-size: 0.88rem; color: var(--text-muted); padding-left: 1.3rem; position: relative; line-height: 1.55; }
.contrast-fail li::before, .contrast-win li::before {
content: ''; position: absolute; left: 0; top: 0.5em;
width: 5px; height: 5px; border-radius: 50%;
}
.contrast-fail li::before { background: #ef4444; }
.contrast-win li::before { background: #2ED47A; }
/* ═══════ FEATURES ══════════════════════════ */
.features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.fcard { padding: 1.5rem; border-radius: var(--radius); transition: all 0.3s; }
.fcard:hover { background: var(--bg-card-hover); border-color: var(--border-hover); transform: translateY(-2px); }
.fcard-icon {
display: inline-flex; align-items: center; justify-content: center;
width: 40px; height: 40px; border-radius: 10px;
background: rgba(59,139,246,0.08); color: var(--accent); margin-bottom: 0.8rem;
}
.fcard h3 { font-size: 0.95rem; font-weight: 700; margin-bottom: 0.35rem; color: var(--text-heading); }
.fcard p { font-size: 0.85rem; color: var(--text-muted); line-height: 1.6; }
/* ═══════ STEPS ═════════════════════════════ */
.steps-grid { display: flex; align-items: center; justify-content: center; gap: 1.2rem; }
.step { flex: 1; max-width: 260px; padding: 1.6rem; border-radius: var(--radius); text-align: center; }
.step-num {
display: inline-flex; align-items: center; justify-content: center;
width: 36px; height: 36px; border-radius: 50%;
background: var(--gradient); color: #070d1a; font-weight: 800; font-size: 1rem; margin-bottom: 0.8rem;
}
.step h3 { font-size: 0.95rem; font-weight: 700; margin-bottom: 0.35rem; color: var(--text-heading); }
.step p { font-size: 0.85rem; color: var(--text-muted); line-height: 1.6; }
.step-arrow { flex-shrink: 0; opacity: 0.3; color: var(--text-muted); }
.arrow-stroke { stroke: var(--accent); }
/* ═══════ PRICING ═══════════════════════════ */
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; align-items: stretch; }
.pcard {
position: relative; padding: 1.6rem 1.3rem; border-radius: var(--radius-lg);
transition: all 0.3s; display: flex; flex-direction: column;
}
.pcard:hover { border-color: var(--border-hover); transform: translateY(-2px); }
.pcard-featured { border-color: rgba(59,139,246,0.3) !important; background: rgba(59,139,246,0.03) !important; box-shadow: 0 0 30px rgba(59,139,246,0.06); }
.pcard-badge {
position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
padding: 0.2rem 0.85rem; border-radius: 999px;
background: var(--accent); color: #070d1a; font-size: 0.72rem; font-weight: 700; white-space: nowrap;
}
.pcard-head { margin-bottom: 1rem; }
.pcard-head h3 { font-size: 1.1rem; font-weight: 800; margin-bottom: 0.2rem; color: var(--text-heading); }
.pcard-tagline { font-size: 0.78rem; color: var(--text-muted); line-height: 1.5; }
.pcard-price { margin-bottom: 1.2rem; }
.price-amount { font-size: 2rem; font-weight: 800; letter-spacing: -0.03em; color: var(--text-heading); }
.price-period { font-size: 0.82rem; color: var(--text-muted); margin-left: 0.15rem; }
.pcard-features { list-style: none; display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1.5rem; flex: 1; }
.pcard-features li { font-size: 0.82rem; color: var(--text-muted); padding-left: 1.2rem; position: relative; line-height: 1.5; }
.pcard-features li::before { content: ''; position: absolute; left: 0; top: 0.45em; width: 5px; height: 5px; border-radius: 50%; background: var(--accent-2); }
.pcard-features li.coming { color: var(--text-faint); }
.pcard-features li.coming::before { background: var(--text-faint); }
/* ═══════ EARLY ADOPTERS ════════════════════ */
.early-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 2.5rem; }
.early-card { padding: 1.6rem; border-radius: var(--radius); text-align: center; transition: all 0.3s; }
.early-card:hover { background: var(--bg-card-hover); border-color: var(--border-hover); transform: translateY(-2px); }
.early-icon { font-size: 1.8rem; margin-bottom: 0.8rem; }
.early-card h3 { font-size: 0.95rem; font-weight: 700; margin-bottom: 0.35rem; color: var(--text-heading); }
.early-card p { font-size: 0.85rem; color: var(--text-muted); line-height: 1.6; }
.early-cta { display: flex; gap: 0.7rem; justify-content: center; flex-wrap: wrap; }
/* ═══════ SHOWCASE (screenshots) ════════════ */
.showcase-row {
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 3rem;
align-items: center;
margin-bottom: 2.5rem;
}
.showcase-row:last-child { margin-bottom: 0; }
.showcase-row-reverse { direction: rtl; }
.showcase-row-reverse > * { direction: ltr; }
.showcase-text h3 {
font-size: 1.3rem; font-weight: 800; color: var(--text-heading);
margin-bottom: 0.6rem; line-height: 1.25;
}
.showcase-text p {
font-size: 0.95rem; color: var(--text-muted); line-height: 1.7; margin-bottom: 0.5rem;
}
.showcase-text p strong { color: var(--text-heading); }
.showcase-detail {
font-size: 0.85rem !important; color: var(--text-faint) !important;
border-left: 2px solid var(--accent); padding-left: 0.8rem; margin-top: 0.6rem !important;
}
.showcase-img {
border-radius: var(--radius-lg); overflow: hidden;
border: 1px solid var(--border);
box-shadow: var(--shadow-card);
background: var(--bg-card);
}
.showcase-img img {
width: 100%; height: auto; display: block;
border-radius: var(--radius-lg);
}
.showcase-img-pair {
display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 0.6rem;
background: transparent; border: none; box-shadow: none;
}
.showcase-img-pair img {
border: 1px solid var(--border); box-shadow: var(--shadow-card);
border-radius: var(--radius); object-fit: cover; height: 100%;
}
@media (max-width: 768px) {
.showcase-row, .showcase-row-reverse {
grid-template-columns: 1fr; gap: 1.5rem; direction: ltr;
}
.showcase-row-reverse > * { direction: ltr; }
.showcase-text h3 { font-size: 1.1rem; }
.showcase-img-pair { grid-template-columns: 1fr 1fr; }
}
/* ═══════ HERO TICKER ═══════════════════════ */
.hero-ticker {
margin-top: 1.5rem;
height: 1.6rem;
position: relative;
overflow: hidden;
}
.ticker-item {
position: absolute;
width: 100%;
text-align: center;
font-size: 0.82rem;
font-weight: 500;
color: var(--accent);
opacity: 0;
transform: translateY(12px);
transition: opacity 0.5s, transform 0.5s;
letter-spacing: 0.02em;
}
.ticker-item.active {
opacity: 1;
transform: translateY(0);
}
/* ═══════ PLAN COLLAPSIBLE + TAGS ═══════════ */
.pcard-more { border: none; margin-top: 0.4rem; }
.pcard-more summary {
display: flex; align-items: center; gap: 0.3rem;
font-size: 0.78rem; font-weight: 600; color: var(--accent);
cursor: pointer; list-style: none; padding: 0.3rem 0;
}
.pcard-more summary::-webkit-details-marker { display: none; }
.pcard-more summary svg { transition: transform 0.3s; flex-shrink: 0; }
.pcard-more[open] summary svg { transform: rotate(180deg); }
.pcard-more .pcard-features { margin-top: 0.4rem; }
.tag-beta, .tag-pronto {
display: inline-block; padding: 0.08rem 0.4rem; border-radius: 4px;
font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
vertical-align: middle; margin-right: 0.15rem;
}
.tag-beta { background: rgba(59,139,246,0.15); color: var(--accent); }
.tag-pronto { background: rgba(245,158,11,0.12); color: #f59e0b; }
/* ═══════ PWA GET THE APP ═══════════════════ */
.pwa-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 2rem; }
.pwa-card { padding: 1.5rem; border-radius: var(--radius); text-align: center; transition: all 0.3s; }
.pwa-card:hover { background: var(--bg-card-hover); border-color: var(--border-hover); transform: translateY(-2px); }
.pwa-step-num {
display: inline-flex; align-items: center; justify-content: center;
width: 32px; height: 32px; border-radius: 50%; background: var(--gradient);
color: #070d1a; font-weight: 800; font-size: 0.9rem; margin-bottom: 0.7rem;
}
.pwa-card h3 { font-size: 0.92rem; font-weight: 700; margin-bottom: 0.3rem; color: var(--text-heading); }
.pwa-card h3 strong { color: var(--accent); }
.pwa-card p { font-size: 0.82rem; color: var(--text-muted); line-height: 1.55; }
.pwa-perks {
display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem;
}
.pwa-perk {
display: inline-flex; align-items: center; gap: 0.35rem;
padding: 0.4rem 0.85rem; border-radius: 999px;
background: var(--glass); border: 1px solid var(--glass-border);
font-size: 0.78rem; font-weight: 600; color: var(--text-muted);
}
.pwa-perk span { font-size: 0.9rem; }
.pwa-cta { text-align: center; margin-top: 1.5rem; }
/* ═══════ COMMUNITY (WhatsApp) ══════════════ */
.community-box {
display: flex; align-items: center; justify-content: space-between;
gap: 2rem; padding: 2rem 2.5rem; border-radius: var(--radius-lg);
}
.community-text { flex: 1; }
.community-text .section-tag { margin-bottom: 0.5rem; }
.community-text h3 { font-size: 1.15rem; font-weight: 800; color: var(--text-heading); margin-bottom: 0.4rem; }
.community-text p { font-size: 0.9rem; color: var(--text-muted); line-height: 1.6; max-width: 500px; }
.community-actions { display: flex; flex-direction: column; gap: 0.4rem; align-items: center; flex-shrink: 0; }
/* ═══════ FAQ ═══════════════════════════════ */
.faq-list { display: flex; flex-direction: column; gap: 0.5rem; }
.faq-item { border-radius: var(--radius); overflow: hidden; transition: border-color 0.3s; }
.faq-item:hover { border-color: var(--border-hover); }
.faq-item[open] { border-color: rgba(59,139,246,0.2); }
.faq-item summary {
display: flex; align-items: center; justify-content: space-between;
padding: 1rem 1.2rem; cursor: pointer; font-size: 0.92rem; font-weight: 600;
list-style: none; color: var(--text-heading);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary svg { flex-shrink: 0; color: var(--text-muted); transition: transform 0.3s; }
.faq-item[open] summary svg { transform: rotate(180deg); color: var(--accent); }
.faq-item p { padding: 0 1.2rem 1rem; font-size: 0.88rem; color: var(--text-muted); line-height: 1.7; }
/* ═══════ CTA ═══════════════════════════════ */
.cta-section { padding: 3rem 0 5rem; }
.cta-box {
position: relative; text-align: center; padding: 3.5rem 2rem;
border-radius: var(--radius-lg); background: var(--glass); border: 1px solid var(--glass-border); overflow: hidden;
}
.cta-glow {
position: absolute; top: -80px; left: 50%; transform: translateX(-50%);
width: 400px; height: 250px;
background: radial-gradient(ellipse, rgba(59,139,246,0.08) 0%, transparent 70%);
pointer-events: none;
}
.cta-box h2 { font-size: clamp(1.3rem, 2.8vw, 1.9rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.35; margin-bottom: 0.7rem; position: relative; color: var(--text-heading); }
.cta-box p { font-size: 1rem; color: var(--text-muted); margin-bottom: 1.5rem; position: relative; }
.cta-btns { display: flex; gap: 0.7rem; justify-content: center; flex-wrap: wrap; position: relative; }
/* ═══════ FOOTER ════════════════════════════ */
/* ═══════ FOOTER ═════════════════════════════
Alineado con el Footer.jsx del app — identidad tech discreta.
"Creado por Nodux Tech · desde el taller de nexius.tools" separa
empresa y origen. Bottom bar mono estilo status bar.
Todas las variables de color son del theme → no hay blanco-sobre-blanco
ni negro-sobre-negro en ningún modo. */
.footer { border-top: 1px solid var(--border); padding: 2.4rem 0 0; }
/* — Footer Community CTA —
Card prominente con invitacion al grupo de WhatsApp. Layout horizontal:
icono WhatsApp grande a la izq, copy al medio, action pill a la der.
Glow verde detras + shadow para sensacion premium. Hover: lift + glow
intensifica. En mobile colapsa a 1 col vertical. */
.footer-community-cta {
position: relative;
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 1.5rem;
padding: 1.6rem 1.8rem;
margin-bottom: 2.4rem;
border-radius: 16px;
/* Background: gradient verde WhatsApp + capa oscura del bg-card.
Da sentido WhatsApp sin ser puro verde fluo (que se ve gritado). */
background:
linear-gradient(135deg, rgba(37, 211, 102, 0.10) 0%, rgba(37, 211, 102, 0.03) 100%),
var(--bg-card);
border: 1px solid rgba(37, 211, 102, 0.25);
box-shadow:
0 4px 14px rgba(37, 211, 102, 0.08),
0 1px 0 rgba(255, 255, 255, 0.04) inset;
text-decoration: none;
color: inherit;
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
border-color 0.25s ease,
box-shadow 0.3s ease;
overflow: hidden;
isolation: isolate;
}
.footer-community-cta:hover {
transform: translateY(-3px);
border-color: rgba(37, 211, 102, 0.45);
box-shadow:
0 10px 30px rgba(37, 211, 102, 0.18),
0 1px 0 rgba(255, 255, 255, 0.04) inset;
}
.footer-community-cta:hover .fcc-glow { opacity: 0.8; }
.footer-community-cta:hover .fcc-action-pill {
background: #20c75c;
transform: translateX(2px);
}
.footer-community-cta:hover .fcc-icon {
transform: scale(1.05) rotate(-3deg);
}
/* Glow blob decorativo detras de la card. Posiciondao top-right con
blur fuerte. opacity baja por default, sube con hover. */
.fcc-glow {
position: absolute;
top: -40%;
right: -10%;
width: 50%;
height: 200%;
background: radial-gradient(ellipse, rgba(37, 211, 102, 0.35), transparent 65%);
filter: blur(50px);
opacity: 0.45;
z-index: -1;
pointer-events: none;
transition: opacity 0.4s ease;
}
/* Icono WhatsApp con container redondeado.
transition para que en hover (definido arriba) escale + rote sutil. */
.fcc-icon {
display: flex;
align-items: center;
justify-content: center;
width: 64px;
height: 64px;
border-radius: 16px;
background: linear-gradient(135deg, #25d366, #128c7e);
color: #fff;
flex-shrink: 0;
box-shadow:
0 4px 14px rgba(37, 211, 102, 0.35),
0 1px 0 rgba(255, 255, 255, 0.18) inset;
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.fcc-content {
display: flex;
flex-direction: column;
gap: 0.3rem;
min-width: 0;
}
.fcc-eyebrow {
display: inline-block;
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: #25d366;
}
.fcc-title {
font-size: 1.05rem;
font-weight: 700;
color: var(--text-heading);
margin: 0;
line-height: 1.3;
letter-spacing: -0.01em;
}
.fcc-sub {
font-size: 0.86rem;
color: var(--text-muted);
margin: 0;
line-height: 1.55;
}
.fcc-sub strong { color: var(--text-heading); }
.fcc-action {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 0.45rem;
flex-shrink: 0;
}
.fcc-action-pill {
display: inline-flex;
align-items: center;
gap: 0.45rem;
padding: 0.7rem 1.1rem;
border-radius: 999px;
background: #25d366;
color: #fff;
font-size: 0.92rem;
font-weight: 700;
white-space: nowrap;
box-shadow: 0 4px 14px rgba(37, 211, 102, 0.35);
transition: background 0.2s ease, transform 0.2s ease;
}
.fcc-action-pill svg { transition: transform 0.25s ease; }
.fcc-action-hint {
font-size: 0.7rem;
color: var(--text-muted);
}
/* Mobile: colapsa a 1 col vertical. El icono se centra arriba, el copy
tambien centrado, la action pill abajo full-width. */
@media (max-width: 720px) {
.footer-community-cta {
grid-template-columns: 1fr;
text-align: center;
padding: 1.4rem 1.2rem;
gap: 1rem;
}
.fcc-icon {
margin: 0 auto;
width: 56px;
height: 56px;
}
.fcc-content { align-items: center; }
.fcc-action {
align-items: center;
width: 100%;
}
.fcc-action-pill {
width: 100%;
justify-content: center;
}
}
@media (prefers-reduced-motion: reduce) {
.footer-community-cta,
.fcc-action-pill,
.fcc-icon { transition: none; }
.footer-community-cta:hover { transform: none; }
.footer-community-cta:hover .fcc-icon { transform: none; }
}
.footer-grid {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr 1fr;
gap: 2rem;
padding-bottom: 1.5rem;
}
/* ─── Brand column ────────────────────────── */
.footer-brand {
display: flex;
flex-direction: column;
gap: 0.6rem;
}
.footer-brand-row {
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.footer-brand-logo {
height: 22px;
width: auto;
object-fit: contain;
opacity: 0.9;
}
/* v1.0-beta chip — mismo patrón que el app */
.footer-brand-version {
font-size: 0.58rem;
padding: 0.12rem 0.4rem;
background: var(--glass);
border: 1px solid var(--glass-border);
border-radius: 4px;
color: var(--text-faint);
letter-spacing: 0.05em;
text-transform: uppercase;
font-weight: 600;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.footer-brand-identity {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
/* Línea 1: "Creado por Nodux Tech · desde el taller de nexius.tools" */
.footer-brand-by {
font-size: 0.78rem;
color: var(--text-muted);
line-height: 1.55;
}
.footer-brand-by strong {
color: var(--text-heading);
font-weight: 700;
letter-spacing: -0.005em;
}
.footer-brand-sep {
color: var(--text-faint);
margin: 0 0.1rem;
}
.footer-brand-origin {
color: var(--text-faint);
font-style: italic;
}
.footer-brand-by a {
color: var(--text-muted);
text-decoration: none;
font-weight: 500;
font-style: normal;
border-bottom: 1px dashed var(--border);
transition: color 0.15s, border-color 0.15s;
}
.footer-brand-by a:hover {
color: var(--accent);
border-bottom-color: var(--accent);
}
/* Línea 2: © mono tech-style */
.footer-brand-copy {
font-size: 0.7rem;
color: var(--text-faint);
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
letter-spacing: 0.01em;
}
/* ─── Columns ─────────────────────────────── */
.footer-col { display: flex; flex-direction: column; gap: 0.5rem; }
.footer-col h4 {
font-size: 0.65rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--text-faint);
margin: 0 0 0.25rem;
}
.footer-col a {
font-size: 0.82rem;
color: var(--text-muted);
transition: color 0.2s;
text-decoration: none;
}
.footer-col a:hover { color: var(--accent); }
/* ─── Social icons ────────────────────────── */
.social-icons { display: flex; gap: 0.4rem; margin-bottom: 0.4rem; flex-wrap: wrap; }
.social-icon {
display: inline-flex; align-items: center; justify-content: center;
width: 32px; height: 32px; border-radius: 7px;
background: var(--glass); border: 1px solid var(--glass-border);
color: var(--text-muted); transition: all 0.2s;
}
.social-icon:hover { color: var(--accent); border-color: var(--accent); transform: translateY(-2px); }
.footer-community-link { font-size: 0.76rem; color: var(--text-faint); text-decoration: none; }
.footer-community-link:hover { color: var(--accent-2); }
/* ─── Bottom bar (monospace status-bar style) ──────────
Mismo estilo que el bottomBar del Footer.jsx del app — © + location +
version + cifrado en mono, separados por puntos. */
.footer-bottom {
border-top: 1px solid var(--border);
padding: 0.7rem 0;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 0.5rem;
font-size: 0.7rem;
color: var(--text-faint);
}
.footer-mono {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
letter-spacing: 0.02em;
color: var(--text-faint);
}
.footer-dot { color: var(--text-faint); opacity: 0.5; }
.footer-secure {
display: inline-flex;
align-items: center;
gap: 0.35rem;
color: var(--text-faint);
font-size: 0.7rem;
letter-spacing: 0.01em;
}
.footer-secure svg { opacity: 0.7; flex-shrink: 0; }
/* ═══════ PITCH-DECK SECTIONS (rewrite abr-2026) ═══════════════
Estilos para las clases que introdujo el rewrite del website
estilo pitch deck: pricing-card system, crm-feature, roi-card,
module-replace, badge-new, section-summary, etc. */
/* — Module cards extras (solucion section) — */
.module-replace {
font-size: 0.78rem;
color: var(--text-muted);
margin-bottom: 0.8rem;
letter-spacing: 0.01em;
}
.module-replace span {
color: var(--accent);
font-weight: 700;
}
.module-card-highlight {
border-color: rgba(59,139,246,0.35) !important;
background: rgba(59,139,246,0.04) !important;
box-shadow: 0 0 24px rgba(59,139,246,0.08);
}
.badge-new {
display: inline-block;
padding: 0.12rem 0.5rem;
border-radius: 999px;
background: var(--gradient);
color: #070d1a;
font-size: 0.62rem;
font-weight: 800;
letter-spacing: 0.06em;
vertical-align: middle;
margin-left: 0.4rem;
}
.section-summary {
text-align: center;
margin-top: 2.2rem;
font-size: 1.05rem;
color: var(--text-muted);
line-height: 1.7;
}
.section-summary strong { color: var(--text-heading); }
/* — CRM features grid — */
.crm-features-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
margin-bottom: 2rem;
}
.crm-feature {
padding: 1.4rem 1.3rem;
border-radius: var(--radius);
transition: all 0.3s;
}
.crm-feature:hover {
border-color: var(--border-hover);
transform: translateY(-2px);
}
.crm-feature h3 {
font-size: 1rem;
font-weight: 700;
margin-bottom: 0.5rem;
color: var(--text-heading);
line-height: 1.35;
}
.crm-feature p {
font-size: 0.86rem;
color: var(--text-muted);
line-height: 1.65;
}
/* Icon container line-art para los CRM features. Mismo estilo que las
cards de la seccion industrias para consistencia visual cross-section.
Hover: el icon se vuelve azul accent + el container resalta. */
.crm-feature-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: 10px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
color: #93b5fa;
margin-bottom: 0.85rem;
transition: background 0.25s, border-color 0.25s, color 0.25s;
}
.crm-feature:hover .crm-feature-icon {
background: rgba(23, 105, 255, 0.12);
border-color: rgba(23, 105, 255, 0.35);
color: #1769FF;
}
/* Light theme: ajustar el color del icon container para mejor contraste
en fondo claro (sino el #93b5fa light queda invisible sobre blanco). */
[data-theme="light"] .crm-feature-icon {
background: rgba(23, 105, 255, 0.06);
border-color: rgba(23, 105, 255, 0.15);
color: #1769FF;
}
[data-theme="light"] .industria-icon {
background: rgba(23, 105, 255, 0.06);
border-color: rgba(23, 105, 255, 0.15);
color: #1769FF;
}
/* — Stack swap (Slide 4.3) —
Visualizacion antes/despues. 6 cards tachadas a la izquierda → arrow
→ NODUX a la derecha. En mobile el grid colapsa: las 6 quedan en 2x3
y el arrow rota 90deg para apuntar abajo. */
.section-stack-swap {
padding-top: 3rem !important;
padding-bottom: 3rem !important;
}
.stack-swap {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 2rem;
margin-top: 2rem;
}
.stack-side {
display: flex;
flex-direction: column;
gap: 1rem;
}
.stack-side-label {
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--text-muted);
text-align: center;
}
.stack-side-cost {
font-size: 0.95rem;
text-align: center;
color: var(--text-muted);
}
.stack-side-cost strong {
color: var(--text-heading);
font-size: 1.05rem;
}
.stack-old-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.6rem;
}
.stack-old-card {
display: flex;
align-items: center;
gap: 0.55rem;
padding: 0.7rem 0.85rem;
border-radius: 10px;
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.06);
position: relative;
/* Efecto "tachado" sutil — opacidad reducida + linea diagonal */
opacity: 0.55;
transition: opacity 0.25s ease;
}
.stack-old-card::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, transparent 47%, rgba(220, 38, 38, 0.4) 49%, rgba(220, 38, 38, 0.4) 51%, transparent 53%);
border-radius: 10px;
pointer-events: none;
}
.stack-old-card:hover { opacity: 0.8; }
.stack-old-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
flex-shrink: 0;
color: var(--text-muted);
}
.stack-old-name {
font-size: 0.78rem;
font-weight: 600;
color: var(--text-muted);
line-height: 1.2;
}
.stack-arrow {
display: flex;
align-items: center;
justify-content: center;
color: #1769FF;
width: 60px;
height: 60px;
border-radius: 50%;
background: rgba(23, 105, 255, 0.08);
border: 1px solid rgba(23, 105, 255, 0.2);
/* Pulso sutil para llamar la atencion */
animation: stackArrowPulse 2.4s ease-in-out infinite;
}
@keyframes stackArrowPulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(23, 105, 255, 0.25); }
50% { box-shadow: 0 0 0 12px rgba(23, 105, 255, 0); }
}
@media (prefers-reduced-motion: reduce) {
.stack-arrow { animation: none; }
}
.stack-new-card {
padding: 1.6rem 1.4rem;
border-radius: var(--radius);
background: linear-gradient(180deg, rgba(23, 105, 255, 0.08), rgba(23, 105, 255, 0.02));
border: 1.5px solid rgba(23, 105, 255, 0.3);
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.6rem;
box-shadow: 0 8px 32px rgba(23, 105, 255, 0.12);
}
.stack-new-logo {
width: 48px;
height: 48px;
border-radius: 12px;
}
.stack-new-name {
font-size: 1.3rem;
font-weight: 800;
color: var(--text-heading);
letter-spacing: -0.01em;
}
.stack-new-desc {
font-size: 0.86rem;
color: var(--text-muted);
line-height: 1.55;
}
@media (max-width: 880px) {
.stack-swap {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.stack-arrow {
transform: rotate(90deg);
margin: 0 auto;
}
.stack-old-grid {
grid-template-columns: 1fr 1fr 1fr;
}
.stack-old-card { padding: 0.55rem 0.7rem; }
}
@media (max-width: 560px) {
.stack-old-grid { grid-template-columns: 1fr 1fr; }
}
/* Strike-text en headings — variante decorativa para tachar palabras
inline (ej. "6 apps y $191"). */
.strike-text {
position: relative;
color: var(--text-muted);
display: inline-block;
}
.strike-text::after {
content: '';
position: absolute;
left: -2%;
right: -2%;
top: 52%;
height: 3px;
background: linear-gradient(90deg, #dc2626, #f97316);
border-radius: 3px;
transform: rotate(-2deg);
}
/* — ROI Calculator interactivo (Slide 6) —
Calculadora con slider que ajusta team size y muestra ahorro vs stack
tradicional. Layout: head + slider + 2 cards comparativas + resumen
de ahorro. Glass card unificadora. */
.roi-calc {
margin-top: 3rem;
padding: 2rem 1.8rem;
border-radius: var(--radius);
background: linear-gradient(180deg, rgba(23, 105, 255, 0.05), rgba(23, 105, 255, 0.01));
border: 1px solid rgba(23, 105, 255, 0.18);
box-shadow: 0 8px 40px rgba(15, 23, 42, 0.08);
}
.roi-calc-head { text-align: center; margin-bottom: 1.5rem; }
.roi-calc-title {
font-size: 1.3rem;
font-weight: 800;
color: var(--text-heading);
margin-bottom: 0.4rem;
}
.roi-calc-sub {
font-size: 0.9rem;
color: var(--text-muted);
max-width: 540px;
margin: 0 auto;
}
.roi-calc-control {
max-width: 540px;
margin: 0 auto 2rem;
}
.roi-calc-label {
display: flex;
justify-content: space-between;
align-items: baseline;
flex-wrap: wrap;
gap: 0.5rem;
margin-bottom: 0.6rem;
}
.roi-calc-label > span:first-child {
font-size: 1.05rem;
color: var(--text-heading);
}
.roi-calc-label strong {
font-size: 1.4rem;
font-weight: 800;
color: #1769FF;
font-variant-numeric: tabular-nums;
}
.roi-calc-hint {
font-size: 0.78rem;
color: var(--text-muted);
}
/* Slider custom — webkit + firefox. Track con gradient hasta el punto
actual, después gris. */
.roi-calc-slider {
width: 100%;
-webkit-appearance: none;
appearance: none;
height: 8px;
border-radius: 4px;
background: linear-gradient(90deg, #1769FF 0%, #1769FF var(--roi-pct, 18%), rgba(255,255,255,0.1) var(--roi-pct, 18%), rgba(255,255,255,0.1) 100%);
outline: none;
cursor: grab;
}
.roi-calc-slider:active { cursor: grabbing; }
.roi-calc-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 22px;
height: 22px;
border-radius: 50%;
background: #fff;
border: 3px solid #1769FF;
cursor: grab;
box-shadow: 0 2px 8px rgba(23, 105, 255, 0.35);
transition: transform 0.15s, box-shadow 0.15s;
}
.roi-calc-slider::-webkit-slider-thumb:hover { transform: scale(1.15); }
.roi-calc-slider::-webkit-slider-thumb:active {
transform: scale(1.25);
box-shadow: 0 4px 14px rgba(23, 105, 255, 0.5);
}
.roi-calc-slider::-moz-range-thumb {
width: 22px;
height: 22px;
border-radius: 50%;
background: #fff;
border: 3px solid #1769FF;
cursor: grab;
box-shadow: 0 2px 8px rgba(23, 105, 255, 0.35);
}
.roi-calc-slider-labels {
display: flex;
justify-content: space-between;
margin-top: 0.4rem;
font-size: 0.72rem;
color: var(--text-muted);
}
.roi-calc-result {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 1rem;
margin-bottom: 1.5rem;
}
.roi-calc-card {
padding: 1.4rem 1.2rem;
border-radius: var(--radius);
text-align: center;
border: 1px solid rgba(255, 255, 255, 0.08);
}
.roi-calc-card-old {
background: rgba(220, 38, 38, 0.04);
border-color: rgba(220, 38, 38, 0.2);
}
.roi-calc-card-new {
background: rgba(23, 105, 255, 0.08);
border-color: rgba(23, 105, 255, 0.3);
box-shadow: 0 4px 20px rgba(23, 105, 255, 0.15);
}
.roi-calc-card-label {
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-muted);
margin-bottom: 0.5rem;
}
.roi-calc-card-amount {
font-size: clamp(1.6rem, 4vw, 2.2rem);
font-weight: 800;
line-height: 1;
margin-bottom: 0.4rem;
font-variant-numeric: tabular-nums;
letter-spacing: -0.02em;
}
.roi-calc-card-old .roi-calc-card-amount {
color: var(--text-muted);
text-decoration: line-through;
text-decoration-color: rgba(220, 38, 38, 0.5);
text-decoration-thickness: 2px;
}
.roi-calc-card-detail {
font-size: 0.74rem;
color: var(--text-muted);
line-height: 1.4;
}
/* Sub-detalle del plan dentro del card-detail (cuando el plan name lleva
info adicional como "5 cupos · 50 empresas"). */
.roi-calc-card-plan-detail {
display: inline-block;
margin-top: 0.25rem;
font-size: 0.7rem;
opacity: 0.8;
}
.roi-calc-vs {
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--text-muted);
}
.roi-calc-savings {
background: rgba(23, 105, 255, 0.06);
border: 1px dashed rgba(23, 105, 255, 0.3);
border-radius: var(--radius);
padding: 1rem 1.4rem;
display: flex;
flex-direction: column;
gap: 0.45rem;
margin-bottom: 1rem;
}
.roi-calc-savings-row {
display: flex;
justify-content: space-between;
align-items: baseline;
font-size: 0.92rem;
color: var(--text-heading);
}
.roi-calc-savings-row strong {
font-size: 1.2rem;
font-weight: 800;
font-variant-numeric: tabular-nums;
}
.roi-calc-savings-row.roi-calc-savings-year strong {
font-size: 1.5rem;
}
.roi-calc-note {
font-size: 0.72rem;
color: var(--text-muted);
text-align: center;
margin-top: 0.5rem;
line-height: 1.5;
}
@media (max-width: 640px) {
.roi-calc { padding: 1.5rem 1.1rem; }
.roi-calc-result { grid-template-columns: 1fr; gap: 0.6rem; }
.roi-calc-vs { transform: rotate(0deg); margin: 0; padding: 0.2rem 0; }
}
/* — Stats strip (Slide 4.5) —
Trust strip con numeros reales. Layout horizontal con dividers
verticales sutiles entre stats. En mobile colapsa a 2x2 grid. */
.section-stats {
padding-top: 2rem !important;
padding-bottom: 2rem !important;
}
.stats-strip {
display: grid;
grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
align-items: center;
gap: 1.5rem;
padding: 2rem 1.5rem;
background: linear-gradient(180deg, rgba(23, 105, 255, 0.04), rgba(23, 105, 255, 0.01));
border: 1px solid rgba(23, 105, 255, 0.12);
border-radius: var(--radius);
}
.stat-block {
text-align: center;
display: flex;
flex-direction: column;
gap: 0.3rem;
}
.stat-num {
font-size: clamp(1.8rem, 4vw, 2.6rem);
font-weight: 800;
line-height: 1;
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
}
.stat-label {
font-size: 0.92rem;
font-weight: 600;
color: var(--text-heading);
}
.stat-sub {
font-size: 0.78rem;
color: var(--text-muted);
line-height: 1.4;
}
.stat-divider {
width: 1px;
height: 60px;
background: linear-gradient(180deg, transparent, rgba(23, 105, 255, 0.18), transparent);
}
@media (max-width: 880px) {
.stats-strip {
grid-template-columns: 1fr 1fr;
gap: 1.5rem 1rem;
padding: 1.5rem 1rem;
}
.stat-divider { display: none; }
}
@media (max-width: 480px) {
.stats-strip { grid-template-columns: 1fr; }
}
/* — Scroll progress bar (top) —
Barrita gradient debajo del nav que se llena según scrollY.
transform-origin left + scaleX para evitar layout thrash en cada frame. */
.scroll-progress {
position: absolute;
bottom: -1px;
left: 0;
width: 100%;
height: 2px;
background: linear-gradient(90deg, #1769FF 0%, #06b6d4 50%, #8b5cf6 100%);
transform: scaleX(0);
transform-origin: 0 50%;
transition: transform 0.05s linear;
z-index: 100;
pointer-events: none;
opacity: 0.85;
}
/* — Industrias grid (Slide 5.5) —
Mismo skeleton que crm-features-grid pero con icon container.
Iconos line-art monocromos accent color (estilo Linear/Stripe).
El hover sube ligeramente la card y hace glow del icon. */
.industrias-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
margin-bottom: 2rem;
}
.industria {
padding: 1.4rem 1.3rem;
border-radius: var(--radius);
transition: all 0.3s;
}
.industria:hover {
border-color: var(--border-hover);
transform: translateY(-2px);
}
.industria:hover .industria-icon {
background: rgba(23, 105, 255, 0.12);
border-color: rgba(23, 105, 255, 0.35);
color: #1769FF;
}
.industria-icon {
/* Container cuadrado con borde sutil + accent en hover.
Tamaño consistente — los SVG adentro escalan a 22px. */
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 10px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
color: #93b5fa;
margin-bottom: 0.85rem;
transition: background 0.25s, border-color 0.25s, color 0.25s;
}
.industria h3 {
font-size: 1rem;
font-weight: 700;
margin-bottom: 0.5rem;
color: var(--text-heading);
line-height: 1.35;
display: flex;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
}
.industria p {
font-size: 0.86rem;
color: var(--text-muted);
line-height: 1.65;
}
/* Card destacada (property mgmt) — borde gradient sutil para que
capture atención sin gritar. */
.industria-highlight {
background: linear-gradient(180deg, rgba(23, 105, 255, 0.06), rgba(23, 105, 255, 0.02));
border-color: rgba(23, 105, 255, 0.25);
}
.industria-highlight .industria-icon {
background: rgba(23, 105, 255, 0.10);
border-color: rgba(23, 105, 255, 0.30);
color: #1769FF;
}
@media (max-width: 880px) {
.industrias-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
.industrias-grid { grid-template-columns: 1fr; }
}
.crm-cta {
text-align: center;
margin-top: 1.6rem;
padding: 1.4rem 1.6rem;
border-radius: var(--radius);
background: rgba(59,139,246,0.05);
border: 1px solid rgba(59,139,246,0.2);
}
.crm-cta p {
font-size: 0.95rem;
color: var(--text);
line-height: 1.65;
margin: 0;
}
.crm-cta p + p { margin-top: 0.5rem; }
.crm-cta strong { color: var(--text-heading); }
.crm-cta-cost {
font-size: 0.85rem !important;
color: var(--text-muted) !important;
}
.strike {
text-decoration: line-through;
text-decoration-color: var(--accent);
text-decoration-thickness: 2px;
}
/* — ROI grid — */
.roi-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1rem;
}
.roi-card {
padding: 1.6rem 1.3rem;
border-radius: var(--radius);
text-align: center;
transition: all 0.3s;
}
.roi-card:hover {
border-color: var(--border-hover);
transform: translateY(-2px);
}
.roi-num {
font-size: 1.8rem;
font-weight: 800;
letter-spacing: -0.02em;
margin-bottom: 0.6rem;
line-height: 1;
}
.roi-card h3 {
font-size: 0.95rem;
font-weight: 700;
margin-bottom: 0.5rem;
color: var(--text-heading);
}
.roi-card p {
font-size: 0.84rem;
color: var(--text-muted);
line-height: 1.6;
}
.roi-closing {
text-align: center;
margin-top: 2rem;
font-size: 1.02rem;
color: var(--text-muted);
line-height: 1.7;
}
.roi-closing strong { color: var(--text-heading); }
/* — Pricing cards (3-col layout, rewrite abr-2026) — */
.pricing-card {
position: relative;
padding: 1.8rem 1.5rem;
border-radius: var(--radius-lg);
display: flex;
flex-direction: column;
transition: all 0.3s;
}
.pricing-card:hover {
border-color: var(--border-hover);
transform: translateY(-2px);
}
.pricing-card-featured {
border-color: rgba(59,139,246,0.4) !important;
background: rgba(59,139,246,0.04) !important;
box-shadow: 0 0 36px rgba(59,139,246,0.1);
}
.pricing-badge {
position: absolute;
top: -12px;
left: 50%;
transform: translateX(-50%);
padding: 0.25rem 0.95rem;
border-radius: 999px;
background: var(--gradient);
color: #070d1a;
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.04em;
white-space: nowrap;
text-transform: uppercase;
}
.pricing-tagline {
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 0.4rem;
}
.pricing-card h3 {
font-size: 1.4rem;
font-weight: 800;
margin-bottom: 0.3rem;
color: var(--text-heading);
}
.pricing-tag {
font-size: 0.86rem;
color: var(--text-muted);
margin-bottom: 1rem;
line-height: 1.5;
}
.pricing-price {
display: flex;
align-items: baseline;
gap: 0.35rem;
margin-bottom: 0.5rem;
}
.pricing-amount {
font-size: 2.6rem;
font-weight: 800;
letter-spacing: -0.03em;
color: var(--text-heading);
line-height: 1;
}
.pricing-unit {
font-size: 0.88rem;
color: var(--text-muted);
}
.pricing-anchor {
font-size: 0.82rem;
color: var(--text-muted);
margin-bottom: 1.4rem;
padding-bottom: 1rem;
border-bottom: 1px solid var(--border);
line-height: 1.5;
}
.pricing-anchor strong {
color: #22c55e;
font-weight: 700;
}
.pricing-features {
list-style: none;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.55rem;
margin-bottom: 1.6rem;
flex: 1;
}
.pricing-features li {
font-size: 0.84rem;
color: var(--text-muted);
padding-left: 1.4rem;
position: relative;
line-height: 1.55;
}
.pricing-features li::before {
content: '';
position: absolute;
left: 0;
top: 0.5em;
width: 14px;
height: 14px;
background-image: url("data:image/svg+xml;utf8,");
background-size: contain;
background-repeat: no-repeat;
}
.pricing-features li strong {
color: var(--text-heading);
font-weight: 700;
}
.pricing-features li.pronto {
color: var(--text-faint);
}
.pricing-features li.pronto::before {
background-image: url("data:image/svg+xml;utf8,");
}
.pricing-features li.pronto em {
color: var(--accent);
font-style: normal;
font-weight: 700;
font-size: 0.78rem;
}
/* — Billing toggle pill (anual ↔ mensual) — */
.billing-toggle {
display: flex;
width: fit-content;
max-width: 100%;
margin: 0 auto 2rem;
padding: 0.3rem;
border-radius: 999px;
background: var(--bg-card);
border: 1px solid var(--border);
gap: 0.2rem;
flex-wrap: nowrap;
}
.billing-opt {
background: transparent;
border: none;
cursor: pointer;
padding: 0.55rem 1.1rem;
font-size: 0.88rem;
font-weight: 600;
color: var(--text-muted);
border-radius: 999px;
transition: all 0.25s;
display: inline-flex;
align-items: center;
gap: 0.45rem;
white-space: nowrap;
flex-shrink: 0;
}
.billing-opt:hover { color: var(--text); }
.billing-opt.is-active {
background: var(--gradient);
color: #070d1a;
box-shadow: 0 4px 16px rgba(59,139,246,0.25);
}
.billing-save {
font-size: 0.65rem;
font-weight: 800;
letter-spacing: 0.03em;
text-transform: uppercase;
background: rgba(34,197,94,0.18);
color: #16a34a;
padding: 0.15rem 0.45rem;
border-radius: 999px;
white-space: nowrap;
}
.billing-opt.is-active .billing-save {
background: rgba(7,13,26,0.18);
color: #062012;
}
/* — Features collapsible — */
.pricing-features [data-collapsible],
.hidden-feature {
display: none;
}
.pricing-card.is-expanded .hidden-feature {
display: list-item;
animation: feature-fade-in 0.35s ease-out;
}
@keyframes feature-fade-in {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
.features-expand {
background: transparent;
border: 1px dashed var(--border);
cursor: pointer;
padding: 0.65rem 1rem;
font-size: 0.82rem;
font-weight: 600;
color: var(--accent);
border-radius: var(--radius);
margin-bottom: 1rem;
transition: all 0.2s;
width: 100%;
}
.features-expand:hover {
border-color: var(--accent);
background: rgba(59,139,246,0.05);
}
/* — Enterprise card prominente (4ª card full-width) — */
.enterprise-card {
margin-top: 2.5rem;
padding: 2.2rem 2.4rem;
border-radius: var(--radius-lg);
display: grid;
grid-template-columns: 1.6fr 1fr;
gap: 2.5rem;
align-items: center;
position: relative;
overflow: hidden;
border: 1px solid rgba(59,139,246,0.25);
background: linear-gradient(135deg, rgba(59,139,246,0.06) 0%, rgba(34,197,94,0.04) 100%);
box-shadow: 0 8px 40px rgba(59,139,246,0.08);
}
.enterprise-card::before {
content: '';
position: absolute;
top: -50%; right: -20%;
width: 60%; height: 200%;
background: radial-gradient(ellipse at center, rgba(59,139,246,0.08), transparent 60%);
pointer-events: none;
}
.enterprise-left { position: relative; z-index: 1; }
.enterprise-badge {
display: inline-block;
font-size: 0.7rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--accent);
padding: 0.3rem 0.8rem;
border-radius: 999px;
background: rgba(59,139,246,0.1);
border: 1px solid rgba(59,139,246,0.25);
margin-bottom: 1rem;
}
.enterprise-card h3 {
font-size: 1.7rem;
font-weight: 800;
margin-bottom: 0.8rem;
color: var(--text-heading);
line-height: 1.2;
}
.enterprise-card > .enterprise-left > p {
font-size: 0.95rem;
color: var(--text-muted);
line-height: 1.65;
margin-bottom: 1.2rem;
}
.enterprise-features {
list-style: none;
padding: 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.5rem 1.2rem;
}
.enterprise-features li {
font-size: 0.85rem;
color: var(--text);
padding-left: 1.4rem;
position: relative;
}
.enterprise-features li strong { color: var(--text-heading); font-weight: 700; }
.enterprise-features li::before {
content: '';
position: absolute;
left: 0; top: 0.45em;
width: 14px; height: 14px;
background-image: url("data:image/svg+xml;utf8,");
background-size: contain;
background-repeat: no-repeat;
}
.enterprise-right {
position: relative;
z-index: 1;
text-align: center;
padding: 1.6rem 1.4rem;
border-radius: var(--radius);
background: var(--bg-card);
border: 1px solid var(--border);
}
.enterprise-price {
margin-bottom: 1rem;
}
.enterprise-from {
display: block;
font-size: 0.78rem;
color: var(--text-muted);
letter-spacing: 0.04em;
text-transform: uppercase;
margin-bottom: 0.2rem;
}
.enterprise-amount {
font-size: 2.4rem;
font-weight: 800;
letter-spacing: -0.03em;
color: var(--text-heading);
line-height: 1;
display: block;
}
.enterprise-unit {
display: block;
font-size: 0.86rem;
color: var(--text-muted);
margin-top: 0.2rem;
}
.enterprise-foot {
font-size: 0.75rem;
color: var(--text-muted);
margin-top: 0.7rem;
}
/* — link-pulse: subraya con underline gradient animado — */
.link-pulse {
background: var(--gradient);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: 700;
position: relative;
}
/* — Section canvases (network nodes background, ambient) — */
.section-with-canvas {
position: relative;
overflow: hidden;
isolation: isolate;
}
.network-canvas-section {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 0;
opacity: 0.42;
pointer-events: none;
}
[data-theme="light"] .network-canvas-section { opacity: 0.28; }
.section-with-canvas > .container,
.section-with-canvas > .cta-box {
position: relative;
z-index: 1;
}
@media (prefers-reduced-motion: reduce) {
.network-canvas-section { display: none; }
}
/* — Responsive overrides para los nuevos grids — */
@media (max-width: 1024px) {
.crm-features-grid { grid-template-columns: repeat(2, 1fr); }
.roi-grid { grid-template-columns: repeat(2, 1fr); }
.pricing-grid { grid-template-columns: repeat(2, 1fr); max-width: 720px; margin: 0 auto; }
.enterprise-card { grid-template-columns: 1fr; gap: 1.6rem; padding: 1.8rem; }
.enterprise-features { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
.crm-features-grid { grid-template-columns: 1fr; }
.roi-grid { grid-template-columns: 1fr; }
.pricing-grid { grid-template-columns: 1fr; max-width: 420px; }
.pricing-amount { font-size: 2.2rem; }
.pricing-card h3 { font-size: 1.25rem; }
.enterprise-card h3 { font-size: 1.4rem; }
.enterprise-amount { font-size: 2rem; }
.billing-toggle { flex-direction: column; padding: 0.35rem; border-radius: var(--radius); width: min(92vw, 300px); }
.billing-opt { justify-content: center; padding: 0.65rem 0.9rem; gap: 0.4rem; }
.billing-save { font-size: 0.6rem; padding: 0.12rem 0.4rem; }
}
/* ═══════ ANIMATIONS ════════════════════════ */
.anim { opacity: 0; transform: translateY(24px); transition: opacity 0.65s cubic-bezier(0.16,1,0.3,1), transform 0.65s cubic-bezier(0.16,1,0.3,1); }
.anim.visible { opacity: 1; transform: translateY(0); }
/* ═══════ RESPONSIVE ════════════════════════ */
@media (max-width: 1024px) {
.pricing-grid { grid-template-columns: repeat(2, 1fr); }
.features-grid { grid-template-columns: repeat(2, 1fr); }
.footer-grid { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.footer-brand { grid-column: 1 / -1; }
.contrast-grid { grid-template-columns: 1fr; max-width: 460px; }
}
@media (max-width: 768px) {
.nav-links, .nav-actions { display: none; }
.nav-burger { display: flex; }
.nav.mobile-open .nav-inner { flex-wrap: wrap; }
.nav.mobile-open .nav-links {
display: flex; flex-direction: column; width: 100%;
gap: 0.4rem; padding: 0.8rem 0; order: 3;
background: var(--nav-bg);
}
.nav.mobile-open .nav-actions {
display: flex; width: 100%; order: 4; padding-bottom: 0.8rem; gap: 0.4rem;
}
.nav.mobile-open .nav-actions .btn { flex: 1; text-align: center; }
.nav.mobile-open .theme-toggle { flex: 0; }
.hero { padding: 6.5rem 0 2.5rem; min-height: auto; }
.hero-text h1 { font-size: 1.5rem; }
.hero-sub { font-size: 0.92rem; }
.pain-grid { grid-template-columns: 1fr; }
.features-grid { grid-template-columns: 1fr; }
.early-grid { grid-template-columns: 1fr; }
.pwa-grid { grid-template-columns: 1fr; }
.community-box { flex-direction: column; text-align: center; padding: 1.5rem; }
.community-text p { max-width: none; }
.community-actions { width: 100%; }
.pricing-grid { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
.steps-grid { flex-direction: column; }
.step-arrow { transform: rotate(90deg); }
.footer-grid { grid-template-columns: 1fr; gap: 1.2rem; }
.footer-bottom {
padding: 0.7rem 1rem;
flex-direction: column;
gap: 0.25rem;
text-align: center;
}
.footer-bottom .footer-dot { display: none; }
.section { padding: 2.8rem 0; }
}
@media (max-width: 420px) {
.hero-text h1 { font-size: 1.35rem; }
.btn-lg { padding: 0.7rem 1.2rem; font-size: 0.88rem; }
.hero-ctas { flex-direction: column; }
.cta-btns { flex-direction: column; }
.early-cta { flex-direction: column; align-items: center; }
}
/* ═══════════════════════════════════════════════════════════════════════
SHOWCASE MOCKUPS — visualizaciones CSS puras (reemplazan screenshots)
Cada mockup mantiene el mismo container .showcase-mock para grid layout.
Estética: cristal con gradient border, chrome estilo browser, tipografía
mono donde hace falta "número". Dark/light compatible via vars.
══════════════════════════════════════════════════════════════════════ */
.showcase-mock {
position: relative;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 14px;
box-shadow: var(--shadow-card);
overflow: hidden;
min-height: 280px;
backdrop-filter: blur(8px);
transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
}
.showcase-mock:hover {
transform: translateY(-2px);
border-color: var(--border-hover);
box-shadow: 0 8px 32px rgba(0,0,0,0.15);
}
/* Fake browser chrome ─────────────────────────── */
.mock-chrome {
display: flex;
align-items: center;
gap: 0.35rem;
padding: 0.6rem 0.85rem;
background: rgba(0,0,0,0.08);
border-bottom: 1px solid var(--border);
}
.mock-chrome > span {
width: 10px; height: 10px;
border-radius: 50%;
background: rgba(150,150,160,0.25);
}
.mock-chrome > span:first-child { background: rgba(239,68,68,0.55); }
.mock-chrome > span:nth-child(2) { background: rgba(245,158,11,0.55); }
.mock-chrome > span:nth-child(3) { background: rgba(46,212,122,0.55); }
.mock-chrome em {
font-style: normal;
margin-left: auto;
font-size: 0.72rem;
color: var(--text-muted);
font-weight: 500;
}
/* ── 1. Dashboard (Pulso) ────────────────────── */
.mock-dashboard .mock-dash-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.6rem;
padding: 1rem;
}
.mock-kpi {
display: flex;
flex-direction: column;
gap: 0.25rem;
padding: 0.7rem 0.85rem;
background: var(--glass);
border: 1px solid var(--glass-border);
border-radius: 10px;
}
.mock-kpi-label {
font-size: 0.68rem;
color: var(--text-muted);
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.mock-kpi-value {
font-size: 1.75rem;
font-weight: 800;
color: var(--text-heading);
line-height: 1;
font-variant-numeric: tabular-nums;
}
.mock-kpi-value em { font-style: normal; font-size: 0.9rem; font-weight: 600; color: var(--text-muted); margin-left: 0.15rem; }
.mock-kpi-delta {
font-size: 0.68rem;
font-weight: 600;
}
.delta-green { color: #2ED47A; }
.delta-red { color: #ef4444; }
.mock-chart {
padding: 0.5rem 1rem 1rem;
}
.mock-chart-head {
display: flex;
justify-content: space-between;
margin-bottom: 0.55rem;
}
.mock-chart-head span {
font-size: 0.72rem;
color: var(--text-muted);
font-weight: 600;
}
.mock-bars {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 0.4rem;
height: 80px;
padding: 0 0.2rem;
}
.mock-bar-pair {
flex: 1;
display: flex;
gap: 2px;
align-items: flex-end;
height: 100%;
}
.mock-bar-pair i, .mock-bar-pair b {
flex: 1;
border-radius: 2px 2px 0 0;
display: block;
animation: barGrow 0.7s ease-out;
}
.mock-bar-pair i { background: linear-gradient(180deg, #3b82f6, #1769FF); }
.mock-bar-pair b { background: linear-gradient(180deg, #2ED47A, #16a34a); }
@keyframes barGrow { from { height: 0 !important; opacity: 0; } }
.mock-legend {
display: flex;
gap: 0.9rem;
margin-top: 0.55rem;
font-size: 0.7rem;
color: var(--text-muted);
}
.mock-legend em {
display: inline-block;
width: 8px; height: 8px;
border-radius: 50%;
margin-right: 0.35rem;
vertical-align: 1px;
}
.mock-legend .dot-blue { background: #3b82f6; }
.mock-legend .dot-green { background: #2ED47A; }
/* ── 2. Ticket form ─────────────────────────── */
.mock-form-body { padding: 1rem 1.1rem 1.2rem; display: flex; flex-direction: column; gap: 0.7rem; }
.mock-field { display: flex; flex-direction: column; gap: 0.3rem; }
.mock-field label {
font-size: 0.66rem;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.04em;
font-weight: 600;
}
.mock-input {
padding: 0.55rem 0.75rem;
background: var(--glass);
border: 1px solid var(--glass-border);
border-radius: 8px;
font-size: 0.85rem;
color: var(--text-heading);
}
.mock-input-sm { font-size: 0.78rem; padding: 0.45rem 0.7rem; }
.mock-row-2 { display: grid; grid-template-columns: auto 1fr; gap: 0.75rem; }
.mock-chip {
display: inline-flex;
align-items: center;
padding: 0.4rem 0.7rem;
font-size: 0.78rem;
font-weight: 600;
border-radius: 999px;
background: rgba(59,130,246,0.12);
color: #3b82f6;
}
.mock-chip.chip-red { background: rgba(239,68,68,0.12); color: #ef4444; }
.mock-attach {
display: flex;
gap: 0.5rem;
padding: 0.25rem 0;
flex-wrap: wrap;
}
.mock-photo {
width: 56px; height: 56px;
border-radius: 8px;
background: linear-gradient(135deg, #2ED47A20, #3b82f620);
border: 1px solid var(--glass-border);
position: relative;
}
.mock-photo::after {
content: '';
position: absolute;
inset: 30% 20% 20% 20%;
background: radial-gradient(circle at 30% 40%, rgba(255,255,255,0.4), transparent 50%);
border-radius: 50%;
}
.mock-photo-2 { background: linear-gradient(135deg, #f59e0b22, #ef444422); }
.mock-attach-add {
display: flex;
align-items: center;
justify-content: center;
width: 56px; height: 56px;
border: 1.5px dashed var(--border-hover);
border-radius: 8px;
font-size: 0.72rem;
color: var(--text-muted);
font-weight: 600;
}
.mock-submit {
margin-top: 0.5rem;
padding: 0.65rem 1rem;
background: linear-gradient(135deg, #3b82f6, #1769FF);
color: #fff;
border-radius: 8px;
font-size: 0.88rem;
font-weight: 600;
text-align: center;
box-shadow: 0 4px 14px rgba(59,130,246,0.3);
}
/* ── 3. SLA ring ───────────────────────────── */
.mock-sla { display: flex; align-items: center; justify-content: center; padding: 1.5rem 1rem; }
.mock-sla-card {
width: 100%;
max-width: 320px;
padding: 1.2rem 1.1rem;
background: var(--glass);
border: 1px solid var(--glass-border);
border-radius: 14px;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.8rem;
}
.mock-sla-status {
display: inline-flex;
align-items: center;
gap: 0.45rem;
padding: 0.3rem 0.7rem;
background: rgba(245,158,11,0.14);
color: #f59e0b;
border-radius: 999px;
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.mock-pulse-dot {
width: 8px; height: 8px;
border-radius: 50%;
background: #f59e0b;
animation: pulseDot 1.8s ease-in-out infinite;
}
@keyframes pulseDot {
0%, 100% { box-shadow: 0 0 0 0 rgba(245,158,11,0.6); }
50% { box-shadow: 0 0 0 6px rgba(245,158,11,0); }
}
.mock-sla-title {
font-size: 0.82rem;
color: var(--text-heading);
font-weight: 600;
text-align: center;
}
.mock-sla-ring {
position: relative;
width: 140px; height: 140px;
}
.mock-ring-svg {
width: 100%; height: 100%;
transform: rotate(-90deg);
}
.ring-track {
fill: none;
stroke: var(--glass-border);
stroke-width: 6;
}
.ring-pause {
fill: none;
stroke: #f59e0b;
stroke-width: 6;
stroke-linecap: round;
stroke-dasharray: 327; /* ~2πr = 2*π*52 */
stroke-dashoffset: 100; /* ~70% completado */
animation: ringDraw 1s ease-out;
}
@keyframes ringDraw { from { stroke-dashoffset: 327; } }
.mock-ring-inner {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.15rem;
color: var(--text-heading);
}
.mock-ring-inner > svg { color: #f59e0b; }
.mock-ring-inner > span {
font-size: 1.1rem;
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.mock-ring-inner > em {
font-style: normal;
font-size: 0.65rem;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.03em;
}
.mock-sla-reason {
font-size: 0.78rem;
color: var(--text);
text-align: center;
line-height: 1.4;
}
.mock-sla-reason strong { color: var(--text-heading); }
.mock-sla-foot {
padding-top: 0.5rem;
border-top: 1px solid var(--glass-border);
width: 100%;
text-align: center;
}
.mock-sla-check {
font-size: 0.72rem;
color: #2ED47A;
font-weight: 600;
}
/* ── 4. Cotización (PDF-like) ──────────────── */
.mock-quote {
padding: 1.3rem 1.3rem 1.4rem;
background: var(--bg-card);
}
.mock-quote-head {
display: flex;
align-items: center;
gap: 0.8rem;
padding-bottom: 1rem;
border-bottom: 2px solid var(--border);
}
.mock-quote-logo {
width: 40px; height: 40px;
border-radius: 10px;
background: linear-gradient(135deg, #3b82f6, #2ED47A);
flex-shrink: 0;
}
.mock-quote-meta {
display: flex;
flex-direction: column;
gap: 0.15rem;
flex: 1;
}
.mock-quote-num {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 0.95rem;
font-weight: 700;
color: var(--text-heading);
letter-spacing: 0.04em;
}
.mock-quote-date {
font-size: 0.7rem;
color: var(--text-muted);
}
.mock-quote-items {
padding: 0.9rem 0;
display: flex;
flex-direction: column;
gap: 0.55rem;
}
.mock-quote-item {
display: flex;
justify-content: space-between;
align-items: baseline;
font-size: 0.82rem;
padding: 0.35rem 0;
border-bottom: 1px dashed var(--border);
}
.mock-qi-desc { color: var(--text); }
.mock-qi-amount { font-weight: 600; color: var(--text-heading); font-variant-numeric: tabular-nums; }
.mock-quote-total {
display: flex;
justify-content: space-between;
align-items: baseline;
padding-top: 0.8rem;
margin-top: 0.5rem;
border-top: 2px solid var(--border);
}
.mock-quote-total > span { font-size: 0.8rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.mock-quote-total > strong {
font-size: 1.4rem;
color: var(--text-heading);
font-variant-numeric: tabular-nums;
}
.mock-quote-total em { font-style: normal; font-size: 0.75rem; color: var(--text-muted); margin-left: 0.2rem; }
.mock-quote-status {
margin-top: 1rem;
padding: 0.6rem 0.9rem;
background: rgba(46,212,122,0.1);
border: 1px solid rgba(46,212,122,0.25);
border-radius: 8px;
text-align: center;
}
.mock-status-approved {
font-size: 0.78rem;
font-weight: 600;
color: #2ED47A;
}
/* ── 5. Phone with push cards ──────────────── */
.mock-phone-wrap {
display: flex;
align-items: center;
justify-content: center;
padding: 1.5rem;
background: transparent;
border: 0;
box-shadow: none;
}
.mock-phone-wrap:hover { transform: none; }
.mock-phone {
width: 260px;
min-height: 420px;
background: linear-gradient(180deg, #0f172a, #1e293b);
border: 8px solid #0a0f1a;
border-radius: 38px;
position: relative;
padding: 38px 14px 24px;
box-shadow: 0 20px 60px rgba(0,0,0,0.35), 0 2px 8px rgba(0,0,0,0.15);
}
.mock-phone-notch {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 100px; height: 22px;
background: #0a0f1a;
border-radius: 0 0 18px 18px;
}
.mock-phone-screen {
display: flex;
flex-direction: column;
gap: 0.6rem;
}
.mock-push-card {
display: flex;
gap: 0.65rem;
padding: 0.7rem 0.75rem;
background: rgba(255,255,255,0.92);
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
color: #0a0f1a;
}
.mock-push-icon {
width: 32px; height: 32px;
border-radius: 8px;
background: linear-gradient(135deg, #3b82f6, #1769FF);
flex-shrink: 0;
}
.mock-push-icon.icon-green { background: linear-gradient(135deg, #2ED47A, #16a34a); }
.mock-push-icon.icon-yellow { background: linear-gradient(135deg, #f59e0b, #d97706); }
.mock-push-body { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; flex: 1; }
.mock-push-title {
font-size: 0.7rem;
font-weight: 700;
color: #0a0f1a;
}
.mock-push-text {
font-size: 0.78rem;
color: #1f2937;
line-height: 1.3;
}
.mock-push-time {
font-size: 0.62rem;
color: #6b7280;
margin-top: 0.2rem;
}
.mock-push-fade { opacity: 0.65; }
.anim-push { animation: pushSlide 0.4s ease-out both; }
.anim-push-2 { animation-delay: 0.6s; }
@keyframes pushSlide {
from { transform: translateY(-10px) scale(0.96); opacity: 0; }
to { transform: translateY(0) scale(1); opacity: 1; }
}
/* Responsive mockups — stack y compactan en móvil */
@media (max-width: 720px) {
.showcase-mock { min-height: 0; }
.mock-dashboard .mock-dash-grid { grid-template-columns: 1fr; gap: 0.5rem; padding: 0.8rem; }
.mock-kpi-value { font-size: 1.4rem; }
.mock-sla-ring { width: 110px; height: 110px; }
.mock-phone { width: 220px; min-height: 360px; }
}
/* ═══════════════════════════════════════════════════════════════════════
PRICING TOGGLE + SAVINGS BADGES
══════════════════════════════════════════════════════════════════════ */
.pricing-toggle {
display: inline-flex;
align-items: center;
padding: 4px;
background: var(--glass);
border: 1px solid var(--glass-border);
border-radius: 999px;
margin: 0 auto 2rem;
gap: 4px;
position: relative;
}
.pricing-toggle .toggle-btn {
padding: 0.55rem 1.3rem;
background: transparent;
color: var(--text-muted);
border: none;
border-radius: 999px;
font-size: 0.88rem;
font-weight: 600;
cursor: pointer;
font-family: inherit;
transition: all 0.2s;
display: inline-flex;
align-items: center;
gap: 0.4rem;
}
.pricing-toggle .toggle-btn:hover { color: var(--text-heading); }
.pricing-toggle .toggle-btn.toggle-active {
background: var(--bg-card);
color: var(--text-heading);
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.toggle-save {
font-size: 0.7rem;
font-weight: 700;
padding: 0.15rem 0.5rem;
background: rgba(46,212,122,0.15);
color: #2ED47A;
border-radius: 999px;
letter-spacing: 0.02em;
}
/* Center the toggle within section-head */
#pricing .pricing-toggle {
display: flex;
width: fit-content;
margin-left: auto;
margin-right: auto;
}
.pcard-savings {
margin: 0.5rem 0 1rem;
display: flex;
flex-direction: column;
gap: 0.25rem;
min-height: 2.5rem;
}
.save-badge {
display: inline-block;
padding: 0.3rem 0.7rem;
background: rgba(46,212,122,0.12);
color: #2ED47A;
border-radius: 999px;
font-size: 0.75rem;
font-weight: 700;
align-self: flex-start;
}
.save-hint {
font-size: 0.72rem;
color: var(--text-muted);
font-style: italic;
}
.price-from {
font-size: 0.85rem !important;
color: var(--text-muted) !important;
margin-right: 0.3rem;
font-weight: 500 !important;
}
/* Modo monthly — ocultar las savings badges (no aplica) */
.pricing-grid[data-billing="monthly"] [data-annual-only] { display: none; }
/* ═══════════════════════════════════════════════════════════════════════
HERO STATS STRIP — credibilidad rápida estilo pitch deck
══════════════════════════════════════════════════════════════════════ */
.hero-stats {
display: flex;
flex-wrap: wrap;
gap: 1.5rem 2.2rem;
margin-top: 1.8rem;
padding-top: 1.5rem;
border-top: 1px solid var(--glass-border);
}
.hero-stat {
display: flex;
flex-direction: column;
gap: 0.15rem;
}
.hero-stat-num {
font-size: 1.35rem;
font-weight: 800;
color: var(--text-heading);
letter-spacing: -0.01em;
font-variant-numeric: tabular-nums;
}
.hero-stat-num .gradient-text { display: inline; }
.hero-stat-label {
font-size: 0.76rem;
color: var(--text-muted);
font-weight: 500;
line-height: 1.3;
}
/* ═══════════════════════════════════════════════════════════════════════
WHY NOW — mini-sección pitch-deck (timing de mercado)
══════════════════════════════════════════════════════════════════════ */
.why-now-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
margin-top: 2rem;
}
@media (max-width: 768px) { .why-now-grid { grid-template-columns: 1fr; } }
.why-now-card {
padding: 1.3rem 1.2rem;
position: relative;
}
.why-now-num {
font-size: 0.78rem;
font-weight: 700;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: 0.6rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.why-now-num::before {
content: '';
display: inline-block;
width: 24px;
height: 2px;
background: linear-gradient(90deg, #3b82f6, #2ED47A);
}
.why-now-card h3 {
font-size: 1.05rem;
font-weight: 700;
color: var(--text-heading);
margin-bottom: 0.5rem;
line-height: 1.3;
}
.why-now-card p {
font-size: 0.88rem;
color: var(--text);
line-height: 1.55;
}
.why-now-card p strong { color: var(--text-heading); }
/* ═══════════════════════════════════════════════════════════════════════
PRICING V2 — calculadora + toggle pill + currency + matrix + vs + FAQ
Rewrite del 2026-04. Reemplaza .pricing-toggle (viejo) por un set de
controles visuales + bloques pedagógicos debajo de las cards.
══════════════════════════════════════════════════════════════════════ */
/* ─── Calculadora de plan sugerido ───────────────────────────────────── */
.pricing-calc {
max-width: 760px;
margin: 0 auto 2.5rem;
padding: 1.5rem 1.75rem;
background: var(--glass);
border: 1px solid var(--glass-border);
border-radius: 20px;
backdrop-filter: blur(8px);
}
.calc-header {
display: flex;
flex-direction: column;
gap: 0.2rem;
margin-bottom: 1.25rem;
text-align: center;
}
.calc-label {
font-size: 0.95rem;
font-weight: 700;
color: var(--text-heading);
}
.calc-sub {
font-size: 0.78rem;
color: var(--text-muted);
}
.calc-fields {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.25rem 1.75rem;
margin-bottom: 1.25rem;
}
.calc-field-label {
display: flex;
align-items: baseline;
justify-content: space-between;
margin-bottom: 0.5rem;
}
.calc-field-label span {
font-size: 0.82rem;
color: var(--text);
}
.calc-field-label output {
font-size: 1.1rem;
font-weight: 800;
color: var(--accent-2);
font-variant-numeric: tabular-nums;
}
.calc-slider {
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 6px;
background: linear-gradient(to right, var(--accent-2) 0%, var(--accent-2) 30%, rgba(120,120,120,0.2) 30%, rgba(120,120,120,0.2) 100%);
border-radius: 999px;
outline: none;
cursor: pointer;
}
.calc-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
background: #fff;
border: 3px solid var(--accent-2);
border-radius: 50%;
cursor: pointer;
transition: transform 0.15s;
box-shadow: 0 2px 8px rgba(59,139,246,0.3);
}
.calc-slider::-webkit-slider-thumb:hover { transform: scale(1.15); }
.calc-slider::-moz-range-thumb {
width: 20px;
height: 20px;
background: #fff;
border: 3px solid var(--accent-2);
border-radius: 50%;
cursor: pointer;
}
.calc-scale {
display: flex;
justify-content: space-between;
margin-top: 0.35rem;
font-size: 0.7rem;
color: var(--text-faint);
}
.calc-result {
display: flex;
align-items: center;
justify-content: center;
gap: 0.6rem;
padding: 0.8rem 1.25rem;
background: rgba(59,139,246,0.08);
border: 1px solid rgba(59,139,246,0.25);
border-radius: 14px;
}
.calc-result-label {
font-size: 0.85rem;
color: var(--text-muted);
}
.calc-result-plan {
font-size: 1.1rem;
font-weight: 800;
color: var(--accent-2);
letter-spacing: -0.01em;
}
@media (max-width: 640px) {
.calc-fields { grid-template-columns: 1fr; }
.pricing-calc { padding: 1.25rem 1rem; }
}
/* ─── Controles: toggle pill + currency ──────────────────────────────── */
.pricing-controls {
display: flex;
justify-content: center;
align-items: center;
gap: 1rem;
flex-wrap: wrap;
margin-bottom: 2.5rem;
}
/* Toggle pill slider (reemplaza .pricing-toggle viejo) */
.pricing-toggle-v2 {
position: relative;
display: inline-flex;
align-items: center;
padding: 4px;
background: var(--glass);
border: 1px solid var(--glass-border);
border-radius: 999px;
backdrop-filter: blur(8px);
}
.pricing-toggle-v2 input[type="radio"] {
position: absolute;
opacity: 0;
pointer-events: none;
}
.toggle-v2-label {
position: relative;
z-index: 2;
padding: 0.55rem 1.3rem;
font-size: 0.88rem;
font-weight: 600;
color: var(--text-muted);
cursor: pointer;
border-radius: 999px;
transition: color 0.25s;
display: inline-flex;
align-items: center;
gap: 0.4rem;
}
.pricing-toggle-v2 input:checked + .toggle-v2-label {
color: var(--text-heading);
}
.toggle-v2-pill {
position: absolute;
z-index: 1;
top: 4px;
bottom: 4px;
width: calc(50% - 4px);
background: var(--bg-card);
border-radius: 999px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
transition: left 0.28s cubic-bezier(0.4, 0, 0.2, 1);
/* Position 50% = right side (annual) since annual is default checked */
left: 50%;
}
/* When monthly is checked, pill moves left */
.pricing-toggle-v2 input#billMonthly:checked ~ .toggle-v2-pill {
left: 4px;
}
.toggle-v2-save {
font-size: 0.68rem;
font-weight: 700;
padding: 0.15rem 0.45rem;
background: rgba(46,212,122,0.15);
color: #2ED47A;
border-radius: 999px;
letter-spacing: 0.02em;
}
/* Currency selector */
.pricing-currency {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0 0.9rem;
height: 42px;
background: var(--glass);
border: 1px solid var(--glass-border);
border-radius: 999px;
color: var(--text-muted);
backdrop-filter: blur(8px);
}
.pricing-currency svg { color: var(--text-muted); flex-shrink: 0; }
.currency-select {
background: transparent;
border: none;
color: var(--text-heading);
font-size: 0.85rem;
font-weight: 600;
font-family: inherit;
outline: none;
cursor: pointer;
padding-right: 0.25rem;
}
.currency-select option {
background: var(--bg-card);
color: var(--text-heading);
}
/* ─── Growth card: highlight más agresivo ────────────────────────────── */
.pcard-featured {
position: relative;
transform: translateY(-6px) scale(1.015);
border: 1.5px solid rgba(59,139,246,0.45) !important;
background: linear-gradient(180deg, rgba(59,139,246,0.05), rgba(59,139,246,0.02)) !important;
box-shadow:
0 0 0 1px rgba(59,139,246,0.15),
0 10px 40px -10px rgba(59,139,246,0.35),
0 20px 60px -20px rgba(59,139,246,0.25) !important;
}
.pcard-featured::before {
content: '';
position: absolute;
inset: -1.5px;
border-radius: inherit;
padding: 1.5px;
background: linear-gradient(135deg, rgba(59,139,246,0.6), rgba(91,160,255,0.2), rgba(59,139,246,0.6));
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: 0.5;
pointer-events: none;
animation: featuredGlow 4s ease-in-out infinite;
}
@keyframes featuredGlow {
0%, 100% { opacity: 0.35; }
50% { opacity: 0.75; }
}
.pcard-featured .pcard-badge {
background: linear-gradient(135deg, var(--accent-2), #5ba0ff);
color: #fff;
border: none;
box-shadow: 0 4px 14px rgba(59,139,246,0.45);
font-weight: 700;
}
/* Card sugerida por la calculadora — outline dorado opcional */
.pcard.pcard-suggested {
outline: 2px solid rgba(255,215,0,0.55);
outline-offset: 3px;
}
.pcard.pcard-suggested::after {
content: 'Te recomendamos';
position: absolute;
top: -12px;
left: 50%;
transform: translateX(-50%);
background: linear-gradient(135deg, #ffd700, #ffaa00);
color: #1a1a1a;
font-size: 0.68rem;
font-weight: 800;
padding: 0.25rem 0.7rem;
border-radius: 999px;
letter-spacing: 0.03em;
text-transform: uppercase;
box-shadow: 0 3px 10px rgba(255,215,0,0.4);
white-space: nowrap;
}
.pcard { position: relative; } /* aseguramos anchor para ::after */
/* ─── vs Competitors ─────────────────────────────────────────────────── */
.vs-competitors {
margin-top: 2.5rem;
padding-top: 2rem;
border-top: 1px solid var(--border);
}
.vs-head {
text-align: center;
margin-bottom: 2rem;
}
.vs-head h3 {
font-size: 1.6rem;
font-weight: 800;
letter-spacing: -0.02em;
color: var(--text-heading);
margin-bottom: 0.5rem;
}
.vs-head p {
font-size: 0.95rem;
color: var(--text-muted);
}
.vs-head p strong { color: var(--text-heading); }
.vs-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.25rem;
align-items: stretch;
}
.vs-card {
padding: 1.5rem 1.4rem;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 18px;
display: flex;
flex-direction: column;
}
.vs-card.vs-them {
opacity: 0.72;
filter: saturate(0.85);
}
.vs-card.vs-us {
background: linear-gradient(180deg, rgba(59,139,246,0.08), rgba(59,139,246,0.02));
border: 1.5px solid rgba(59,139,246,0.4);
box-shadow: 0 10px 30px -10px rgba(59,139,246,0.3);
position: relative;
}
.vs-logo {
font-size: 0.88rem;
font-weight: 700;
color: var(--text-muted);
margin-bottom: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.vs-card.vs-us .vs-logo { display: none; }
.vs-badge {
display: inline-block;
padding: 0.3rem 0.7rem;
background: linear-gradient(135deg, var(--accent-2), #5ba0ff);
color: #fff;
font-size: 0.72rem;
font-weight: 800;
border-radius: 999px;
letter-spacing: 0.04em;
margin-bottom: 0.75rem;
align-self: flex-start;
}
.vs-price {
font-size: 2rem;
font-weight: 800;
letter-spacing: -0.03em;
color: var(--text-heading);
margin-bottom: 1rem;
}
.vs-price small {
font-size: 0.8rem;
font-weight: 500;
color: var(--text-muted);
margin-left: 0.15rem;
}
.vs-features {
list-style: none;
display: flex;
flex-direction: column;
gap: 0.5rem;
flex: 1;
margin-bottom: 0;
}
.vs-features li {
font-size: 0.82rem;
color: var(--text-muted);
padding-left: 1.2rem;
position: relative;
line-height: 1.5;
}
.vs-features li::before {
content: '';
position: absolute;
left: 0;
top: 0.5em;
width: 5px;
height: 5px;
border-radius: 50%;
background: currentColor;
opacity: 0.4;
}
.vs-card.vs-us .vs-features li { color: var(--text); }
.vs-card.vs-us .vs-features li::before { background: var(--accent-2); opacity: 1; }
.vs-savings {
margin-top: 1rem;
padding: 0.65rem 0.9rem;
background: rgba(46,212,122,0.12);
color: #2ED47A;
border-radius: 10px;
font-size: 0.82rem;
font-weight: 700;
text-align: center;
}
@media (max-width: 860px) {
.vs-grid { grid-template-columns: 1fr; }
.vs-card.vs-us { order: -1; } /* móvil: mostrar NODUX primero */
}
/* ─── Feature matrix ─────────────────────────────────────────────────── */
.feature-matrix {
margin-top: 2.5rem;
padding-top: 2rem;
border-top: 1px solid var(--border);
}
.feature-matrix h3 {
font-size: 1.6rem;
font-weight: 800;
letter-spacing: -0.02em;
color: var(--text-heading);
text-align: center;
margin-bottom: 0.4rem;
}
.matrix-sub {
text-align: center;
font-size: 0.85rem;
color: var(--text-muted);
margin-bottom: 1.75rem;
}
.matrix-wrap {
overflow-x: auto;
border: 1px solid var(--border);
border-radius: 16px;
background: var(--bg-card);
}
.matrix-table {
width: 100%;
border-collapse: collapse;
min-width: 640px;
font-size: 0.86rem;
}
.matrix-table thead th {
padding: 1rem 0.85rem;
background: var(--glass);
color: var(--text-heading);
font-weight: 700;
text-align: center;
font-size: 0.85rem;
border-bottom: 1px solid var(--border);
position: sticky;
top: 0;
z-index: 1;
}
.matrix-table thead th:first-child {
text-align: left;
padding-left: 1.25rem;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--text-muted);
}
.matrix-table th.mtx-featured,
.matrix-table td.mtx-featured {
background: rgba(59,139,246,0.06);
}
.matrix-table thead th.mtx-featured {
background: rgba(59,139,246,0.12);
color: var(--accent-2);
}
.matrix-table tbody tr {
border-bottom: 1px solid var(--border);
}
.matrix-table tbody tr:last-child { border-bottom: none; }
.matrix-table td {
padding: 0.8rem 0.85rem;
color: var(--text);
text-align: center;
vertical-align: middle;
}
.matrix-table td:first-child {
text-align: left;
padding-left: 1.25rem;
color: var(--text-heading);
font-weight: 500;
}
.matrix-table td.mtx-no { color: var(--text-faint); }
.matrix-table td.mtx-beta {
font-size: 0.72rem;
font-weight: 700;
color: #d97706;
text-transform: uppercase;
letter-spacing: 0.03em;
}
tr.mtx-group td {
background: var(--glass);
font-size: 0.72rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-muted);
padding: 0.65rem 1.25rem !important;
text-align: left !important;
}
/* ─── FAQ ────────────────────────────────────────────────────────────── */
.pricing-faq {
margin-top: 2.5rem;
padding-top: 2rem;
border-top: 1px solid var(--border);
max-width: 760px;
margin-left: auto;
margin-right: auto;
}
.pricing-faq h3 {
font-size: 1.6rem;
font-weight: 800;
letter-spacing: -0.02em;
color: var(--text-heading);
text-align: center;
margin-bottom: 1.75rem;
}
.faq-list {
display: flex;
flex-direction: column;
gap: 0.6rem;
}
.faq-item {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 12px;
overflow: hidden;
transition: border-color 0.2s;
}
.faq-item[open] { border-color: rgba(59,139,246,0.3); }
.faq-item summary {
cursor: pointer;
padding: 1rem 1.25rem;
font-weight: 600;
color: var(--text-heading);
font-size: 0.92rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
list-style: none;
transition: background 0.15s;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { background: var(--glass); }
.faq-item summary svg {
transition: transform 0.25s;
flex-shrink: 0;
color: var(--text-muted);
}
.faq-item[open] summary svg { transform: rotate(180deg); }
.faq-item p {
padding: 0 1.25rem 1.1rem;
color: var(--text);
line-height: 1.6;
font-size: 0.88rem;
margin: 0;
}
/* Hide legacy .pricing-toggle si quedara en algún caché — evita doble toggle */
.pricing-toggle:not(.pricing-toggle-v2) { display: none; }
/* ─── CR flag accents: protagonismo tico dentro del framing LatAm ────── */
.badge-flag {
display: inline-block;
margin-right: 0.2rem;
font-size: 1.05em;
transform: translateY(1px);
}
/* El gradient-text de CR en hero-stat queda mejor sin truncar la bandera */
.hero-stat .gradient-text:has(> :first-child) { letter-spacing: -0.01em; }
/* ═══════════════════════════════════════════════════════════════════════
MÓDULOS OPERATIVOS — sección "Más allá del ticket"
Reglas de tema:
* Fondos y bordes usan vars (--bg-card, --border) para seguir el theme.
* Textos usan var(--text-heading) / var(--text) / var(--text-muted) —
NUNCA color hardcoded que pueda quedar blanco-sobre-blanco en modo
claro o negro-sobre-negro en oscuro.
* Los fondos coloreados de los íconos usan rgba con opacidad baja
sobre el mismo accent HEX, funciona igual en ambos themes.
═══════════════════════════════════════════════════════════════════════ */
.modules-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.1rem;
margin-top: 1rem;
}
/* La card "wide" (costo por falla) span 2 cols en desktop. */
.module-card-wide { grid-column: 1 / -1; }
.module-card {
padding: 1.6rem 1.5rem;
border-radius: var(--radius-lg);
transition: border-color 0.25s, transform 0.25s, background 0.25s;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.module-card:hover {
border-color: var(--border-hover);
background: var(--bg-card-hover);
transform: translateY(-2px);
}
/* Layout "wide" — ícono a la izquierda, contenido + preview a la derecha */
.module-card-wide {
flex-direction: row;
align-items: flex-start;
gap: 1.5rem;
}
.module-card-wide .module-card-body {
flex: 1;
display: flex;
flex-direction: column;
gap: 0.7rem;
min-width: 0;
}
.module-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 12px;
flex-shrink: 0;
/* Default: tono accent azul */
background: rgba(59,139,246,0.10);
color: var(--accent);
}
/* Variantes por color — cada una forza un rgba con su accent para que
funcione idéntico en dark/light. La opacidad 0.10 dark → 0.14 light
compensa que sobre blanco se necesita más pigmento para verse igual. */
.module-icon-green { background: rgba(46,212,122,0.12); color: #22c55e; }
.module-icon-purple { background: rgba(147,51,234,0.12); color: #a855f7; }
.module-icon-blue { background: rgba(59,139,246,0.12); color: #1769FF; }
.module-icon-amber { background: rgba(245,158,11,0.14); color: #f59e0b; }
.module-icon-teal { background: rgba(20,184,166,0.12); color: #14b8a6; }
[data-theme="light"] .module-icon-green { background: rgba(46,212,122,0.16); }
[data-theme="light"] .module-icon-purple { background: rgba(147,51,234,0.14); }
[data-theme="light"] .module-icon-blue { background: rgba(59,139,246,0.14); }
[data-theme="light"] .module-icon-amber { background: rgba(245,158,11,0.18); }
[data-theme="light"] .module-icon-teal { background: rgba(20,184,166,0.14); }
.module-card h3 {
font-size: 1.05rem;
font-weight: 700;
color: var(--text-heading);
letter-spacing: -0.01em;
margin: 0;
}
.module-card p {
font-size: 0.88rem;
color: var(--text-muted);
line-height: 1.65;
margin: 0;
}
.module-card strong {
color: var(--text-heading);
font-weight: 600;
}
/* Lista de bullets de cada módulo — puntos brand-colored para marcar jerarquía
vs el texto descriptivo. */
.module-points {
list-style: none;
padding: 0;
margin: 0.15rem 0 0 0;
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.module-points li {
font-size: 0.82rem;
color: var(--text-muted);
line-height: 1.55;
padding-left: 1.1rem;
position: relative;
}
.module-points li::before {
content: '';
position: absolute;
left: 0;
top: 0.62em;
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--accent-2);
}
/* Preview embed del cruce gastos × clasificación. Pequeña "mini tabla"
que transmite el valor concreto del feature. */
.module-preview {
margin-top: 0.4rem;
/* --bg-alt da una capa visible debajo de la glass card en ambos themes:
en dark es levemente más clara que la card; en light es levemente
más oscura que el glass blancuzco. Sin esto, en light mode el preview
se mezclaba con la card y parecía plano. */
background: var(--bg-alt);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 0.5rem 0.75rem;
display: flex;
flex-direction: column;
}
.module-preview-row {
display: grid;
grid-template-columns: 1.5fr auto auto;
gap: 0.9rem;
align-items: baseline;
padding: 0.55rem 0.2rem;
border-bottom: 1px dashed var(--border);
font-size: 0.82rem;
}
.module-preview-row:last-child { border-bottom: none; }
.module-preview-cat {
color: var(--text-heading);
font-weight: 600;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.module-preview-tickets {
color: var(--text-muted);
font-variant-numeric: tabular-nums;
font-size: 0.76rem;
}
.module-preview-cost {
color: var(--accent-2);
font-weight: 700;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.module-preview-cost em {
font-style: normal;
color: var(--text-faint);
font-weight: 500;
font-size: 0.72rem;
margin-left: 0.3rem;
}
/* ─── Responsive ──────────────────────────── */
@media (max-width: 900px) {
.modules-grid { grid-template-columns: 1fr; }
.module-card-wide { grid-column: auto; flex-direction: column; }
.module-preview-row {
grid-template-columns: 1fr auto;
grid-template-areas:
"cat cost"
"tickets cost";
gap: 0.1rem 0.6rem;
}
.module-preview-cat { grid-area: cat; }
.module-preview-tickets { grid-area: tickets; }
.module-preview-cost { grid-area: cost; align-self: center; }
}
/* ═══════════════════════════════════════════════
v4 — Polish pass: bigger desktop logo, ambient
parallax blobs, reveal variants, spotlight cards,
magnetic buttons, count-up.
═══════════════════════════════════════════════ */
/* ─── Slightly bigger logo on desktop ────────── */
@media (min-width: 900px) {
.nav-logo-img { height: 38px; }
.nav { padding: 0.78rem 0; }
}
/* ─── Ambient parallax blobs ─────────────────── */
.ambient-blobs {
position: fixed; inset: 0;
pointer-events: none;
z-index: 0;
overflow: hidden;
}
.ambient-blob {
position: absolute;
width: 55vw; height: 55vw;
max-width: 760px; max-height: 760px;
border-radius: 50%;
filter: blur(90px);
will-change: transform;
transition: opacity 0.6s ease;
}
.ambient-blob--1 {
top: -12%; left: -12%;
background: radial-gradient(circle, rgba(59,139,246,0.55) 0%, transparent 62%);
opacity: 0.35;
}
.ambient-blob--2 {
top: 38%; right: -18%;
background: radial-gradient(circle, rgba(46,212,122,0.45) 0%, transparent 62%);
opacity: 0.22;
}
.ambient-blob--3 {
bottom: -14%; left: 28%;
background: radial-gradient(circle, rgba(255,107,53,0.42) 0%, transparent 62%);
opacity: 0.18;
}
[data-theme="light"] .ambient-blob--1 { opacity: 0.18; }
[data-theme="light"] .ambient-blob--2 { opacity: 0.12; }
[data-theme="light"] .ambient-blob--3 { opacity: 0.10; }
/* Keep content above the ambient layer */
.nav, .section, .hero, footer { position: relative; z-index: 1; }
/* ─── Reveal variants ────────────────────────── */
.anim-blur { filter: blur(14px); }
.anim-blur.visible { filter: blur(0); }
.anim-scale { transform: translateY(24px) scale(0.96); }
.anim-scale.visible { transform: translateY(0) scale(1); }
.anim-stagger > * {
opacity: 0; transform: translateY(18px);
transition:
opacity 0.6s cubic-bezier(0.16,1,0.3,1),
transform 0.6s cubic-bezier(0.16,1,0.3,1);
}
.anim-stagger.visible > * { opacity: 1; transform: translateY(0); }
/* Preserve the lifted/scaled state of the featured pricing card — the
stagger rule above would otherwise collapse its translateY(-6px) scale. */
.anim-stagger.visible > .pcard-featured { transform: translateY(-6px) scale(1.015); }
.anim-stagger.visible > *:nth-child(1) { transition-delay: 0ms; }
.anim-stagger.visible > *:nth-child(2) { transition-delay: 80ms; }
.anim-stagger.visible > *:nth-child(3) { transition-delay: 160ms; }
.anim-stagger.visible > *:nth-child(4) { transition-delay: 240ms; }
.anim-stagger.visible > *:nth-child(5) { transition-delay: 320ms; }
.anim-stagger.visible > *:nth-child(6) { transition-delay: 400ms; }
.anim-stagger.visible > *:nth-child(7) { transition-delay: 480ms; }
.anim-stagger.visible > *:nth-child(8) { transition-delay: 560ms; }
/* ─── Spotlight cursor on cards ──────────────── */
/* Scope: cards that don't already consume ::before (avoids clashing with
.pcard-featured::before and .pcard-suggested::after). */
.fcard, .pain-card, .step, .showcase-mock, .module-card {
--spot-x: 50%;
--spot-y: 50%;
--spot-opacity: 0;
position: relative;
overflow: hidden;
}
.fcard::after,
.pain-card::after,
.step::after,
.showcase-mock::after,
.module-card::after {
content: '';
position: absolute; inset: 0;
border-radius: inherit;
pointer-events: none;
background: radial-gradient(
circle 260px at var(--spot-x) var(--spot-y),
rgba(59,139,246,0.22),
transparent 60%
);
opacity: var(--spot-opacity);
transition: opacity 0.3s ease;
z-index: 0;
}
[data-theme="light"] .fcard::after,
[data-theme="light"] .pain-card::after,
[data-theme="light"] .step::after,
[data-theme="light"] .showcase-mock::after,
[data-theme="light"] .module-card::after {
background: radial-gradient(
circle 260px at var(--spot-x) var(--spot-y),
rgba(59,139,246,0.12),
transparent 60%
);
}
/* Ensure inner content sits above the spotlight layer */
.fcard > *,
.pain-card > *,
.step > *,
.showcase-mock > *,
.module-card > * { position: relative; z-index: 1; }
/* ─── Magnetic buttons ───────────────────────── */
.magnetic {
--mx: 0px;
--my: 0px;
transform: translate(var(--mx), var(--my));
transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
will-change: transform;
}
/* ─── Count-up stability (prevent layout jump) ── */
.countup { font-variant-numeric: tabular-nums; }
/* ─── Heading blur-in ────────────────────────── */
/* Apply filter transition to any .anim element, so `anim-blur` works. */
.anim { transition:
opacity 0.65s cubic-bezier(0.16,1,0.3,1),
transform 0.65s cubic-bezier(0.16,1,0.3,1),
filter 0.7s cubic-bezier(0.16,1,0.3,1);
}
/* Section headings blur in by default for a more produced feel. */
.section-head.anim { filter: blur(10px); }
.section-head.anim.visible { filter: blur(0); }
/* ─── Glitch — startup/repair vibe ───────────── */
/* Two flavors:
.glitch-once — plays once when .visible is added (good on hero h1)
.glitch-chip — small status pill that flickers every few seconds
.glitch-hover — RGB split on hover */
.glitch-once,
.glitch-hover,
.glitch-chip {
position: relative;
display: inline-block;
}
.glitch-once::before, .glitch-once::after,
.glitch-hover::before, .glitch-hover::after,
.glitch-chip::before, .glitch-chip::after {
content: attr(data-text);
position: absolute;
top: 0; left: 0;
width: 100%;
pointer-events: none;
background: none;
-webkit-background-clip: initial;
background-clip: initial;
-webkit-text-fill-color: currentColor;
opacity: 0;
mix-blend-mode: screen;
}
.glitch-once::before, .glitch-hover::before, .glitch-chip::before {
color: #1769FF;
text-shadow: 0 0 1px rgba(59,139,246,0.6);
}
.glitch-once::after, .glitch-hover::after, .glitch-chip::after {
color: #FF6B35;
text-shadow: 0 0 1px rgba(255,107,53,0.6);
}
/* One-shot glitch when parent .anim reveals */
.anim.visible .glitch-once::before,
.glitch-once.visible::before { animation: glitchOnceA 1.2s steps(1, end) 0.2s 1 both; }
.anim.visible .glitch-once::after,
.glitch-once.visible::after { animation: glitchOnceB 1.2s steps(1, end) 0.2s 1 both; }
@keyframes glitchOnceA {
0% { opacity: 0; transform: translate(0, 0); clip-path: inset(0 0 0 0); }
10% { opacity: 0.9; transform: translate(-3px, -1px); clip-path: inset(0 0 65% 0); }
20% { opacity: 0.6; transform: translate(2px, 1px); clip-path: inset(45% 0 15% 0); }
30% { opacity: 0.85; transform: translate(-2px, 0); clip-path: inset(10% 0 55% 0); }
45% { opacity: 0.4; transform: translate(1px, -1px); clip-path: inset(65% 0 5% 0); }
60% { opacity: 0.2; transform: translate(-1px, 0); clip-path: inset(25% 0 40% 0); }
100% { opacity: 0; transform: translate(0, 0); }
}
@keyframes glitchOnceB {
0% { opacity: 0; transform: translate(0, 0); clip-path: inset(0 0 0 0); }
15% { opacity: 0.8; transform: translate(2px, 1px); clip-path: inset(55% 0 10% 0); }
25% { opacity: 0.5; transform: translate(-2px, -1px); clip-path: inset(10% 0 60% 0); }
40% { opacity: 0.85; transform: translate(3px, 0); clip-path: inset(40% 0 20% 0); }
55% { opacity: 0.3; transform: translate(-1px, 1px); clip-path: inset(70% 0 0 0); }
100% { opacity: 0; transform: translate(0, 0); }
}
/* Hover glitch for interactive elements */
.glitch-hover:hover::before { animation: glitchOnceA 0.6s steps(1, end) 1 both; }
.glitch-hover:hover::after { animation: glitchOnceB 0.6s steps(1, end) 1 both; }
/* Small monospace status chip, flickers every few seconds */
.glitch-chip {
display: inline-flex; align-items: center; gap: 0.45rem;
padding: 0.22rem 0.7rem;
border-radius: 999px;
font-family: ui-monospace, SFMono-Regular, 'JetBrains Mono', Menlo, monospace;
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
background: rgba(46,212,122,0.08);
color: var(--accent-2);
border: 1px solid rgba(46,212,122,0.25);
}
.glitch-chip::before, .glitch-chip::after {
padding: inherit;
letter-spacing: inherit;
font-family: inherit;
font-size: inherit;
font-weight: inherit;
text-transform: inherit;
}
.glitch-chip::before { animation: glitchChipA 6s steps(1, end) infinite; }
.glitch-chip::after { animation: glitchChipB 6s steps(1, end) infinite; }
.glitch-chip .dot {
width: 6px; height: 6px; border-radius: 50%;
background: var(--accent-2);
box-shadow: 0 0 8px rgba(46,212,122,0.8);
animation: chipPulse 1.8s ease-in-out infinite;
}
@keyframes chipPulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.5; transform: scale(1.3); }
}
@keyframes glitchChipA {
0%, 93%, 100% { opacity: 0; transform: translate(0); clip-path: inset(0 0 0 0); }
94% { opacity: 0.7; transform: translate(-2px, 0); clip-path: inset(0 0 55% 0); }
95% { opacity: 0.4; transform: translate(1px, 0); clip-path: inset(50% 0 10% 0); }
96% { opacity: 0.6; transform: translate(-1px, 0); clip-path: inset(10% 0 55% 0); }
97% { opacity: 0; }
}
@keyframes glitchChipB {
0%, 93%, 100% { opacity: 0; transform: translate(0); clip-path: inset(0 0 0 0); }
94% { opacity: 0.65; transform: translate(2px, 0); clip-path: inset(55% 0 0 0); }
95% { opacity: 0.35; transform: translate(-1px, 0); clip-path: inset(5% 0 65% 0); }
96% { opacity: 0.55; transform: translate(1px, 0); clip-path: inset(40% 0 15% 0); }
97% { opacity: 0; }
}
/* Reduced motion: kill all glitch animations, keep base text */
@media (prefers-reduced-motion: reduce) {
.glitch-once::before, .glitch-once::after,
.glitch-hover::before, .glitch-hover::after,
.glitch-chip::before, .glitch-chip::after,
.glitch-chip .dot { animation: none !important; opacity: 0 !important; }
.section-head.anim { filter: none; }
}
/* ═══════════════════════════════════════════════
v4.1 — Hero tightening + live motion.
Pulls the hero content up, adds animated gradient
sweep on h1 gradient text, breathing hero glow,
and floating status pills for a live-product feel.
═══════════════════════════════════════════════ */
/* ─── Tighten hero vertically ────────────────── */
.hero {
padding: 5rem 0 2.5rem !important;
min-height: auto !important;
align-items: flex-start !important;
}
@media (min-width: 769px) {
.hero { padding-top: 6rem !important; padding-bottom: 3rem !important; }
}
/* ─── Animated gradient sweep (hero only) ────── */
.hero .gradient-text {
background: linear-gradient(120deg, #1769FF, #2ED47A, #FF6B35, #1769FF);
background-size: 220% 220%;
-webkit-background-clip: text;
background-clip: text;
animation: gradientSweep 9s ease-in-out infinite;
}
@keyframes gradientSweep {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
/* ─── Breathing hero glow ────────────────────── */
.hero-glow {
animation: glowBreathe 8s ease-in-out infinite;
will-change: transform, opacity;
}
@keyframes glowBreathe {
0%, 100% {
transform: translateX(-50%) scale(1);
opacity: 1;
}
50% {
transform: translateX(-50%) scale(1.15);
opacity: 0.7;
}
}
/* ─── Floating status pills (product "alive" feel) */
.hero-floaters {
position: absolute; inset: 0;
pointer-events: none;
z-index: 1;
overflow: hidden;
}
.float-card {
position: absolute;
display: inline-flex; align-items: center; gap: 0.5rem;
padding: 0.42rem 0.8rem;
border-radius: 999px;
background: var(--glass);
border: 1px solid var(--glass-border);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 0.7rem;
font-weight: 500;
color: var(--text-muted);
white-space: nowrap;
opacity: 0;
will-change: transform, opacity;
}
.float-card .fc-dot {
width: 6px; height: 6px; border-radius: 50%;
flex-shrink: 0;
}
.float-card .fc-dot--blue { background: var(--accent); box-shadow: 0 0 8px rgba(59,139,246,0.6); }
.float-card .fc-dot--green { background: var(--accent-2); box-shadow: 0 0 8px rgba(46,212,122,0.6); }
.float-card .fc-dot--amber { background: #ffb347; box-shadow: 0 0 8px rgba(255,179,71,0.6); }
.float-card strong { color: var(--text-heading); font-weight: 600; }
.float-1 {
top: 14%; left: 4%;
animation: drift1 18s ease-in-out 0.8s infinite;
}
.float-2 {
top: 58%; right: 5%;
animation: drift2 22s ease-in-out 2.2s infinite;
}
.float-3 {
top: 34%; right: 8%;
animation: drift3 20s ease-in-out 4s infinite;
}
@keyframes drift1 {
0%, 100% { transform: translate(0, 0); opacity: 0; }
8% { opacity: 0.8; }
50% { transform: translate(22px, -18px); opacity: 0.8; }
92% { opacity: 0.8; }
}
@keyframes drift2 {
0%, 100% { transform: translate(0, 0); opacity: 0; }
8% { opacity: 0.75; }
50% { transform: translate(-28px, -14px); opacity: 0.75; }
92% { opacity: 0.75; }
}
@keyframes drift3 {
0%, 100% { transform: translate(0, 0); opacity: 0; }
8% { opacity: 0.7; }
50% { transform: translate(-18px, 22px); opacity: 0.7; }
92% { opacity: 0.7; }
}
/* Hide floaters on narrow screens (too cramped next to content) */
@media (max-width: 900px) {
.hero-floaters { display: none; }
}
/* Reduced motion: freeze to static state */
@media (prefers-reduced-motion: reduce) {
.hero .gradient-text { animation: none; }
.hero-glow { animation: none; }
.float-card { animation: none; opacity: 0; }
}
/* ═══════════════════════════════════════════════
WhatsApp floating CTA — pill + círculo conectado.
Texto "Comunidad →" siempre visible para que quede
claro que lleva al grupo, no a un chat directo.
═══════════════════════════════════════════════ */
.wa-fab {
position: fixed;
bottom: 22px;
right: 22px;
z-index: 200;
display: inline-flex;
align-items: center;
gap: 6px;
text-decoration: none;
transition: transform 0.25s cubic-bezier(0.16,1,0.3,1);
}
.wa-fab:hover { transform: translateY(-2px); }
.wa-fab:active { transform: translateY(0); }
/* Left: pill with label */
.wa-fab-pill {
display: inline-flex;
align-items: center;
gap: 0.4rem;
height: 44px;
padding: 0 14px 0 18px;
border-radius: 22px;
background: #25D366;
color: #0a1a10;
font-weight: 800;
font-size: 0.86rem;
letter-spacing: 0.01em;
box-shadow:
0 8px 20px -4px rgba(37,211,102,0.5),
0 2px 6px rgba(0,0,0,0.15),
inset 0 1px 0 rgba(255,255,255,0.25);
transition: background 0.2s, box-shadow 0.2s;
white-space: nowrap;
}
.wa-fab:hover .wa-fab-pill {
background: #1ebe5b;
box-shadow:
0 12px 28px -4px rgba(37,211,102,0.6),
0 3px 8px rgba(0,0,0,0.18),
inset 0 1px 0 rgba(255,255,255,0.25);
}
.wa-fab-label { line-height: 1; }
.wa-fab-arrow {
display: inline-block;
font-size: 1rem;
line-height: 1;
transition: transform 0.25s cubic-bezier(0.16,1,0.3,1);
}
.wa-fab:hover .wa-fab-arrow { transform: translateX(3px); }
/* Right: circular WhatsApp button */
.wa-fab-circle {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
border-radius: 50%;
background: #25D366;
color: #fff;
box-shadow:
0 10px 28px rgba(37,211,102,0.5),
0 4px 12px rgba(0,0,0,0.18),
inset 0 1px 0 rgba(255,255,255,0.2);
transition: background 0.2s, transform 0.25s, box-shadow 0.2s;
}
.wa-fab:hover .wa-fab-circle {
background: #1ebe5b;
transform: scale(1.05);
box-shadow:
0 14px 34px rgba(37,211,102,0.6),
0 6px 14px rgba(0,0,0,0.2),
inset 0 1px 0 rgba(255,255,255,0.2);
}
.wa-fab-icon {
position: relative;
z-index: 2;
width: 30px; height: 30px;
}
/* Double pulse rings — solo en el círculo */
.wa-fab-pulse {
position: absolute;
inset: 0;
border-radius: 50%;
background: #25D366;
opacity: 0.5;
pointer-events: none;
z-index: 1;
animation: waFabPulse 2.4s ease-out infinite;
}
.wa-fab-pulse--2 { animation-delay: 1.2s; }
@keyframes waFabPulse {
0% { transform: scale(1); opacity: 0.5; }
80% { opacity: 0; }
100% { transform: scale(1.85); opacity: 0; }
}
/* Mobile: botón más compacto. Pill se mantiene porque aporta claridad. */
@media (max-width: 768px) {
.wa-fab { bottom: 18px; right: 18px; gap: 4px; }
.wa-fab-pill {
height: 40px;
padding: 0 12px 0 15px;
font-size: 0.8rem;
}
.wa-fab-circle { width: 50px; height: 50px; }
.wa-fab-icon { width: 26px; height: 26px; }
}
@media (max-width: 360px) {
/* En pantallas muy angostas, ocultamos el pill y dejamos solo el círculo. */
.wa-fab-pill { display: none; }
}
/* Keep it out of the way when printing */
@media print { .wa-fab { display: none; } }
@media (prefers-reduced-motion: reduce) {
.wa-fab-pulse { animation: none; opacity: 0; }
.wa-fab, .wa-fab-pill, .wa-fab-circle { transition: background 0.2s; }
.wa-fab:hover { transform: none; }
.wa-fab:hover .wa-fab-circle { transform: none; }
.wa-fab:hover .wa-fab-arrow { transform: none; }
}
/* ─── WhatsApp auto chat-bubble ──────────────── */
/* Sits above the FAB, appears after 3s, auto-hides after 10s.
Dismissable — state kept in localStorage so we don't nag. */
.wa-bubble {
position: fixed;
right: 22px;
bottom: calc(22px + 58px + 12px); /* FAB bottom + FAB height + gap */
z-index: 199;
width: 280px;
max-width: calc(100vw - 44px);
padding: 1rem 1.1rem 0.95rem;
border-radius: 16px;
background: var(--bg);
border: 1px solid var(--border);
box-shadow:
0 20px 50px -10px rgba(0,0,0,0.35),
0 8px 20px -6px rgba(0,0,0,0.2);
opacity: 0;
transform: translateY(10px) scale(0.96);
pointer-events: none;
transition:
opacity 0.35s cubic-bezier(0.16,1,0.3,1),
transform 0.4s cubic-bezier(0.16,1,0.3,1);
}
[data-theme="light"] .wa-bubble {
background: #fff;
box-shadow:
0 20px 50px -10px rgba(0,0,0,0.18),
0 8px 20px -6px rgba(0,0,0,0.08);
}
.wa-bubble.is-visible {
opacity: 1;
transform: translateY(0) scale(1);
pointer-events: auto;
}
/* Pointer tail toward the FAB */
.wa-bubble::after {
content: '';
position: absolute;
right: 22px;
bottom: -7px;
width: 14px; height: 14px;
background: inherit;
border-right: 1px solid var(--border);
border-bottom: 1px solid var(--border);
transform: rotate(45deg);
}
.wa-bubble-close {
position: absolute;
top: 6px; right: 8px;
width: 24px; height: 24px;
border: none; background: transparent;
color: var(--text-muted);
font-size: 1.1rem; line-height: 1;
cursor: pointer;
border-radius: 6px;
transition: color 0.2s, background 0.2s;
}
.wa-bubble-close:hover { color: var(--text-heading); background: var(--glass); }
.wa-bubble-title {
font-size: 0.9rem;
font-weight: 700;
color: var(--text-heading);
margin: 0 0 0.25rem;
padding-right: 1.5rem; /* space for close button */
}
.wa-bubble-text {
font-size: 0.82rem;
color: var(--text-muted);
line-height: 1.5;
margin: 0 0 0.75rem;
}
.wa-bubble-cta {
display: inline-flex; align-items: center; gap: 0.4rem;
padding: 0.5rem 0.9rem;
border-radius: 8px;
background: #25D366;
color: #fff;
font-size: 0.82rem;
font-weight: 600;
text-decoration: none;
transition: background 0.2s, transform 0.2s;
}
.wa-bubble-cta:hover { background: #1ebe5b; transform: translateY(-1px); }
.wa-bubble-cta svg { width: 14px; height: 14px; }
@media (max-width: 768px) {
.wa-bubble { right: 18px; bottom: calc(18px + 54px + 10px); width: 260px; }
}
@media (prefers-reduced-motion: reduce) {
.wa-bubble { transition: opacity 0.2s; transform: none !important; }
}
/* ═══════════════════════════════════════════════
Floating social rail — fixed left edge.
Inspired by digitalgreenwise.com, adapted to Nodux.
Hidden on narrow screens to save room.
═══════════════════════════════════════════════ */
.social-rail {
position: fixed;
left: 20px;
top: 50%;
transform: translateY(-50%);
z-index: 150;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.55rem;
pointer-events: auto;
}
.social-rail-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px; height: 40px;
border-radius: 50%;
background: rgba(10, 15, 28, 0.75);
color: #f4f4f5;
border: 1px solid rgba(255,255,255,0.1);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
text-decoration: none;
transition:
background 0.2s,
color 0.2s,
transform 0.25s cubic-bezier(0.16,1,0.3,1),
border-color 0.2s,
box-shadow 0.25s;
}
.social-rail-icon svg { width: 16px; height: 16px; }
.social-rail-icon:hover {
background: var(--accent);
color: #fff;
border-color: var(--accent);
transform: translateX(3px) scale(1.05);
box-shadow: 0 6px 18px rgba(59,139,246,0.4);
}
/* Thin accent line under the stack (matches the reference aesthetic) */
.social-rail-bar {
display: block;
width: 1px;
height: 52px;
margin-top: 0.4rem;
background: linear-gradient(to bottom, rgba(255,255,255,0.25), transparent);
}
[data-theme="light"] .social-rail-icon {
background: rgba(20, 25, 40, 0.85);
border-color: rgba(255,255,255,0.08);
color: #f4f4f5;
}
[data-theme="light"] .social-rail-bar {
background: linear-gradient(to bottom, rgba(0,0,0,0.2), transparent);
}
/* Hide on narrow screens — would crowd mobile layout. */
@media (max-width: 900px) {
.social-rail { display: none; }
}
/* Footer social icons — visibles en todos los tamaños. En desktop
conviven con el rail lateral (misma info en dos ubicaciones: rail
para navegación lateral, footer como cierre del sitio). */
.social-icons-mobile {
display: flex;
gap: 0.6rem;
flex-wrap: wrap;
margin-top: 0.7rem;
}
@media (prefers-reduced-motion: reduce) {
.social-rail-icon { transition: background 0.2s, color 0.2s; }
.social-rail-icon:hover { transform: none; }
}
/* ═══════════════════════════════════════════════
v5 — Hero 3D ticket card + sticky-scroll section.
Ugly-Cash inspired motion. Both respect reduced-motion.
═══════════════════════════════════════════════ */
/* ─── Hero 3D ticket card ────────────────────── */
.hero-product {
position: absolute;
top: 11%;
right: 2.5%;
width: 272px;
z-index: 2;
perspective: 1100px;
pointer-events: none;
display: none; /* shown only on wide screens */
--tilt-x: 0deg;
--tilt-y: 0deg;
--mx: 50%;
--my: 50%;
}
@media (min-width: 1340px) {
.hero-product { display: block; }
/* avoid collision with right-side floaters */
.float-2, .float-3 { display: none !important; }
}
.hp-card {
position: relative;
padding: 1.1rem 1.15rem 1rem;
border-radius: 18px;
background: linear-gradient(155deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02));
border: 1px solid rgba(255,255,255,0.1);
backdrop-filter: blur(22px) saturate(1.3);
-webkit-backdrop-filter: blur(22px) saturate(1.3);
box-shadow:
0 30px 60px -20px rgba(0,0,0,0.6),
0 18px 38px -18px rgba(59,139,246,0.3),
0 0 0 1px rgba(255,255,255,0.04) inset;
color: var(--text);
overflow: hidden;
pointer-events: auto;
transform: rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
transform-style: preserve-3d;
transition: transform 0.25s cubic-bezier(0.16,1,0.3,1);
animation: hpFloat 6s ease-in-out infinite;
will-change: transform;
}
[data-theme="light"] .hp-card {
background: linear-gradient(155deg, rgba(255,255,255,0.85), rgba(255,255,255,0.65));
border-color: rgba(0,0,0,0.08);
box-shadow:
0 30px 60px -20px rgba(0,0,0,0.22),
0 18px 38px -18px rgba(59,139,246,0.18);
}
@keyframes hpFloat {
0%, 100% { translate: 0 0; }
50% { translate: 0 -8px; }
}
/* Cursor spotlight on the card itself */
.hp-spot {
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
background: radial-gradient(
circle 180px at var(--mx) var(--my),
rgba(59,139,246,0.28),
transparent 60%
);
opacity: 0.7;
mix-blend-mode: screen;
z-index: 0;
}
.hp-card > *:not(.hp-spot) { position: relative; z-index: 1; }
/* Header: ID + status */
.hp-head {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 0.55rem;
font-size: 0.72rem;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.hp-id { color: var(--text-muted); letter-spacing: 0.06em; }
.hp-status {
display: inline-flex; align-items: center; gap: 0.35rem;
padding: 0.18rem 0.55rem;
border-radius: 999px;
background: rgba(59,139,246,0.14);
color: var(--accent);
font-weight: 600;
letter-spacing: 0.02em;
}
.hp-dot {
width: 6px; height: 6px; border-radius: 50%;
background: var(--accent);
box-shadow: 0 0 8px rgba(59,139,246,0.8);
animation: hpDotPulse 1.6s ease-in-out infinite;
}
@keyframes hpDotPulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.5; transform: scale(1.3); }
}
.hp-device {
font-size: 1.05rem;
font-weight: 700;
color: var(--text-heading);
margin-bottom: 0.15rem;
}
.hp-desc {
font-size: 0.78rem;
color: var(--text-muted);
margin-bottom: 0.9rem;
}
/* Timeline: 4 segments, progress to step 3 */
.hp-timeline {
display: grid; grid-template-columns: repeat(4, 1fr);
gap: 4px;
margin-bottom: 0.95rem;
}
.hp-step {
position: relative;
height: 4px;
border-radius: 2px;
background: rgba(255,255,255,0.08);
}
[data-theme="light"] .hp-step { background: rgba(0,0,0,0.08); }
.hp-step.done { background: var(--accent-2); }
.hp-step.active {
background: linear-gradient(90deg, var(--accent-2), var(--accent));
animation: hpStepPulse 2s ease-in-out infinite;
}
@keyframes hpStepPulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(59,139,246,0.5); }
50% { box-shadow: 0 0 8px 1px rgba(59,139,246,0.6); }
}
.hp-step-label {
position: absolute;
top: 8px; left: 0;
font-size: 0.62rem;
color: var(--text-faint);
letter-spacing: 0.02em;
white-space: nowrap;
}
.hp-step.active .hp-step-label { color: var(--accent); font-weight: 600; }
.hp-step.done .hp-step-label { color: var(--accent-2); }
/* Footer: technician + SLA */
.hp-foot {
display: flex; align-items: center; justify-content: space-between;
padding-top: 1.3rem;
border-top: 1px dashed rgba(255,255,255,0.08);
margin-top: 0.35rem;
}
[data-theme="light"] .hp-foot { border-top-color: rgba(0,0,0,0.08); }
.hp-tech { display: flex; align-items: center; gap: 0.55rem; }
.hp-avatar {
width: 28px; height: 28px; border-radius: 50%;
background: var(--gradient);
color: #0a0f1c;
display: inline-flex; align-items: center; justify-content: center;
font-size: 0.68rem; font-weight: 800;
letter-spacing: 0.02em;
}
.hp-tech-meta { display: flex; flex-direction: column; line-height: 1.2; }
.hp-tech-name { font-size: 0.78rem; color: var(--text-heading); font-weight: 600; }
.hp-tech-role { font-size: 0.66rem; color: var(--text-faint); }
.hp-sla { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; }
.hp-sla-label { font-size: 0.62rem; color: var(--text-faint); letter-spacing: 0.1em; text-transform: uppercase; }
.hp-sla-val { font-size: 0.85rem; color: var(--accent-3); font-weight: 700; font-variant-numeric: tabular-nums; }
/* ─── Sección recorrido del producto ─────────
Ya no es sticky-scroll. El layout sticky creaba inevitablemente
dead space (section min-height > row height = área vacía después
del dwell). Ahora los steps autociclan cuando la sección está en
viewport, y la sección mide exactamente lo que necesita el contenido. */
.sticky-scroll {
position: relative;
padding: 3rem 0 2rem;
z-index: 1;
}
.ss-container { max-width: 1200px; margin: 0 auto; padding: 0 1.25rem; }
.ss-sticky-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3rem;
align-items: center;
min-height: 580px;
}
.ss-copy { display: flex; flex-direction: column; gap: 1.1rem; }
.ss-copy h2 {
font-size: clamp(1.6rem, 3.4vw, 2.4rem);
font-weight: 800;
letter-spacing: -0.02em;
line-height: 1.15;
color: var(--text-heading);
margin: 0;
}
.ss-lead {
font-size: 1rem;
color: var(--text-muted);
line-height: 1.7;
max-width: 460px;
margin-bottom: 0.4rem;
}
.ss-steps { display: flex; flex-direction: column; gap: 1.4rem; margin-top: 0.3rem; }
.ss-step {
display: grid;
grid-template-columns: auto 1fr;
gap: 1rem;
padding: 1rem 1.1rem;
border-radius: 14px;
border: 1px solid transparent;
opacity: 0.35;
transform: translateX(-6px);
transition: opacity 0.45s, transform 0.45s, border-color 0.4s, background 0.4s;
}
.ss-step.is-active {
opacity: 1;
transform: translateX(0);
background: var(--glass);
border-color: var(--glass-border);
box-shadow: 0 10px 30px -14px rgba(59,139,246,0.35);
}
.ss-step-num {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 0.75rem;
font-weight: 700;
color: var(--text-faint);
padding-top: 0.3rem;
letter-spacing: 0.05em;
transition: color 0.4s;
}
.ss-step.is-active .ss-step-num { color: var(--accent); }
.ss-step-body h3 {
font-size: 1rem;
font-weight: 700;
color: var(--text-heading);
margin: 0 0 0.25rem;
}
.ss-step-body p {
font-size: 0.88rem;
color: var(--text-muted);
line-height: 1.65;
margin: 0;
}
/* Phone mockup */
.ss-phone-wrap {
display: flex; align-items: center; justify-content: center;
position: relative;
}
.ss-phone {
position: relative;
width: 300px;
height: 620px;
border-radius: 42px;
background: linear-gradient(170deg, #181c28, #0b0f1a);
border: 1px solid rgba(255,255,255,0.08);
padding: 10px;
box-shadow:
0 40px 90px -30px rgba(0,0,0,0.55),
0 18px 40px -20px rgba(59,139,246,0.2),
0 0 0 1px rgba(255,255,255,0.04) inset;
overflow: hidden;
animation: ssPhoneFloat 7s ease-in-out infinite;
}
[data-theme="light"] .ss-phone {
background: linear-gradient(170deg, #1a1f2e, #0b0f1a);
}
@keyframes ssPhoneFloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
.ss-phone-notch {
position: absolute;
top: 14px; left: 50%; transform: translateX(-50%);
width: 100px; height: 22px; border-radius: 12px;
background: #000;
z-index: 3;
}
.ss-phone-glow {
position: absolute;
inset: -40px;
border-radius: 60px;
background: radial-gradient(circle at 50% 40%, rgba(59,139,246,0.18), transparent 65%);
z-index: -1;
pointer-events: none;
animation: ssPhoneGlow 6s ease-in-out infinite;
}
@keyframes ssPhoneGlow {
0%, 100% { opacity: 0.8; transform: scale(1); }
50% { opacity: 1; transform: scale(1.06); }
}
.ss-phone-inner {
position: relative;
width: 100%; height: 100%;
border-radius: 34px;
overflow: hidden;
background: #0a0f1c;
}
/* Screens layered — only active one visible */
.ss-screen {
position: absolute;
inset: 0;
padding: 44px 18px 18px;
color: #e4e4e8;
opacity: 0;
transform: translateY(12px) scale(0.98);
transition:
opacity 0.55s cubic-bezier(0.16,1,0.3,1),
transform 0.55s cubic-bezier(0.16,1,0.3,1);
pointer-events: none;
display: flex; flex-direction: column;
}
.ss-screen.is-active {
opacity: 1;
transform: translateY(0) scale(1);
pointer-events: auto;
}
/* Screen header — reused across screens */
.ss-sc-head {
display: flex; justify-content: space-between; align-items: baseline;
margin-bottom: 1rem;
}
.ss-sc-title { font-size: 0.95rem; font-weight: 700; color: #f4f4f5; }
.ss-sc-sub { font-size: 0.72rem; color: #7c7c84; }
/* Screen 1: tickets list */
.ss-sc-list { display: flex; flex-direction: column; gap: 0.55rem; }
.ss-ticket {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 0.6rem;
align-items: center;
padding: 0.65rem 0.75rem;
border-radius: 10px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.06);
}
.ss-ticket-dot {
width: 8px; height: 8px; border-radius: 50%;
}
.ss-ticket-dot.blue { background: #1769FF; box-shadow: 0 0 6px rgba(59,139,246,0.7); }
.ss-ticket-dot.amber { background: #ffb347; box-shadow: 0 0 6px rgba(255,179,71,0.7); }
.ss-ticket-dot.green { background: #2ED47A; box-shadow: 0 0 6px rgba(46,212,122,0.7); }
.ss-ticket-body { font-size: 0.74rem; line-height: 1.3; }
.ss-ticket-body strong { color: #fff; font-weight: 700; margin-right: 0.25rem; }
.ss-ticket-meta { display: block; color: #7c7c84; font-size: 0.66rem; margin-top: 0.15rem; }
.ss-ticket-chip {
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.03em;
padding: 0.22rem 0.5rem;
border-radius: 999px;
background: rgba(59,139,246,0.18);
color: #6fa7ff;
text-transform: uppercase;
}
.ss-ticket-chip.done {
background: rgba(46,212,122,0.18);
color: #5bdb96;
}
/* Screen 2: quote */
.ss-quote {
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 12px;
padding: 0.85rem 0.9rem;
margin-bottom: 1rem;
}
.ss-quote-row {
display: flex; justify-content: space-between;
font-size: 0.78rem;
color: #d4d4d8;
padding: 0.45rem 0;
border-bottom: 1px dashed rgba(255,255,255,0.08);
}
.ss-quote-row:last-of-type { border-bottom: none; }
.ss-quote-row.total {
font-weight: 700;
font-size: 0.92rem;
color: #fff;
margin-top: 0.4rem;
padding-top: 0.7rem;
border-top: 1px solid rgba(255,255,255,0.12);
border-bottom: none;
}
.ss-quote-cta {
display: block; width: 100%;
padding: 0.7rem 1rem;
border-radius: 10px;
background: linear-gradient(135deg, #2ED47A, #1769FF);
color: #0a0f1c;
font-weight: 700;
font-size: 0.85rem;
border: none;
box-shadow: 0 8px 20px -6px rgba(46,212,122,0.5);
cursor: pointer;
margin-bottom: 0.5rem;
}
.ss-quote-hint { font-size: 0.68rem; color: #7c7c84; text-align: center; display: block; }
/* Screen 2 alt: vista cliente-facing (lo que ve el cliente final
cuando abre el link de seguimiento). */
.ss-track-chip-row { margin-bottom: 0.6rem; }
.ss-track-chip {
display: inline-block;
padding: 0.25rem 0.7rem;
border-radius: 999px;
background: rgba(59,139,246,0.18);
color: #6fa7ff;
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.ss-track-device {
font-size: 0.92rem;
font-weight: 700;
color: #f4f4f5;
margin-bottom: 0.75rem;
}
.ss-track-evidence {
display: flex;
align-items: center;
gap: 0.45rem;
margin-bottom: 0.9rem;
}
.ss-track-thumb {
width: 42px; height: 42px;
border-radius: 7px;
flex-shrink: 0;
background:
linear-gradient(135deg, #2a3240 0%, #3a4458 60%, #2a3240 100%),
radial-gradient(circle at 30% 30%, rgba(255,255,255,0.15), transparent 60%);
background-blend-mode: overlay;
border: 1px solid rgba(255,255,255,0.08);
position: relative;
overflow: hidden;
}
.ss-track-thumb::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(160deg, transparent 50%, rgba(59,139,246,0.18));
}
.ss-track-more {
font-size: 0.68rem;
color: #7c7c84;
margin-left: 0.2rem;
}
.ss-track-timeline {
display: flex;
flex-direction: column;
gap: 0.45rem;
padding: 0.7rem 0.8rem;
border-radius: 10px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.06);
margin-bottom: 0.85rem;
}
.ss-track-step {
display: flex; align-items: center; gap: 0.55rem;
font-size: 0.72rem;
color: #7c7c84;
}
.ss-track-step span {
width: 8px; height: 8px; border-radius: 50%;
background: rgba(255,255,255,0.15);
flex-shrink: 0;
}
.ss-track-step.done { color: #d4d4d8; }
.ss-track-step.done span {
background: #2ED47A;
box-shadow: 0 0 6px rgba(46,212,122,0.6);
}
.ss-track-step.active { color: #fff; font-weight: 600; }
.ss-track-step.active span {
background: #1769FF;
box-shadow: 0 0 8px rgba(59,139,246,0.8);
}
.ss-track-cta {
display: block;
width: 100%;
padding: 0.7rem 1rem;
border-radius: 10px;
background: linear-gradient(135deg, #2ED47A, #1769FF);
color: #0a0f1c;
font-weight: 700;
font-size: 0.82rem;
border: none;
box-shadow: 0 8px 20px -6px rgba(46,212,122,0.5);
cursor: pointer;
margin-bottom: 0.4rem;
}
.ss-track-hint {
font-size: 0.65rem;
color: #7c7c84;
text-align: center;
display: block;
}
/* Screen 3: push notifications */
.ss-screen[data-step="2"] { padding: 0; background: linear-gradient(180deg, #0a0f1c 0%, #060912 100%); }
.ss-push-wall { padding: 50px 12px 0; display: flex; flex-direction: column; gap: 0.5rem; }
.ss-push {
background: rgba(30, 35, 50, 0.75);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 14px;
padding: 0.7rem 0.8rem;
animation: ssPushIn 0.5s cubic-bezier(0.16,1,0.3,1) both;
}
.ss-screen[data-step="2"].is-active .ss-push--dim {
opacity: 0.5;
animation-delay: 0.15s;
}
@keyframes ssPushIn {
from { opacity: 0; transform: translateY(-10px); }
to { opacity: 1; transform: translateY(0); }
}
.ss-push-app {
display: flex; align-items: center; gap: 0.5rem;
margin-bottom: 0.35rem;
}
.ss-push-icon {
width: 22px; height: 22px;
border-radius: 6px;
background: var(--gradient);
color: #0a0f1c;
display: inline-flex; align-items: center; justify-content: center;
font-size: 0.7rem; font-weight: 900;
}
.ss-push-meta { display: flex; justify-content: space-between; flex: 1; font-size: 0.64rem; color: #9a9aa0; }
.ss-push-meta strong { color: #e4e4e8; font-weight: 700; letter-spacing: 0.02em; }
.ss-push-body { font-size: 0.76rem; line-height: 1.4; color: #d4d4d8; }
.ss-push-body strong { display: block; color: #fff; font-weight: 700; margin-bottom: 0.15rem; font-size: 0.78rem; }
.ss-push-body span { color: #9a9aa0; font-size: 0.72rem; }
.ss-lock {
position: absolute;
bottom: 50px; left: 0; right: 0;
text-align: center;
color: #fff;
}
.ss-lock-time {
display: block;
font-size: 2.4rem;
font-weight: 300;
letter-spacing: -0.02em;
line-height: 1;
}
.ss-lock-sub { font-size: 0.75rem; color: #9a9aa0; }
/* Responsive: stack on narrow screens */
@media (max-width: 900px) {
.sticky-scroll { padding: 2.5rem 0 1.5rem; }
.ss-sticky-row {
grid-template-columns: 1fr;
gap: 2rem;
min-height: 0;
}
.ss-step, .ss-step.is-active { opacity: 1; transform: none; }
.ss-phone { width: 260px; height: 540px; }
.ss-lock-time { font-size: 2rem; }
}
@media (prefers-reduced-motion: reduce) {
.hp-card, .ss-phone, .ss-phone-glow { animation: none; }
.hp-card { transform: none !important; transition: none; }
.ss-step, .ss-step.is-active { transition: none; }
.hp-dot, .hp-step.active, .ss-push { animation: none !important; }
}
/* ─── Hero product card: cycling state transitions ── */
.hp-head, .hp-device, .hp-desc, .hp-timeline, .hp-foot {
transition: opacity 0.3s ease, transform 0.3s ease;
}
.hp-card.is-fading .hp-head,
.hp-card.is-fading .hp-device,
.hp-card.is-fading .hp-desc,
.hp-card.is-fading .hp-timeline,
.hp-card.is-fading .hp-foot {
opacity: 0;
transform: translateY(3px);
}
/* Status badge color variants (toggled by JS) */
.hp-status.is-amber {
background: rgba(255,179,71,0.16);
color: #ffb347;
}
.hp-status.is-amber .hp-dot { background: #ffb347; box-shadow: 0 0 8px rgba(255,179,71,0.8); }
.hp-status.is-green {
background: rgba(46,212,122,0.16);
color: #2ED47A;
}
.hp-status.is-green .hp-dot { background: #2ED47A; box-shadow: 0 0 8px rgba(46,212,122,0.8); }
/* SLA variants */
.hp-sla-val.is-muted { color: var(--text-faint); }
.hp-sla-val.is-green { color: var(--accent-2); }
/* ─── Reduced motion: disable heavy effects ──── */
@media (prefers-reduced-motion: reduce) {
.ambient-blobs { display: none; }
.magnetic { transform: none !important; transition: none !important; }
.fcard::after, .pain-card::after, .step::after,
.showcase-mock::after, .module-card::after { display: none; }
.anim-blur { filter: none; }
.anim-scale, .anim-stagger > * { transform: none; }
}
/* ╔══════════════════════════════════════════════════════════════════════╗
║ Mobile compactness pass (≤ 768px) ║
║ ║
║ Reduce scroll fatigue en mobile sin sacrificar value props: ║
║ 1. Hide stack-swap (redundante con seccion Solucion) ║
║ 2. Industrias: 6 cards + boton "Ver mas" para las 6 restantes ║
║ 3. Padding vertical de sections 4rem → 2.5rem ║
║ 4. Section-head margin-bottom 2rem → 1.2rem ║
╚══════════════════════════════════════════════════════════════════════╝ */
@media (max-width: 768px) {
/* 1. Stack swap → hidden en mobile. El message ("6 herramientas:
$191 → NODUX $99") ya esta en la seccion anterior (Solucion).
En mobile el visual colapsa vertical y agrega ~7 pantallas de
scroll para reforzar idea ya explicada. */
.section-stack-swap { display: none; }
/* 2. Padding vertical reducido. Base 4rem (64px) × 2 = 128px por
seccion. En mobile con 13 secciones eso son ~1660px solo de
"aire entre secciones". Reducimos a 2.5rem (40px) → libera
~600px de scroll total sin perder respiro. */
.section { padding: 2.5rem 0; }
/* 3. section-head margin-bottom reducido — el sub no necesita
2rem de gap al primer elemento en mobile. */
.section-head { margin-bottom: 1.2rem; }
/* 4. Industrias: solo 6 cards de 12 por default. El boton
"Ver mas" expande las restantes. Si el JS falla, las 12 son
visibles (fallback safe — no rompemos contenido). */
#industrias .industrias-grid:not(.expanded) .industria:nth-child(n+7) {
display: none;
}
.industrias-toggle {
display: inline-flex;
align-items: center;
gap: 0.4rem;
margin: 1.2rem auto 0;
padding: 0.6rem 1.2rem;
border-radius: 999px;
background: rgba(23, 105, 255, 0.08);
border: 1px solid rgba(23, 105, 255, 0.25);
color: #1769FF;
font-size: 0.85rem;
font-weight: 600;
cursor: pointer;
font-family: inherit;
transition: background 0.2s, border-color 0.2s;
}
.industrias-toggle:hover {
background: rgba(23, 105, 255, 0.15);
}
.industrias-toggle svg {
transition: transform 0.25s ease;
}
.industrias-toggle.expanded svg {
transform: rotate(180deg);
}
}
/* En desktop el boton "Ver mas industrias" no aplica (las 12 se ven). */
@media (min-width: 769px) {
.industrias-toggle { display: none; }
}
/* ═══════════════════════════════════════════════════════════════════════
MOBILE COMPRESSION PASS (may-2026)
─────────────────────────────────────────────────────────────────────
Reportado por Esteban: "en celular es demasiado largo". Reduccion
agresiva pero quirurgica de paddings + spacing en mobile sin sacar
contenido. Reglas:
1. Bajar padding vertical de cada section (40% menos)
2. Tightear hero (titulo + sub + CTAs + ticker)
3. Comprimir Pulso dashboard (padding, gap, metric card)
4. Reducir gap entre cards (pain-grid, contrast, etc.)
5. Esconder decorativos que solo ocupan altura (floats sutiles,
mesh blobs duplicados, padded blank space)
6. Limitar Pulso activity feed a 3 items (no 4)
Apuntando a que la altura total del page baje ~25-30% en mobile.
═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
/* Section padding global — de 2.8rem a 1.6rem (-43%) */
.section { padding: 1.6rem 0 !important; }
.section-with-canvas { padding: 1.6rem 0 !important; }
.section-pulso { padding: 1.6rem 0 !important; }
/* Section heads tighten — heading margin y subtitle gap */
.section-head { margin-bottom: 1.4rem; }
.section-head h2 { font-size: 1.55rem; line-height: 1.15; margin: 0.4rem 0; }
.section-head .section-sub { font-size: 0.88rem; line-height: 1.45; margin-top: 0.5rem; }
.section-tag { font-size: 0.68rem; padding: 0.25rem 0.55rem; }
/* Hero compress — title + sub + CTAs + ticker mas chicos */
.hero { padding: 5.5rem 0 2.5rem; }
.hero-text h1 { font-size: 1.85rem; line-height: 1.15; }
.hero-sub { font-size: 0.92rem; line-height: 1.5; margin: 0.7rem 0 1.1rem; }
.hero-ctas { gap: 0.55rem; margin-bottom: 1rem; }
.hero-trust { gap: 0.3rem 0.55rem; font-size: 0.72rem; margin-top: 0.8rem; }
.hero-ticker { margin-top: 0.9rem; font-size: 0.78rem; }
/* Floaters decorativos que solo ocupan ruido en mobile — los escondemos */
.hero-floaters { display: none; }
.mesh-blob-3, .mesh-blob-4 { display: none; }
/* Trust strip (paises) — gap mas chico y meta en segunda linea */
.trust-strip { padding: 0.9rem 0 0.75rem; }
.trust-strip-flags { gap: 0.6rem 0.8rem; }
.trust-flag { font-size: 0.85rem; }
.flag-svg { width: 18px; }
/* Pulso dashboard — padding interno + gap entre cards */
.section-pulso .pulso-dashboard { margin-top: 1.6rem; padding: 0.9rem; }
.pulso-header { padding-bottom: 0.85rem; margin-bottom: 0.85rem; gap: 0.6rem; }
.pulso-greeting { font-size: 0.95rem; }
.pulso-meta { font-size: 0.75rem; }
.pulso-pill { padding: 0.25rem 0.6rem; font-size: 0.72rem; }
.pulso-metrics { gap: 0.65rem; margin-bottom: 1rem; }
.pulso-metric { padding: 0.75rem 0.85rem 1rem; }
.pulso-metric-label { font-size: 0.66rem; margin-bottom: 0.3rem; }
.pulso-metric-value { font-size: 1.55rem; }
.pulso-metric-trend { font-size: 0.68rem; }
.pulso-spark { height: 26px; }
.pulso-activity { padding: 0.75rem 0.95rem; }
.pulso-activity-title { font-size: 0.66rem; margin-bottom: 0.55rem; }
.pulso-activity-list li { padding: 0.45rem 0; font-size: 0.8rem; gap: 0.55rem; }
.pulso-event-time { font-size: 0.68rem; }
/* Ocultar el 4to evento del feed en mobile — 3 alcanzan para dar la idea */
.pulso-activity-list li:nth-child(4) { display: none; }
.pulso-footnote { margin-top: 1.2rem; font-size: 0.82rem; }
/* Pain grid (leak section) — gap mas chico, card padding tighter */
.pain-grid { gap: 0.7rem !important; }
.pain-card { padding: 1rem 1.1rem !important; }
.pain-num { font-size: 1.5rem !important; }
.pain-card h3 { font-size: 0.92rem !important; margin: 0.3rem 0 0.4rem !important; }
.pain-card p { font-size: 0.82rem !important; line-height: 1.45 !important; }
.pain-closing { margin-top: 1.3rem !important; font-size: 0.92rem !important; }
/* Contrast grid (problema) tighten */
.contrast-grid { gap: 0.7rem !important; }
.contrast-card { padding: 1rem 1.1rem !important; }
/* Cualquier section con canvas decorativo de fondo: ocultar canvas en
mobile para reducir GPU usage + ya no se ve bien en aspect ratio
portrait. */
.network-canvas-section { display: none; }
}
/* ─────────────────────────────────────────────────────────────────
OCULTAR SECCIONES EN MOBILE (may-2026)
─────────────────────────────────────────────────────────────────
Reportado por Esteban: "es mega extenso el website en movil".
El page tiene 15 secciones — demasiadas para scroll mobile.
Ocultamos 6 secciones que son redundantes o nice-to-have, dejando
un funnel limpio de 9: Hero → Trust → Pulso → Leak → Solucion →
CRM → Industrias → Pricing → FAQ → Footer.
En DESKTOP siguen visibles todas — el funnel completo solo se ve
con ancho suficiente. Mobile prioriza conversion path corto.
───────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
/* Redundante con #leak (mismo punto, distintas palabras) */
#problema,
/* Visual stack-swap — fluff tecnico, no mueve aguja en mobile */
.section-stack-swap,
/* Counter stats — el Pulso en vivo ya muestra este tipo de datos */
.section-stats,
/* Tarifario — feature larga, ya hay 5+ modulos en Solucion */
#tarifario,
/* ROI calculator — el leak section ya tiene los $$ */
#roi,
/* CTA final redundante — hero + pricing ya tienen CTAs */
.cta-section {
display: none !important;
}
}
/* Extra apretado para pantallas chicas tipo iPhone SE */
@media (max-width: 420px) {
.section { padding: 1.3rem 0 !important; }
.section-head h2 { font-size: 1.4rem; }
.hero { padding: 5rem 0 2rem; }
.hero-text h1 { font-size: 1.65rem; }
.pulso-metric-value { font-size: 1.4rem; }
.pulso-activity-list li:nth-child(3) { /* en super-small, mostrar solo 2 eventos */
display: none;
}
}
/* ═════════════════════════════════════════════════════════════════════
TRUST STRIP · paises beta — entre hero y Pulso en vivo (may-2026)
─────────────────────────────────────────────────────────────────────
Pequeña fila visual de "ya hay talleres reales en estos paises".
Estilo Mercury/Brex: emoji flags + nombre, todo en una línea, con un
contador-resumen al final. NO usa logos formales (los talleres ancla
prefieren no aparecer en marketing publico todavia).
═════════════════════════════════════════════════════════════════════ */
.trust-strip {
padding: 1.5rem 0 1rem;
background:
linear-gradient(180deg, transparent 0%, var(--bg-2, rgba(255,255,255,0.015)) 100%);
border-top: 1px solid var(--border, rgba(255, 255, 255, 0.05));
border-bottom: 1px solid var(--border, rgba(255, 255, 255, 0.05));
}
.trust-strip-inner {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 0.8rem 1.4rem;
font-size: 0.86rem;
}
.trust-strip-label {
color: var(--text-muted, #94a3b8);
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.05em;
font-size: 0.72rem;
}
.trust-strip-flags {
display: flex;
align-items: center;
gap: 1rem;
flex-wrap: wrap;
}
.trust-flag {
display: inline-flex;
align-items: center;
gap: 0.45rem;
font-size: 0.92rem;
color: var(--text-heading, #f4f4f5);
}
.trust-flag strong {
font-weight: 600;
}
/* Inline SVG flags · funcionan en Windows tambien (los emoji flags
solo se ven en Mac/iOS/Android — Windows muestra los 2 caracteres
de regional indicator como "CR"/"NI" etc., que se ve mal). */
.flag-svg {
width: 22px !important;
max-width: 22px !important;
height: 14px !important;
border-radius: 3px;
box-shadow: 0 0 0 1px var(--border, rgba(0,0,0,0.12));
display: inline-block;
flex-shrink: 0;
vertical-align: middle;
}
/* Defense vs reglas legacy con !important que podrian estirar svgs.
El bug reportado en mobile (may-2026) fue que los flags se renderizaban
full-screen — causa raiz no confirmada pero probablemente alguna regla
svg{width:100%} de showcase mocks. Triple guard con !important + max-width
+ atributos HTML inline width=22 height=14 en el SVG mismo. */
.trust-strip-divider {
width: 1px;
height: 18px;
background: var(--border, rgba(255, 255, 255, 0.12));
}
.trust-strip-meta {
color: var(--text-muted, #94a3b8);
font-size: 0.82rem;
}
.trust-strip-meta strong {
color: var(--text-heading, #f4f4f5);
font-weight: 600;
}
@media (max-width: 640px) {
.trust-strip { padding: 1.25rem 0 0.85rem; }
.trust-strip-inner { gap: 0.5rem 0.9rem; font-size: 0.8rem; }
.trust-strip-divider { display: none; }
.trust-strip-meta { width: 100%; text-align: center; }
}
/* ═════════════════════════════════════════════════════════════════════
PULSO EN VIVO · Dashboard mock (Mercury/Brex aesthetic — may-2026)
─────────────────────────────────────────────────────────────────────
Centerpiece visual del website. Mock-dashboard que muestra exactamente
lo que verá el dueño cuando abra NODUX cada mañana. Cards con números
grandes, sparklines SVG inline (sin libs), feed de "últimos eventos"
con timestamps relativos. Cero JS — todo HTML+CSS estático para que
cargue rápido y siempre se vea igual.
═════════════════════════════════════════════════════════════════════ */
.section-pulso {
position: relative;
background:
radial-gradient(900px 600px at 20% 0%, rgba(59, 130, 246, 0.06), transparent 60%),
radial-gradient(800px 500px at 80% 100%, rgba(139, 92, 246, 0.05), transparent 60%);
}
/* Tag con dot animado tipo "● Live" — pulse suave */
.pulso-tag {
display: inline-flex !important;
align-items: center;
gap: 0.5rem;
}
.pulso-live-dot {
width: 8px;
height: 8px;
background: #10b981;
border-radius: 50%;
box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6);
animation: pulse-dot-pulso 2s infinite;
}
@keyframes pulse-dot-pulso {
0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5); }
70% { box-shadow: 0 0 0 10px rgba(16, 185, 129, 0); }
100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}
@media (prefers-reduced-motion: reduce) {
.pulso-live-dot { animation: none; }
}
.pulso-dashboard {
margin-top: 3rem;
background: var(--bg-card, rgba(255, 255, 255, 0.025));
border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
border-radius: 18px;
padding: 1.5rem;
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.05),
0 12px 36px rgba(0, 0, 0, 0.10),
0 32px 72px rgba(15, 23, 42, 0.18);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
}
[data-theme="light"] .pulso-dashboard {
background: #ffffff;
border-color: rgba(15, 23, 42, 0.08);
box-shadow:
0 1px 2px rgba(15, 23, 42, 0.04),
0 12px 36px rgba(15, 23, 42, 0.08),
0 32px 72px rgba(15, 23, 42, 0.10);
}
/* Header del mock-dashboard · greeting + meta + time range pills */
.pulso-header {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
padding-bottom: 1.25rem;
margin-bottom: 1.25rem;
border-bottom: 1px solid var(--border, rgba(255, 255, 255, 0.06));
flex-wrap: wrap;
}
.pulso-header-left {
display: flex;
flex-direction: column;
gap: 0.2rem;
}
.pulso-greeting {
font-size: 1.05rem;
font-weight: 600;
color: var(--text-heading, #f1f5f9);
letter-spacing: -0.01em;
}
.pulso-meta {
font-size: 0.8rem;
color: var(--text-muted, #94a3b8);
}
.pulso-meta strong {
color: #10b981;
font-weight: 600;
}
.pulso-header-right {
display: flex;
gap: 0.35rem;
}
.pulso-pill {
padding: 0.32rem 0.75rem;
font-size: 0.78rem;
font-weight: 500;
background: transparent;
border: 1px solid var(--border, rgba(255, 255, 255, 0.1));
border-radius: 8px;
color: var(--text-muted, #94a3b8);
cursor: default;
font-family: inherit;
letter-spacing: -0.005em;
}
.pulso-pill--active {
background: rgba(59, 130, 246, 0.14);
border-color: rgba(59, 130, 246, 0.40);
color: #60a5fa;
}
/* Grid 4-cols de KPIs · cada card tiene sparkline al fondo */
.pulso-metrics {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0.85rem;
margin-bottom: 1.5rem;
}
.pulso-metric {
position: relative;
padding: 1rem 1.1rem 1.2rem;
background: var(--bg-card-hover, rgba(255, 255, 255, 0.035));
border: 1px solid var(--border, rgba(255, 255, 255, 0.06));
border-radius: 14px;
overflow: hidden;
transition: transform 200ms ease, border-color 200ms ease;
}
.pulso-metric:hover {
transform: translateY(-2px);
border-color: rgba(59, 130, 246, 0.25);
}
[data-theme="light"] .pulso-metric {
background: #fafbfc;
border-color: rgba(15, 23, 42, 0.06);
}
.pulso-metric-label {
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.05em;
font-weight: 600;
color: var(--text-muted, #94a3b8);
margin-bottom: 0.5rem;
}
.pulso-metric-value {
font-size: 1.9rem;
font-weight: 700;
line-height: 1.1;
font-feature-settings: 'tnum';
color: var(--text-heading, #f1f5f9);
letter-spacing: -0.025em;
}
.pulso-metric-trend {
font-size: 0.74rem;
font-weight: 500;
margin-top: 0.3rem;
position: relative;
z-index: 1;
}
.pulso-trend--up { color: #10b981; }
.pulso-trend--down { color: #10b981; }
.pulso-spark {
position: absolute;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 32px;
opacity: 0.45;
pointer-events: none;
}
/* Feed de "últimos eventos" · imita SSE real del app */
.pulso-activity {
background: var(--bg-card-hover, rgba(255, 255, 255, 0.035));
border: 1px solid var(--border, rgba(255, 255, 255, 0.06));
border-radius: 14px;
padding: 1rem 1.2rem;
}
[data-theme="light"] .pulso-activity {
background: #fafbfc;
border-color: rgba(15, 23, 42, 0.06);
}
.pulso-activity-title {
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.05em;
font-weight: 600;
color: var(--text-muted, #94a3b8);
margin-bottom: 0.85rem;
}
.pulso-activity-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
}
.pulso-activity-list li {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.6rem 0;
font-size: 0.88rem;
color: var(--text-heading, #f1f5f9);
border-bottom: 1px solid var(--border, rgba(255, 255, 255, 0.04));
}
[data-theme="light"] .pulso-activity-list li {
border-bottom-color: rgba(15, 23, 42, 0.04);
}
.pulso-activity-list li:last-child {
border-bottom: none;
padding-bottom: 0;
}
.pulso-activity-list li:first-child {
padding-top: 0;
}
.pulso-event-dot {
width: 7px;
height: 7px;
border-radius: 50%;
flex-shrink: 0;
}
.pulso-event-dot--blue { background: #3b82f6; }
.pulso-event-dot--green { background: #10b981; }
.pulso-event-dot--amber { background: #f59e0b; }
.pulso-event-dot--purple { background: #8b5cf6; }
.pulso-event-text {
flex: 1;
color: var(--text, #e2e8f0);
}
.pulso-event-text strong {
color: var(--accent, #60a5fa);
font-weight: 600;
}
.pulso-event-text em {
color: #10b981;
font-style: normal;
font-weight: 600;
}
.pulso-event-time {
font-size: 0.74rem;
color: var(--text-muted, #94a3b8);
font-feature-settings: 'tnum';
flex-shrink: 0;
}
.pulso-footnote {
text-align: center;
margin: 2rem auto 0;
max-width: 60ch;
font-size: 0.9rem;
color: var(--text-muted, #94a3b8);
line-height: 1.55;
}
.pulso-footnote strong {
color: var(--text-heading, #f1f5f9);
font-weight: 600;
}
/* Responsive · 4 cols → 2 cols → 1 col */
@media (max-width: 900px) {
.pulso-metrics { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
.pulso-metrics { grid-template-columns: 1fr; }
.pulso-header { gap: 0.75rem; }
.pulso-header-right { width: 100%; }
.pulso-dashboard { padding: 1.1rem; }
.pulso-event-time { font-size: 0.7rem; }
}