/* ═══════════════════════════════════════════ RESET & VARIABLES ═══════════════════════════════════════════ */ *, *::before, *::after { margin:0; padding:0; box-sizing:border-box; } :root { /* Acentos de marca (constantes en ambos temas) */ --cyan: #00ffff; --gold: #d4af37; /* Tokens semánticos — DARK MODE (default) */ --bg: #020202; --bg-soft: rgba(0,4,4,0.99); --text-strong: #ffffff; --text: #e8e8e8; --text-mid: rgba(255,255,255,0.55); --text-soft: rgba(255,255,255,0.4); --text-faint: rgba(255,255,255,0.25); --surface: rgba(255,255,255,0.03); --surface-2: rgba(255,255,255,0.025); --border: rgba(0,255,255,0.12); --border-strong:rgba(0,255,255,0.25); --cyan-shadow: rgba(0,255,255,0.55); --gold-shadow: rgba(212,175,55,0.4); --glow-cyan-bg: rgba(0,255,255,0.04); --glow-gold-bg: rgba(212,175,55,0.04); --nav-bg: rgba(2,2,2,0.5); --nav-bg-solid: rgba(2,2,2,0.92); /* Legacy aliases para compatibilidad con CSS antiguo */ --black: var(--bg); --glass: var(--surface); --glass-b: var(--border); --card-fade: rgba(3,4,8,0.78); /* Acento verde — tema de la Fase 1 */ --green: #20e46e; --green-rgb: 32,228,110; } /* LIGHT MODE — se activa con [data-theme="light"] en */ html[data-theme="light"] { --bg: #f5f6f8; --bg-soft: #ffffff; --text-strong: #0a0a0a; --text: #1a1a1a; --text-mid: rgba(0,0,0,0.65); --text-soft: rgba(0,0,0,0.5); --text-faint: rgba(0,0,0,0.35); --surface: rgba(0,0,0,0.025); --surface-2: rgba(0,0,0,0.04); --border: rgba(0,140,160,0.25); --border-strong:rgba(0,140,160,0.45); /* Acentos ligeramente ajustados para legibilidad en blanco */ --cyan: #00bcd4; --gold: #a67c00; --cyan-shadow: rgba(0,188,212,0.45); --gold-shadow: rgba(166,124,0,0.35); --glow-cyan-bg: rgba(0,188,212,0.08); --glow-gold-bg: rgba(166,124,0,0.07); --nav-bg: rgba(255,255,255,0.7); --nav-bg-solid: rgba(255,255,255,0.95); --black: var(--bg); --glass: var(--surface); --glass-b: var(--border); --card-fade: rgba(255,255,255,0.9); /* Acento verde — tema de la Fase 1 (algo más oscuro para legibilidad en blanco) */ --green: #0a9c48; --green-rgb: 10,156,72; } html { scroll-behavior: smooth; overflow-x: hidden; } body { background: var(--bg); color: var(--text); font-family: 'Urbanist', sans-serif; cursor: none; overflow-x: hidden; transition: background .5s ease, color .5s ease; } /* Smooth color transitions for theme switch */ nav, .card, .nodo, .demo-stage, .pillar, .info-quote, .flow-row, .mkt-card, .ck-svc, .ck-pay, .mkt-camp, .terminal, .nav-links a, .btn-info-primary, .btn-info-ghost, .btn-services-cta, .t-field, .t-submit { transition: background .4s ease, color .4s ease, border-color .4s ease, box-shadow .4s ease; } /* ═══════════════════════════════════════════════════════════════ LIGHT MODE — overrides exhaustivos Cubre TODO elemento con color, fondo o sombra hardcodeada ═══════════════════════════════════════════════════════════════ */ /* ─── BACKGROUNDS DE SECCIÓN ─── */ html[data-theme="light"] .hero-bg { background: radial-gradient(ellipse 70% 60% at 50% 46%, rgba(0,188,212,0.08) 0%, transparent 65%), radial-gradient(ellipse 90% 45% at 50% 110%, rgba(166,124,0,0.06) 0%, transparent 58%), radial-gradient(ellipse 40% 40% at 82% 14%, rgba(0,188,212,0.05) 0%, transparent 55%), #f5f6f8 !important; } html[data-theme="light"] #services { background:linear-gradient(to bottom,#f5f6f8,#ffffff,#f5f6f8) !important; } html[data-theme="light"] #demos { background:linear-gradient(to bottom,#f5f6f8,#ffffff,#f5f6f8) !important; } html[data-theme="light"] #precios { background:linear-gradient(to bottom,#f5f6f8,#ffffff,#f5f6f8) !important; } html[data-theme="light"] #impacto { background: radial-gradient(ellipse 60% 70% at 50% 50%, rgba(0,188,212,0.07) 0%, transparent 60%), linear-gradient(to bottom,#f5f6f8,#ffffff,#f5f6f8) !important; } html[data-theme="light"] #info { background: radial-gradient(ellipse 65% 75% at 75% 25%, rgba(0,188,212,0.10) 0%, transparent 55%), radial-gradient(ellipse 55% 65% at 18% 80%, rgba(166,124,0,0.08) 0%, transparent 55%), linear-gradient(to bottom,#f5f6f8,#ffffff,#f5f6f8) !important; } /* ─── ATMÓSFERA HERO ─── */ html[data-theme="light"] .orb { opacity:0.45; } /* ─── TÍTULOS Y TEXTOS GENERALES ─── */ html[data-theme="light"] .hero-title { color:#0a0a0a !important; } html[data-theme="light"] .hero-title .c { background: linear-gradient(90deg, #1a23ff, #e21bda, #0097a7, #1a23ff) !important; background-size: 280% auto !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; filter: drop-shadow(0 0 14px rgba(26,35,255,0.35)); text-shadow: none !important; } html[data-theme="light"] .hero-title .g { background: linear-gradient(90deg, #c9009a, #e65c00, #c49000, #c9009a) !important; background-size: 280% auto !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; filter: drop-shadow(0 0 12px rgba(200,0,154,0.3)); text-shadow: none !important; } html[data-theme="light"] .hero-sub { color:rgba(0,0,0,0.65) !important; } html[data-theme="light"] .sec-title, html[data-theme="light"] .info-headline h2, html[data-theme="light"] .demo-title, html[data-theme="light"] .c-title, html[data-theme="light"] .n-title, html[data-theme="light"] .pillar-title, html[data-theme="light"] .ck-h, html[data-theme="light"] .ck-svc-name, html[data-theme="light"] .flow-name, html[data-theme="light"] .mkt-card-value, html[data-theme="light"] .mkt-camp-name, html[data-theme="light"] .ck-success h4, html[data-theme="light"] .logo { color:#0a0a0a !important; } html[data-theme="light"] .sec-sub, html[data-theme="light"] .precios-headline, html[data-theme="light"] .card-text, html[data-theme="light"] .c-text, html[data-theme="light"] .demo-text, html[data-theme="light"] .n-text, html[data-theme="light"] .pillar-text, html[data-theme="light"] .info-headline p, html[data-theme="light"] .ck-success p, html[data-theme="light"] .ck-svc-desc, html[data-theme="light"] .flow-desc, html[data-theme="light"] .auto-scenario-text { color:rgba(0,0,0,0.62) !important; } html[data-theme="light"] .info-headline p strong, html[data-theme="light"] .auto-scenario-text strong { color:#0a0a0a !important; } /* Demo features ✓ list */ html[data-theme="light"] .demo-features li { color:rgba(0,0,0,0.7) !important; } html[data-theme="light"] .demo-features li::before { color:#fff; } /* Labels */ html[data-theme="light"] .stat-lbl, html[data-theme="light"] .mkt-card-label, html[data-theme="light"] .mkt-camp-tag, html[data-theme="light"] .mkt-chart-label, html[data-theme="light"] .ck-total-label, html[data-theme="light"] .ck-pay-name, html[data-theme="light"] .ck-stepper-label, html[data-theme="light"] .price-cap, html[data-theme="light"] .d-label, html[data-theme="light"] .d-text { color:rgba(0,0,0,0.55) !important; } html[data-theme="light"] .ck-pay-name { font-weight:700; } html[data-theme="light"] .ck-pay.selected .ck-pay-name { color:#0a0a0a !important; } /* ─── NAV ─── */ html[data-theme="light"] nav { border-bottom-color:rgba(0,0,0,0.08); } html[data-theme="light"] .nav-links a { color:rgba(0,0,0,0.6) !important; } html[data-theme="light"] .nav-links a:hover, html[data-theme="light"] .nav-links a.active { color:var(--gold) !important; background:rgba(166,124,0,0.1); border-color:rgba(166,124,0,0.5); box-shadow:0 0 14px rgba(166,124,0,0.2); } /* ─── CARDS Y SUPERFICIES ─── */ html[data-theme="light"] .card, html[data-theme="light"] .demo-stage, html[data-theme="light"] .pillar, html[data-theme="light"] .flow-row, html[data-theme="light"] .mkt-card, html[data-theme="light"] .mkt-chart-wrap, html[data-theme="light"] .mkt-camp, html[data-theme="light"] .ck-svc, html[data-theme="light"] .ck-pay { background:#ffffff !important; border-color:rgba(0,0,0,0.1) !important; backdrop-filter:none; box-shadow:0 4px 14px rgba(0,0,0,0.04); } html[data-theme="light"] .card:hover, html[data-theme="light"] .demo-stage:hover, html[data-theme="light"] .pillar:hover { border-color:rgba(0,188,212,0.4) !important; box-shadow:0 14px 35px rgba(0,140,160,0.12) !important; } /* Card hover gradients — invisible on white, remove */ html[data-theme="light"] .card::before { display:none; } /* Flow rows — states */ html[data-theme="light"] .flow-row { opacity:.7; } html[data-theme="light"] .flow-row.active { background:rgba(0,188,212,0.06) !important; border-color:var(--cyan) !important; box-shadow:0 0 22px rgba(0,188,212,0.15); opacity:1; } html[data-theme="light"] .flow-row.done { background:rgba(39,201,63,0.06) !important; border-color:rgba(39,201,63,0.4) !important; opacity:1; } html[data-theme="light"] .flow-icon { background:rgba(0,188,212,0.07); border-color:rgba(0,188,212,0.3); } html[data-theme="light"] .flow-row.done .flow-icon { background:rgba(39,201,63,0.1); border-color:rgba(39,201,63,0.5); } html[data-theme="light"] .flow-status { color:rgba(0,0,0,0.45); background:rgba(0,0,0,0.04); border-color:rgba(0,0,0,0.1); } html[data-theme="light"] .flow-row.active .flow-status { color:#000; background:var(--cyan); border-color:var(--cyan); } html[data-theme="light"] .flow-row.done .flow-status { color:#1a7a2a; background:rgba(39,201,63,0.1); border-color:rgba(39,201,63,0.5); } html[data-theme="light"] .flow-progress { background:rgba(0,0,0,0.06); } /* Auto scenario header */ html[data-theme="light"] .auto-scenario { background:rgba(0,188,212,0.08); border-color:rgba(0,188,212,0.3); } /* MKT cards */ html[data-theme="light"] .mkt-card { background:#ffffff !important; } html[data-theme="light"] .mkt-card.gold { background:#fffbef !important; } html[data-theme="light"] .mkt-card-delta { color:#1a7a2a !important; } /* MKT campaign tabs */ html[data-theme="light"] .mkt-camp.active { background:rgba(0,188,212,0.1) !important; border-color:var(--cyan) !important; box-shadow:0 0 14px rgba(0,188,212,0.2); } /* Stage headers — dots */ html[data-theme="light"] .stage-header { border-bottom-color:rgba(0,0,0,0.08); } html[data-theme="light"] .stage-title { color:rgba(0,0,0,0.45) !important; } /* Stage decorative corner glow */ html[data-theme="light"] .demo-stage::after { background:radial-gradient(circle, rgba(0,188,212,0.08) 0%, transparent 70%); } /* ─── CHECKOUT EXPRESS ─── */ html[data-theme="light"] .checkout { background:rgba(0,0,0,0.03) !important; border-radius:12px; } html[data-theme="light"] .ck-svc { background:#ffffff !important; border-color:rgba(0,0,0,0.1) !important; } html[data-theme="light"] .ck-svc:hover { border-color:rgba(0,188,212,0.4) !important; } html[data-theme="light"] .ck-svc.selected { background:rgba(0,188,212,0.06) !important; border-color:var(--cyan) !important; box-shadow:0 0 18px rgba(0,188,212,0.2); } html[data-theme="light"] .ck-svc-icon { background:rgba(0,188,212,0.08); border-color:rgba(0,188,212,0.25); } html[data-theme="light"] .ck-svc.selected .ck-svc-icon { background:var(--cyan); border-color:var(--cyan); } html[data-theme="light"] .ck-svc-price { color:var(--cyan); text-shadow:0 0 10px rgba(0,188,212,0.2); } html[data-theme="light"] .ck-total { background:rgba(0,188,212,0.05); border-color:rgba(0,188,212,0.25); } html[data-theme="light"] .ck-total-value, html[data-theme="light"] .ck-success-amount { color:var(--cyan); text-shadow:0 0 12px rgba(0,188,212,0.25); } html[data-theme="light"] .ck-pay { background:#ffffff !important; border-color:rgba(0,0,0,0.1) !important; } html[data-theme="light"] .ck-pay:hover { border-color:rgba(0,188,212,0.4) !important; background:rgba(0,188,212,0.04) !important; } html[data-theme="light"] .ck-pay.selected { background:rgba(0,188,212,0.08) !important; border-color:var(--cyan) !important; box-shadow:0 0 14px rgba(0,188,212,0.2); } /* Card form inputs */ html[data-theme="light"] .ck-card-form { background:rgba(0,0,0,0.025) !important; border-color:rgba(0,0,0,0.1); } html[data-theme="light"] .ck-input { background:#ffffff !important; border-color:rgba(0,0,0,0.12) !important; color:#0a0a0a !important; } html[data-theme="light"] .ck-input::placeholder { color:rgba(0,0,0,0.35) !important; } /* Checkout stepper */ html[data-theme="light"] .ck-stepper-circle { background:#ffffff; border-color:rgba(0,0,0,0.15); color:rgba(0,0,0,0.4); } html[data-theme="light"] .ck-stepper-item.active .ck-stepper-circle { background:var(--cyan); color:#000; border-color:var(--cyan); box-shadow:0 0 16px rgba(0,188,212,0.35); } html[data-theme="light"] .ck-stepper-line { background:rgba(0,0,0,0.12); } html[data-theme="light"] .ck-stepper-line.done { background:#27c93f; } /* CK / flow buttons → .uiverse maneja su propio disabled (opacity .35) */ /* Success state */ html[data-theme="light"] .ck-success-icon { background:rgba(0,188,212,0.12); border-color:var(--cyan); } html[data-theme="light"] .ck-success p strong { color:#0a0a0a !important; } /* Tags */ html[data-theme="light"] .c-tag { color:#0a8896 !important; border-color:rgba(0,140,160,0.35) !important; background:rgba(0,188,212,0.04) !important; } html[data-theme="light"] .c-tag:hover { border-color:var(--cyan) !important; background:rgba(0,188,212,0.1) !important; color:#0a8896 !important; } html[data-theme="light"] .c-tag.selected { background:var(--cyan) !important; color:#000 !important; border-color:var(--cyan) !important; } /* ─── SERVICIOS — NUMBERS (gradient text) ─── */ html[data-theme="light"] .c-num, html[data-theme="light"] .n-badge-num { background:linear-gradient(135deg, #a67c00, #d4a432) !important; -webkit-background-clip:text !important; -webkit-text-fill-color:transparent !important; background-clip:text !important; } /* Stats gradient */ html[data-theme="light"] .stat-num { background:linear-gradient(135deg, var(--cyan), var(--gold)) !important; -webkit-background-clip:text !important; -webkit-text-fill-color:transparent !important; background-clip:text !important; } /* Section labels */ html[data-theme="light"] .demo-eyebrow, html[data-theme="light"] .n-sub, html[data-theme="light"] .n-badge-tag, html[data-theme="light"] .precios-sub { color:var(--gold) !important; } html[data-theme="light"] .demo-eyebrow { background:rgba(166,124,0,0.1); border-color:rgba(166,124,0,0.4); } /* ─── FEATURED NODO CARD (Checkout Express section) ─── */ html[data-theme="light"] .nodo { background:rgba(166,124,0,0.06) !important; border-color:rgba(166,124,0,0.35) !important; } html[data-theme="light"] .n-title span { text-shadow:0 0 14px rgba(166,124,0,0.25); } html[data-theme="light"] .n-badge-tag { background:rgba(166,124,0,0.08); border-color:rgba(166,124,0,0.5); } html[data-theme="light"] .d-icon { color:var(--gold); } html[data-theme="light"] .price-num { color:var(--gold); text-shadow:0 0 16px rgba(166,124,0,0.3); } html[data-theme="light"] .price-row { border-top-color:rgba(166,124,0,0.2); } html[data-theme="light"] .price-curr { color:rgba(166,124,0,0.7); } /* ─── FOOTER ─── */ html[data-theme="light"] footer { border-top-color:rgba(0,0,0,0.08); } html[data-theme="light"] .f-logo { color:rgba(0,0,0,0.4) !important; } html[data-theme="light"] .f-logo span { color:var(--cyan) !important; } html[data-theme="light"] .f-copy { color:rgba(0,0,0,0.35) !important; } /* ─── INFO SECTION ─── */ html[data-theme="light"] .pillar:hover { background:rgba(0,188,212,0.04) !important; border-color:rgba(0,188,212,0.3) !important; } html[data-theme="light"] .pillar-icon { background:rgba(0,188,212,0.08); border-color:rgba(0,188,212,0.25); } html[data-theme="light"] #info::after { background-image: linear-gradient(rgba(0,140,160,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(0,140,160,0.05) 1px, transparent 1px); } /* Info quote */ html[data-theme="light"] .info-quote { background:rgba(166,124,0,0.06) !important; border-color:rgba(166,124,0,0.25) !important; border-left-color:var(--gold) !important; } html[data-theme="light"] .info-quote p { color:rgba(0,0,0,0.7) !important; } html[data-theme="light"] .info-quote p strong { color:var(--gold) !important; } html[data-theme="light"] .info-quote cite { color:rgba(166,124,0,0.65) !important; } html[data-theme="light"] .info-quote.cyan-mode { background:rgba(0,188,212,0.06) !important; border-color:rgba(0,188,212,0.3) !important; border-left-color:var(--cyan) !important; } html[data-theme="light"] .info-quote.cyan-mode p strong { color:var(--cyan) !important; } html[data-theme="light"] .info-quote.cyan-mode cite { color:rgba(0,140,160,0.7) !important; } html[data-theme="light"] .info-quote .easter-hint { color:rgba(0,0,0,0.25) !important; } /* ─── BUTTONS ─── */ /* html[data-theme="light"] .btn-info-primary → handled by .uiverse */ /* html[data-theme="light"] .btn-services-cta → handled by .uiverse */ html[data-theme="light"] .btn-nodo { background:rgba(166,124,0,0.08) !important; } /* .flow-cta / .ck-cta → ahora usan .uiverse (sin override de tema necesario) */ /* ─── BILLETE 3D ─── */ /* En claro, los verdes translúcidos se lavaban sobre blanco: aquí van más saturados y opacos para que se aprecie el tono verde. */ html[data-theme="light"] .bill-front { background: radial-gradient(ellipse at 30% 30%, rgba(40,230,130,0.45) 0%, transparent 60%), radial-gradient(ellipse at 70% 70%, rgba(0,180,90,0.40) 0%, transparent 60%), linear-gradient(135deg, rgba(8,150,82,0.96), rgba(5,95,52,0.99)) !important; border-color:rgba(0,150,80,0.85) !important; box-shadow: 0 30px 60px rgba(0,120,65,0.30), 0 0 80px rgba(0,170,90,0.20), inset 0 0 40px rgba(80,255,170,0.14) !important; } html[data-theme="light"] .bill-back { background: radial-gradient(ellipse at 70% 30%, rgba(60,235,140,0.42) 0%, transparent 60%), radial-gradient(ellipse at 30% 70%, rgba(0,165,85,0.36) 0%, transparent 60%), linear-gradient(135deg, rgba(7,135,76,0.97), rgba(4,82,46,0.99)) !important; border-color:rgba(0,150,80,0.8) !important; } html[data-theme="light"] .bill-hint { color:rgba(0,130,70,0.8) !important; } /* ─── CURSOR ─── */ html[data-theme="light"] #cur { mix-blend-mode:difference; } html[data-theme="light"] #ring { border-color:rgba(0,140,160,0.4); } /* ─── DEMO STAGE — Glow corner softened ─── */ html[data-theme="light"] .demo-stage::before { background:linear-gradient(90deg,transparent,var(--cyan),transparent); } html[data-theme="light"] #info-canvas { opacity:1; } html[data-theme="light"] #about-canvas { opacity:.95; } /* ─── HERO HERO TEXT FALLBACK ─── */ html[data-theme="light"] .hero-eyebrow { color:var(--gold) !important; } /* ─── PILLAR ICONS ─── */ html[data-theme="light"] .pillar-icon { filter:none; } /* ─── NOTIFY CHIPS (success) ─── */ html[data-theme="light"] .ck-notify-chip { color:#1a7a2a !important; background:rgba(39,201,63,0.08); border-color:rgba(39,201,63,0.35); } /* Switch de tema claro/oscuro — From Uiverse.io by alfoly1988 */ /* The switch - the box around the slider */ .switch { font-size: 17px; position: relative; display: inline-block; width: 3.5em; height: 2em; flex-shrink: 0; /* integración en el nav (flex) */ margin-right: 1rem; } /* Hide default HTML checkbox */ .switch input { opacity: 0; width: 0; height: 0; } /* The slider */ .slider { position: absolute; cursor: none; /* era pointer — el sitio usa cursor personalizado */ top: 0; left: 0; right: 0; bottom: 0; background-color: rgb(75, 73, 74); transition: 0.4s; border-radius: 30px; } .slider:before { position: absolute; content: ""; height: 1.4em; width: 1.4em; border-radius: 20px; left: 0.3em; bottom: 0.3em; background-color: black; box-shadow: inset 8px -4px 0 0 white; transition: 0.4s; } .switch input:checked + .slider { background-color: #2196f3; } .switch input:checked + .slider:before { transform: translateX(1.5em); background-color: yellow; box-shadow: none; } @media(max-width:768px){ .switch { font-size: 15px; margin-right: .5rem; } } /* ═══════════════════════════════════════════ CUSTOM CURSOR ═══════════════════════════════════════════ */ #cur { position:fixed; width:10px; height:10px; background:var(--cyan); border-radius:50%; pointer-events:none; z-index:9999; transform:translate(-50%,-50%); box-shadow:0 0 14px var(--cyan), 0 0 32px rgba(0,255,255,0.4); mix-blend-mode:screen; transition:width .18s, height .18s, background .18s, box-shadow .18s; } #ring { position:fixed; width:38px; height:38px; border:1px solid rgba(0,255,255,0.4); border-radius:50%; pointer-events:none; z-index:9998; transform:translate(-50%,-50%); transition:width .18s, height .18s, border-color .18s; } body.hovering #cur { width:20px; height:20px; background:var(--gold); box-shadow:0 0 16px var(--gold), 0 0 32px rgba(212,175,55,0.5); } body.hovering #ring { width:56px; height:56px; border-color:rgba(212,175,55,0.55); } /* ═══════════════════════════════════════════ NAV ═══════════════════════════════════════════ */ nav { position:fixed; top:0; left:0; right:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:1.1rem 2.8rem; background:var(--nav-bg); /* blur(24px) recompone el fondo en CADA frame de scroll (caro). 12px se ve casi igual sobre el overlay y cuesta mucho menos de componer. */ backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid rgba(0,255,255,0.06); transition:background .35s, border-color .35s; } /* Al scrollear el nav se vuelve casi opaco (0.92/0.95): el desenfoque ya no se percibe, así que lo APAGAMOS → desaparece el recompuesto por frame mientras se hace scroll (que es justo cuando los ventiladores se disparan). */ nav.solid { background:var(--nav-bg-solid); backdrop-filter:none; -webkit-backdrop-filter:none; } .logo { font-family:'Space Grotesk',sans-serif; font-size:1.1rem; font-weight:700; letter-spacing:.3em; color:#fff; } .logo span { color:var(--cyan); } .nav-links { display:flex; gap:.4rem; list-style:none; } .nav-links a { display:inline-block; font-size:.72rem; letter-spacing:.13em; text-transform:uppercase; color:rgba(255,255,255,0.5); text-decoration:none; font-weight:500; padding:.45rem 1rem; border-radius:999px; border:1px solid transparent; transition:color .25s, background .25s, border-color .25s, box-shadow .25s; cursor:none; white-space:nowrap; } .nav-links a:hover { color:var(--gold); background:rgba(212,175,55,0.08); border-color:rgba(212,175,55,0.5); box-shadow:0 0 18px rgba(212,175,55,0.3), inset 0 0 12px rgba(212,175,55,0.05); } .nav-links a.active { color:var(--gold); background:rgba(212,175,55,0.08); border-color:rgba(212,175,55,0.4); } /* (El botón "Contáctanos" del nav ahora usa el diseño .uiverse) */ /* ═══════════════════════════════════════════ HERO ═══════════════════════════════════════════ */ #hero { position:relative; min-height:130vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:8rem 1.5rem 12rem; overflow:hidden; } .hero-bg { position:absolute; inset:0; z-index:0; background: radial-gradient(ellipse 70% 60% at 50% 46%, rgba(0,255,255,0.055) 0%, transparent 65%), radial-gradient(ellipse 90% 45% at 50% 110%, rgba(212,175,55,0.04) 0%, transparent 58%), radial-gradient(ellipse 40% 40% at 82% 14%, rgba(0,255,255,0.025) 0%, transparent 55%), radial-gradient(ellipse 35% 35% at 12% 80%, rgba(212,175,55,0.02) 0%, transparent 55%), var(--black); } .orb { position:absolute; border-radius:50%; pointer-events:none; z-index:0; filter:blur(40px); /* era 80px — un blur tan grande es de lo más caro de componer; a 40px se ve casi igual dada la opacidad tan baja */ animation:orbFloat linear infinite; } .orb1 { width:420px; height:420px; background:rgba(0,255,255,0.04); top:-10%; left:-8%; animation-duration:28s; } .orb2 { width:320px; height:320px; background:rgba(212,175,55,0.03); bottom:5%; right:-5%; animation-duration:22s; animation-direction:reverse; } .orb3 { width:250px; height:250px; background:rgba(0,255,255,0.03); top:55%; left:5%; animation-duration:35s; } /* ── Pausa de animaciones infinitas fuera de pantalla (rendimiento) ── Las animaciones CSS infinitas NO se detienen solas al salir del viewport. app.js añade .io-paused a cada sección cuando no está visible. Pausamos las más caras: orbes, degradado animado del título (repaint), órbitas y planeta. */ .io-paused .orb, .io-paused .hero-title .c, .io-paused .hero-title .g, .io-paused .why-orbit-ring, .io-paused .section-banner { animation-play-state:paused; } #info.io-paused::after { animation-play-state:paused; } /* grilla animada gridDrift */ @keyframes orbFloat { 0% { transform:translate(0,0) scale(1); } 33% { transform:translate(30px,-20px) scale(1.05); } 66% { transform:translate(-20px,15px) scale(.97); } 100% { transform:translate(0,0) scale(1); } } /* ── Animación digital del hero (reemplaza al antiguo #nucleus de aros) ── */ #hero-anim { display:flex; align-items:center; justify-content:center; width:100%; height:240px; margin:.5rem auto 3rem; pointer-events:none; opacity:0; animation:fadeIn 2.2s 1.3s forwards; } /* Pausa las animaciones del hero (incluido el costoso filtro SVG goo) cuando el hero sale de la pantalla — libera GPU mientras se lee el resto de la página. La clase .anim-paused la activa/desactiva un IntersectionObserver en app.js. */ #hero-anim.anim-paused, #hero-anim.anim-paused * { animation-play-state: paused !important; } /* From Uiverse.io by andrew-manzyk */ .loader { --color-one: #ffbf48; --color-two: #be4a1d; --color-three: #ffbf4780; --color-four: #bf4a1d80; --color-five: #ffbf4740; --time-animation: 2s; --size: 2; /* tamaño de la animación */ position: relative; border-radius: 50%; transform: scale(var(--size)); box-shadow: 0 0 25px 0 var(--color-three), 0 20px 50px 0 var(--color-four); animation: colorize calc(var(--time-animation) * 3) ease-in-out infinite; } .loader::before { content: ""; position: absolute; top: 0; left: 0; width: 100px; height: 100px; border-radius: 50%; border-top: solid 1px var(--color-one); border-bottom: solid 1px var(--color-two); background: linear-gradient(180deg, var(--color-five), var(--color-four)); box-shadow: inset 0 10px 10px 0 var(--color-three), inset 0 -10px 10px 0 var(--color-four); } .loader .box { width: 100px; height: 100px; background: linear-gradient( 180deg, var(--color-one) 30%, var(--color-two) 70% ); mask: url(#clipping); -webkit-mask: url(#clipping); } .loader svg { position: absolute; } .loader svg #clipping { filter: contrast(15); animation: roundness calc(var(--time-animation) / 2) linear infinite; } .loader svg #clipping polygon { filter: blur(7px); } .loader svg #clipping polygon:nth-child(1) { transform-origin: 75% 25%; transform: rotate(90deg); } .loader svg #clipping polygon:nth-child(2) { transform-origin: 50% 50%; animation: rotation var(--time-animation) linear infinite reverse; } .loader svg #clipping polygon:nth-child(3) { transform-origin: 50% 60%; animation: rotation var(--time-animation) linear infinite; animation-delay: calc(var(--time-animation) / -3); } .loader svg #clipping polygon:nth-child(4) { transform-origin: 40% 40%; animation: rotation var(--time-animation) linear infinite reverse; } .loader svg #clipping polygon:nth-child(5) { transform-origin: 40% 40%; animation: rotation var(--time-animation) linear infinite reverse; animation-delay: calc(var(--time-animation) / -2); } .loader svg #clipping polygon:nth-child(6) { transform-origin: 60% 40%; animation: rotation var(--time-animation) linear infinite; } .loader svg #clipping polygon:nth-child(7) { transform-origin: 60% 40%; animation: rotation var(--time-animation) linear infinite; animation-delay: calc(var(--time-animation) / -1.5); } @keyframes rotation { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes roundness { 0% { filter: contrast(15); } 20% { filter: contrast(3); } 40% { filter: contrast(3); } 60% { filter: contrast(15); } 100% { filter: contrast(15); } } @keyframes colorize { 0% { filter: hue-rotate(0deg); } 20% { filter: hue-rotate(-30deg); } 40% { filter: hue-rotate(-60deg); } 60% { filter: hue-rotate(-90deg); } 80% { filter: hue-rotate(-45deg); } 100% { filter: hue-rotate(0deg); } } .hero-content { position:relative; z-index:2; max-width:900px; } .hero-title { font-family:'Space Grotesk',sans-serif; font-size:clamp(2.4rem,6.5vw,5.6rem); font-weight:700; line-height:1.04; letter-spacing:-.03em; color:#fff; margin-bottom:2.6rem; opacity:0; animation:fadeUp .95s .35s forwards; } .hero-title .c { background: linear-gradient(90deg, #1a23ff, #e21bda, #00ffff, #1a23ff); background-size: 280% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: title-grad-c 5s linear infinite; filter: drop-shadow(0 0 22px rgba(26,35,255,0.55)); } .hero-title .g { background: linear-gradient(90deg, #e21bda, #ff7b00, #ffe81a, #e21bda); background-size: 280% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: title-grad-g 5s linear infinite; animation-delay: -2.5s; filter: drop-shadow(0 0 18px rgba(226,27,218,0.5)); } .hero-sub { font-size:clamp(1rem,1.8vw,1.18rem); font-weight:300; color:rgba(255,255,255,0.48); max-width:540px; margin:0 auto 4rem; line-height:1.85; letter-spacing:.025em; opacity:0; animation:fadeUp .95s .65s forwards; } /* Botón "Saber Más" — From Uiverse.io by Ashon-G */ .uiverse { /* OJO rendimiento: --duration vive SOLO en :hover (más abajo). Así los 12 círculos de cada botón animan únicamente al pasar el cursor. Antes estaba aquí en la base (7s) y los ~192 círculos con blur corrían infinitos SIEMPRE, aun fuera de pantalla — era el mayor consumo de GPU del sitio. */ --easing: linear; --c-color-1: rgba(255, 163, 26, 0.7); --c-color-2: #1a23ff; --c-color-3: #e21bda; --c-color-4: rgba(255, 232, 26, 0.7); --c-shadow: rgba(255, 223, 87, 0.5); --c-shadow-inset-top: rgba(255, 223, 52, 0.9); --c-shadow-inset-bottom: rgba(255, 250, 215, 0.8); --c-radial-inner: #ffd215; --c-radial-outer: #fff172; --c-color: #fff; -webkit-tap-highlight-color: transparent; -webkit-appearance: none; outline: none; position: relative; cursor: none; /* era pointer — el sitio usa cursor personalizado (#cur/#ring) */ border: none; display: table; border-radius: 24px; padding: 0; margin: 0; text-align: center; font-family: 'Space Grotesk', sans-serif; /* misma fuente que el resto de botones */ font-weight: 600; font-size: 16px; letter-spacing: 0.02em; line-height: 1.5; color: var(--c-color); background: radial-gradient( circle, var(--c-radial-inner), var(--c-radial-outer) 80% ); box-shadow: 0 0 14px var(--c-shadow); } /* Entrada coordinada con el título/subtítulo del hero + centrado */ #hero .uiverse { opacity: 0; margin: 0 auto; animation: fadeUp .95s .95s forwards; } .uiverse:before { content: ""; pointer-events: none; position: absolute; z-index: 3; left: 0; top: 0; right: 0; bottom: 0; border-radius: 24px; box-shadow: inset 0 3px 12px var(--c-shadow-inset-top), inset 0 -3px 4px var(--c-shadow-inset-bottom); } .uiverse .wrapper { /* FIX: position:relative hace que .wrapper sea el bloque contenedor de los .circle (position:absolute), de modo que overflow:hidden SÍ los recorte. Antes, al ser estático, los círculos se posicionaban contra .uiverse y escapaban hacia la derecha al hacer hover (se "deslizaban" fuera del botón). */ position: relative; -webkit-mask-image: -webkit-radial-gradient(white, black); overflow: hidden; border-radius: 24px; min-width: 132px; padding: 12px 0; } .uiverse .wrapper span { display: inline-block; position: relative; z-index: 1; } .uiverse:hover { --duration: 1400ms; } .uiverse .wrapper .circle { position: absolute; left: 0; top: 0; width: 40px; height: 40px; border-radius: 50%; filter: blur(var(--blur, 8px)); background: var(--background, transparent); transform: translate(var(--x, 0), var(--y, 0)) translateZ(0); animation: var(--animation, none) var(--duration) var(--easing) infinite; } .uiverse .wrapper .circle.circle-1, .uiverse .wrapper .circle.circle-9, .uiverse .wrapper .circle.circle-10 { --background: var(--c-color-4); } .uiverse .wrapper .circle.circle-3, .uiverse .wrapper .circle.circle-4 { --background: var(--c-color-2); --blur: 14px; } .uiverse .wrapper .circle.circle-5, .uiverse .wrapper .circle.circle-6 { --background: var(--c-color-3); --blur: 16px; } .uiverse .wrapper .circle.circle-2, .uiverse .wrapper .circle.circle-7, .uiverse .wrapper .circle.circle-8, .uiverse .wrapper .circle.circle-11, .uiverse .wrapper .circle.circle-12 { --background: var(--c-color-1); --blur: 12px; } .uiverse .wrapper .circle.circle-1 { --x: 0; --y: -40px; --animation: circle-1; } .uiverse .wrapper .circle.circle-2 { --x: 92px; --y: 8px; --animation: circle-2; } .uiverse .wrapper .circle.circle-3 { --x: -12px; --y: -12px; --animation: circle-3; } .uiverse .wrapper .circle.circle-4 { --x: 80px; --y: -12px; --animation: circle-4; } .uiverse .wrapper .circle.circle-5 { --x: 12px; --y: -4px; --animation: circle-5; } .uiverse .wrapper .circle.circle-6 { --x: 56px; --y: 16px; --animation: circle-6; } .uiverse .wrapper .circle.circle-7 { --x: 8px; --y: 28px; --animation: circle-7; } .uiverse .wrapper .circle.circle-8 { --x: 28px; --y: -4px; --animation: circle-8; } .uiverse .wrapper .circle.circle-9 { --x: 20px; --y: -12px; --animation: circle-9; } .uiverse .wrapper .circle.circle-10 { --x: 64px; --y: 16px; --animation: circle-10; } .uiverse .wrapper .circle.circle-11 { --x: 4px; --y: 4px; --animation: circle-11; } .uiverse .wrapper .circle.circle-12 { --blur: 14px; --x: 52px; --y: 4px; --animation: circle-12; } @keyframes circle-1 { 33% { transform: translate(0px, 16px) translateZ(0); } 66% { transform: translate(12px, 64px) translateZ(0); } } @keyframes circle-2 { 33% { transform: translate(80px, -10px) translateZ(0); } 66% { transform: translate(72px, -48px) translateZ(0); } } @keyframes circle-3 { 33% { transform: translate(20px, 12px) translateZ(0); } 66% { transform: translate(12px, 4px) translateZ(0); } } @keyframes circle-4 { 33% { transform: translate(76px, -12px) translateZ(0); } 66% { transform: translate(112px, -8px) translateZ(0); } } @keyframes circle-5 { 33% { transform: translate(84px, 28px) translateZ(0); } 66% { transform: translate(40px, -32px) translateZ(0); } } @keyframes circle-6 { 33% { transform: translate(28px, -16px) translateZ(0); } 66% { transform: translate(76px, -56px) translateZ(0); } } @keyframes circle-7 { 33% { transform: translate(8px, 28px) translateZ(0); } 66% { transform: translate(20px, -60px) translateZ(0); } } @keyframes circle-8 { 33% { transform: translate(32px, -4px) translateZ(0); } 66% { transform: translate(56px, -20px) translateZ(0); } } @keyframes circle-9 { 33% { transform: translate(20px, -12px) translateZ(0); } 66% { transform: translate(80px, -8px) translateZ(0); } } @keyframes circle-10 { 33% { transform: translate(68px, 20px) translateZ(0); } 66% { transform: translate(100px, 28px) translateZ(0); } } @keyframes circle-11 { 33% { transform: translate(4px, 4px) translateZ(0); } 66% { transform: translate(68px, 20px) translateZ(0); } } @keyframes circle-12 { 33% { transform: translate(56px, 0px) translateZ(0); } 66% { transform: translate(60px, -32px) translateZ(0); } } /* ── Uiverse color variants ── */ .uiverse-blue { --c-color-1: rgba(0, 163, 255, 0.7); --c-color-2: #0033ff; --c-color-3: #8b00ff; --c-color-4: rgba(100, 210, 255, 0.7); --c-shadow: rgba(0, 120, 255, 0.5); --c-shadow-inset-top: rgba(80, 190, 255, 0.9); --c-shadow-inset-bottom: rgba(180, 230, 255, 0.8); --c-radial-inner: #0055ff; --c-radial-outer: #44aaff; } .uiverse-gold { --c-color-1: rgba(255, 140, 0, 0.7); --c-color-2: #ff4000; --c-color-3: #ff0099; --c-color-4: rgba(255, 210, 0, 0.7); --c-shadow: rgba(255, 140, 0, 0.5); --c-shadow-inset-top: rgba(255, 200, 50, 0.9); --c-shadow-inset-bottom: rgba(255, 240, 190, 0.8); --c-radial-inner: #ff9200; --c-radial-outer: #ffd200; --c-color: #1a0800; } /* Reutiliza el gradiente animado de "CONCEPTO" en cualquier elemento de texto */ .gradient-c { background: linear-gradient(90deg, #1a23ff, #e21bda, #00ffff, #1a23ff); background-size: 280% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: title-grad-c 5s linear infinite; } .uiverse-green { --c-color-1: rgba(22, 150, 66, 0.72); --c-color-2: #0a6e2c; --c-color-3: #2bb457; --c-color-4: rgba(96, 206, 128, 0.72); --c-shadow: rgba(20, 150, 70, 0.5); --c-shadow-inset-top: rgba(110, 220, 145, 0.9); --c-shadow-inset-bottom: rgba(120, 200, 140, 0.78); --c-radial-inner: #07752e; --c-radial-outer: #4ccc6f; } /* Disabled state (modal "Siguiente") */ .uiverse:disabled { opacity:.35; pointer-events:none; } /* Horizontal breathing room for text in all uiverse buttons */ .uiverse .wrapper span { padding: 0 16px; } /* Context: modal next button — respects flex layout */ .cmodal-btn-next.uiverse { display: block; flex: 1; max-width: 260px; } .cmodal-btn-next.uiverse .wrapper { width: 100%; min-width: unset; padding: 9px 0; font-size: .76rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; } /* Context: fase-cta */ .fase-cta.uiverse .wrapper { padding: 10px 0; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; } /* ═══════════════════════════════════════════ ¿QUÉ ES M·CORE? — ABOUT ═══════════════════════════════════════════ */ #about { position:relative; padding:9rem 2rem 8rem; background: radial-gradient(ellipse 60% 55% at 18% 50%, rgba(0,255,255,0.04) 0%, transparent 60%), radial-gradient(ellipse 55% 50% at 85% 40%, rgba(212,175,55,0.035) 0%, transparent 60%), linear-gradient(to bottom,var(--black),rgba(0,4,4,0.99),var(--black)); overflow:hidden; } #about::before { content:''; position:absolute; top:0; left:50%; transform:translateX(-50%); width:1px; height:90px; background:linear-gradient(to bottom,transparent,var(--gold)); } /* Grid canvas — reactive hover animation */ #about-canvas { position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; display:block; } /* Lift all #about content above the canvas */ #about > *:not(#about-canvas) { position:relative; z-index:1; } /* Declaración central */ .about-statement { max-width:740px; margin:0 auto 5rem; text-align:center; font-size:clamp(1.05rem,2vw,1.28rem); font-weight:300; line-height:1.82; color:rgba(255,255,255,0.58); } .about-statement strong { color:#fff; font-weight:600; } /* Grid de 3 pilares */ .about-pillars { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; max-width:1080px; margin:0 auto 3.5rem; } .about-pillar { position:relative; padding:0; background:rgba(255,255,255,0.03); border:1px solid rgba(0,255,255,0.12); border-radius:22px; text-align:left; overflow:visible; display:flex; flex-direction:column; transition:transform .4s cubic-bezier(.25,.46,.45,.94), border-color .4s, box-shadow .4s; } .about-pillar:hover { transform:translateY(-8px); border-color:rgba(0,255,255,0.45); box-shadow:0 24px 60px rgba(0,255,255,0.1); } /* Pilar central — acento dorado */ .about-pillar.gold-accent { border-color:rgba(212,175,55,0.15); } .about-pillar.gold-accent:hover { border-color:rgba(212,175,55,0.5); box-shadow:0 24px 60px rgba(212,175,55,0.1); } /* Banner con imagen: sobresale por arriba e insertado a los lados (tipo tarjeta Uiverse) */ .about-pillar-banner { margin:-22px 16px 0; height:clamp(140px, 20vw, 168px); border-radius:16px; overflow:hidden; box-shadow:0 12px 28px rgba(0,255,255,0.18); } .about-pillar.gold-accent .about-pillar-banner { box-shadow:0 12px 28px rgba(212,175,55,0.18); } .about-pillar-banner img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s cubic-bezier(.25,.46,.45,.94); } .about-pillar:hover .about-pillar-banner img { transform:scale(1.06); } .about-pillar-body { padding:1.4rem 1.6rem 1.8rem; } .about-pillar-title { font-family:'Space Grotesk',sans-serif; font-size:1.12rem; font-weight:700; letter-spacing:-.01em; color:#fff; margin-bottom:.6rem; } .about-pillar-text { font-size:.87rem; color:rgba(255,255,255,0.44); line-height:1.76; font-weight:300; } /* Hook strip — CTA de enganche */ .about-hook { max-width:1080px; margin:0 auto; padding:2.2rem 2.8rem; background:linear-gradient(135deg,rgba(0,255,255,0.06),rgba(212,175,55,0.04)); border:1px solid rgba(0,255,255,0.2); border-radius:20px; display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap; position:relative; overflow:hidden; } .about-hook::before { content:''; position:absolute; inset:0; background:radial-gradient(circle at 5% 50%, rgba(0,255,255,0.08), transparent 55%); pointer-events:none; } .about-hook-text { flex:1; min-width:260px; position:relative; z-index:1; } .about-hook-text strong { display:block; font-family:'Space Grotesk',sans-serif; font-size:clamp(.98rem,1.8vw,1.18rem); font-weight:700; color:#fff; line-height:1.38; margin-bottom:.45rem; } .about-hook-text span { font-size:.92rem; color:rgba(255,255,255,0.5); font-weight:300; } /* .about-hook-btn visual → .uiverse.uiverse-blue */ /* ── LIGHT MODE — About ── */ html[data-theme="light"] #about { background: radial-gradient(ellipse 60% 55% at 18% 50%, rgba(0,188,212,0.07) 0%, transparent 60%), radial-gradient(ellipse 55% 50% at 85% 40%, rgba(166,124,0,0.06) 0%, transparent 60%), linear-gradient(to bottom,#f5f6f8,#ffffff,#f5f6f8) !important; } html[data-theme="light"] .about-statement { color:rgba(0,0,0,0.62) !important; } html[data-theme="light"] .about-statement strong { color:#0a0a0a !important; } html[data-theme="light"] .about-pillar { background:#ffffff !important; border-color:rgba(0,0,0,0.1) !important; box-shadow:0 4px 14px rgba(0,0,0,0.04); } html[data-theme="light"] .about-pillar:hover { border-color:rgba(0,188,212,0.4) !important; box-shadow:0 18px 45px rgba(0,140,160,0.12) !important; } html[data-theme="light"] .about-pillar.gold-accent { border-color:rgba(166,124,0,0.2) !important; } html[data-theme="light"] .about-pillar.gold-accent:hover { border-color:rgba(166,124,0,0.45) !important; box-shadow:0 18px 45px rgba(166,124,0,0.1) !important; } html[data-theme="light"] .about-pillar-banner { box-shadow:0 12px 26px rgba(0,140,160,0.18); } html[data-theme="light"] .about-pillar.gold-accent .about-pillar-banner { box-shadow:0 12px 26px rgba(166,124,0,0.18); } html[data-theme="light"] .about-pillar-title { color:#0a0a0a !important; } html[data-theme="light"] .about-pillar-text { color:rgba(0,0,0,0.55) !important; } html[data-theme="light"] .about-hook { background:linear-gradient(135deg,rgba(0,188,212,0.08),rgba(166,124,0,0.05)) !important; border-color:rgba(0,188,212,0.3) !important; } html[data-theme="light"] .about-hook-text strong { color:#0a0a0a !important; } html[data-theme="light"] .about-hook-text span { color:rgba(0,0,0,0.55) !important; } @media(max-width:820px){ .about-pillars { grid-template-columns:1fr 1fr; } .about-pillar.gold-accent { grid-column:span 2; } .about-hook { flex-direction:column; text-align:center; padding:2rem 1.8rem; } } @media(max-width:560px){ .about-pillars { grid-template-columns:1fr; } .about-pillar.gold-accent { grid-column:span 1; } .about-hook { padding:1.8rem 1.4rem; } } /* ═══════════════════════════════════════════ SERVICES ═══════════════════════════════════════════ */ #services { position:relative; padding:9rem 2rem 7rem; background:linear-gradient(to bottom,var(--black),rgba(0,4,4,0.99),var(--black)); } #services::before { content:''; position:absolute; top:0; left:50%; transform:translateX(-50%); width:1px; height:100px; background:linear-gradient(to bottom,transparent,var(--cyan)); } /* ── Cubos 3D que giran al acercar el mouse (fondo de Servicios) ── Sin autoplay: cada cubo gira sobre su eje Y (rotateY 0→180°) y sube su opacidad según la cercanía del cursor. Solo animan transform + opacity vía transición CSS → compositor GPU puro, sin reflow ni loop JS. */ .services-cubes { position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; perspective:1800px; } #services > *:not(.services-cubes) { position:relative; z-index:1; } .sc-scene { position:absolute; inset:-15% -5%; transform-style:preserve-3d; transform:rotateY(45deg) rotateZ(45deg); } .sc-cube { position:absolute; transform-style:preserve-3d; transform:scale3d(0.82,0.82,0.88) rotateY(calc(var(--ry,0) * 180deg)); opacity:var(--o,.07); transition:transform .60s cubic-bezier(.22,.61,.36,1), opacity .60s ease; } .sc-side { position:absolute; inset:0; backface-visibility:hidden; border:1px solid rgba(0,255,255,0.22); } /* back */ .sc-cube .sc-s1 { transform:rotateX(-180deg) translateZ(var(--hz,80px)); background:rgba(0,18,38,.92); } /* left */ .sc-cube .sc-s2 { transform:rotateY(-90deg) translateZ(var(--hz,80px)); background:rgba(0,190,220,.80); } /* right */ .sc-cube .sc-s3 { transform:rotateY(90deg) translateZ(var(--hz,80px)); background:rgba(0,230,252,.76); } /* top */ .sc-cube .sc-s4 { transform:rotateX(90deg) translateZ(var(--hz,80px)); background:rgba(0,130,160,.72); } /* bottom*/ .sc-cube .sc-s5 { transform:rotateX(-90deg) translateZ(var(--hz,80px)); background:rgba(0,70,95,.62); } /* front */ .sc-cube .sc-s6 { transform:translateZ(var(--hz,80px)); background:rgba(0,255,255,.55); box-shadow:0 0 22px 3px rgba(0,255,255,0.50),inset 0 0 18px rgba(0,255,255,0.14); } html[data-theme="light"] .services-cubes { opacity:.95; } html[data-theme="light"] .sc-cube { border-color: rgba(0,160,195,0.6); } html[data-theme="light"] .sc-cube .sc-s2 { background: rgba(0,170,205,.78) !important; } html[data-theme="light"] .sc-cube .sc-s3 { background: rgba(0,195,225,.74) !important; } html[data-theme="light"] .sc-cube .sc-s4 { background: rgba(0,120,150,.7) !important; } html[data-theme="light"] .sc-cube .sc-s5 { background: rgba(0,80,105,.6) !important; } html[data-theme="light"] .sc-cube .sc-s6 { background: rgba(0,190,222,.62) !important; box-shadow: 0 0 20px 2px rgba(0,185,222,0.5), inset 0 0 12px rgba(0,205,238,0.25) !important; } /* ── IMPACTO — métricas (sección propia) ── */ #impacto { position:relative; padding:1rem 2rem 6rem; background:linear-gradient(to bottom,var(--black),rgba(0,4,4,0.99),var(--black)); } /* Ecualizador reactivo al mouse — fondo de la sección de impacto. Sin autoplay: cada barra sube su nivel (scaleY) y brillo según la cercanía del cursor. Solo animan transform(scaleY) y opacity → compositable y barato. */ .impacto-eq { position:absolute; inset:0; z-index:0; pointer-events:none; display:flex; align-items:flex-end; justify-content:center; gap:clamp(6px,1.4vw,16px); padding:0 4% 1.5rem; overflow:hidden; } #impacto > *:not(.impacto-eq) { position:relative; z-index:1; } .impacto-eq__bar { flex:0 0 auto; width:clamp(8px,1.1vw,18px); height:clamp(70px,14vh,150px); border-radius:.45rem; transform-origin:bottom center; transform:scaleY(var(--s,.22)); opacity:var(--o,.22); background:linear-gradient( to top, hsl(var(--h,160) 95% 40%), hsl(var(--h,160) 100% 68%) ); transition:transform .35s cubic-bezier(.22,.61,.36,1), opacity .35s ease; } .impacto-eq.no-anim .impacto-eq__bar { transition:none; } html[data-theme="light"] .impacto-eq { opacity:1; } html[data-theme="light"] .impacto-eq__bar { background: linear-gradient( to top, hsl(var(--h,160) 92% 42%), hsl(var(--h,160) 98% 60%) ); } .sec-label { display:block; text-align:center; font-family:'Space Mono',monospace; font-size:.85rem; letter-spacing:.5em; text-transform:uppercase; margin-bottom:.8rem; background: linear-gradient(90deg, #e21bda, #ff7b00, #ffe81a, #e21bda); background-size: 280% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: title-grad-g 5s linear infinite; animation-delay: -2.5s; } .sec-title { font-family:'Space Grotesk',sans-serif; font-size:clamp(1.8rem,4vw,3rem); font-weight:700; letter-spacing:-.025em; color:#fff; text-align:center; margin-bottom:1rem; } .sep { width:58px; height:1px; margin:0 auto 1.5rem; background:linear-gradient(90deg,transparent,var(--cyan),transparent); } .sec-sub { text-align:center; color:rgba(255,255,255,0.38); font-size:.93rem; max-width:460px; margin:0 auto 4rem; font-weight:300; line-height:1.78; } .grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:1.5rem; max-width:1080px; margin:0 auto; } .card { background:var(--glass); border:1px solid var(--glass-b); border-radius:20px; padding:2.4rem 2rem; position:relative; overflow:hidden; backdrop-filter:blur(12px); transition:transform .4s cubic-bezier(.25,.46,.45,.94), border-color .4s, box-shadow .4s; } .card::before { content:''; position:absolute; inset:0; background:linear-gradient(135deg,rgba(0,255,255,0.055),transparent 60%); opacity:0; transition:opacity .4s; } .card::after { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,var(--cyan),transparent); transform:scaleX(0); transition:transform .4s; } .card:hover { border-color:rgba(0,255,255,0.5); transform:translateY(-7px); box-shadow:0 20px 60px rgba(0,255,255,0.1); } .card:hover::before { opacity:1; } .card:hover::after { transform:scaleX(1); } .c-num { font-family:'Space Grotesk',sans-serif; font-size:1.18rem; font-weight:700; letter-spacing:.04em; line-height:1; margin-bottom:.7rem; background:linear-gradient(135deg, var(--gold), rgba(212,175,55,0.45)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; display:inline-block; } .c-title { font-family:'Space Grotesk',sans-serif; font-size:1.18rem; font-weight:700; color:#fff; margin-bottom:.75rem; } .c-text { color:rgba(255,255,255,0.42); font-size:.88rem; line-height:1.74; font-weight:300; } .c-tags { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:1.4rem; } .c-tag { font-size:.6rem; letter-spacing:.1em; padding:.25rem .65rem; border:1px solid rgba(0,255,255,0.2); color:rgba(0,255,255,0.72); font-family:'Space Mono',monospace; text-transform:uppercase; border-radius:999px; cursor:none; background:transparent; transition:background .25s, color .25s, border-color .25s, box-shadow .25s, transform .2s; user-select:none; } .c-tag:hover { border-color:var(--cyan); color:#fff; box-shadow:0 0 14px rgba(0,255,255,0.35); } .c-tag.selected { background:var(--cyan); color:#000; border-color:var(--cyan); box-shadow:0 0 22px rgba(0,255,255,0.55); font-weight:700; } .c-tag.selected:hover { transform:translateY(-1px); box-shadow:0 0 28px rgba(0,255,255,0.7); } /* ── Tarjetas de servicio CON imagen (media cards) ── */ .card.card-media { padding:0; /* el padding pasa al .card-body */ display:flex; flex-direction:column; } .card-banner { position:relative; height:clamp(160px, 20vw, 200px); overflow:hidden; flex-shrink:0; } .card-banner img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s cubic-bezier(.25,.46,.45,.94); } .card.card-media:hover .card-banner img { transform:scale(1.06); } /* Fundido inferior para integrar la imagen con el cuerpo de la tarjeta */ .card-banner::after { content:''; position:absolute; inset:0; background:linear-gradient(to top, var(--card-fade) 0%, transparent 44%); pointer-events:none; } .card-body { padding:1.7rem 1.9rem 2rem; display:flex; flex-direction:column; flex:1; position:relative; z-index:1; } /* Las etiquetas se alinean al fondo aunque el texto varíe de largo */ .card-media .c-tags { margin-top:auto; padding-top:1.3rem; } .nodo { grid-column:1/-1; background:rgba(212,175,55,0.04); border:1px solid rgba(212,175,55,0.35); border-radius:24px; padding:2.6rem 2.4rem; position:relative; overflow:hidden; transition:border-color .4s, transform .4s, box-shadow .4s; } .nodo::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,var(--gold),transparent); } .nodo::after { content:''; position:absolute; top:0; right:0; width:220px; height:220px; background:radial-gradient(circle at top right,rgba(212,175,55,0.09),transparent 68%); pointer-events:none; } .nodo:hover { border-color:rgba(212,175,55,0.65); transform:translateY(-5px); box-shadow:0 22px 65px rgba(212,175,55,0.13); } .nodo-inner { display:flex; flex-wrap:wrap; gap:2.2rem; align-items:flex-start; justify-content:space-between; position:relative; z-index:1; } .nodo-left { flex:1 1 300px; } .nodo-right { flex:1 1 250px; display:flex; flex-direction:column; gap:1.4rem; } /* Panel de imagen del bloque destacado */ .nodo-media { flex:1.05 1 290px; align-self:stretch; min-height:260px; border-radius:16px; overflow:hidden; position:relative; border:1px solid rgba(212,175,55,0.28); box-shadow:0 14px 36px rgba(212,175,55,0.15); } .nodo-media img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s cubic-bezier(.25,.46,.45,.94); } .nodo:hover .nodo-media img { transform:scale(1.05); } /* Velo dorado sutil para integrar la imagen con la tarjeta */ .nodo-media::after { content:''; position:absolute; inset:0; background:linear-gradient(125deg, transparent 45%, rgba(212,175,55,0.12)); pointer-events:none; } html[data-theme="light"] .nodo-media { border-color:rgba(166,124,0,0.3); box-shadow:0 14px 32px rgba(166,124,0,0.16); } .n-badge-row { display:flex; align-items:center; gap:.6rem; margin-bottom:.9rem; flex-wrap:wrap; } .n-badge-num { font-family:'Space Grotesk',sans-serif; font-size:1.18rem; font-weight:700; letter-spacing:.04em; line-height:1; background:linear-gradient(135deg, var(--gold), rgba(212,175,55,0.45)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; display:inline-block; } .n-badge-tag { font-family:'Space Mono',monospace; font-size:.55rem; letter-spacing:.13em; padding:.2rem .6rem; border:1px solid rgba(212,175,55,0.5); color:var(--gold); border-radius:999px; } .n-title { font-family:'Space Grotesk',sans-serif; font-size:clamp(1.3rem,2.8vw,1.75rem); font-weight:700; color:#fff; margin-bottom:.5rem; letter-spacing:-.015em; } .n-title span { color:var(--gold); text-shadow:0 0 24px rgba(212,175,55,0.4); } .n-sub { font-family:'Space Mono',monospace; font-size:.68rem; color:rgba(212,175,55,0.52); letter-spacing:.1em; margin-bottom:1rem; } .n-text { color:rgba(255,255,255,0.46); font-size:.9rem; line-height:1.8; font-weight:300; max-width:480px; } .d-label { font-family:'Space Mono',monospace; font-size:.58rem; letter-spacing:.3em; color:rgba(212,175,55,0.5); margin-bottom:.75rem; text-transform:uppercase; } .d-list { list-style:none; display:flex; flex-direction:column; gap:.52rem; } .d-item { display:flex; align-items:flex-start; gap:.55rem; } .d-icon { color:var(--gold); font-size:.78rem; margin-top:2px; flex-shrink:0; } .d-text { font-family:'Urbanist',sans-serif; font-size:.86rem; color:rgba(255,255,255,0.56); line-height:1.5; } .price-row { border-top:1px solid rgba(212,175,55,0.15); padding-top:1.25rem; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem; } .price-cap { font-family:'Space Mono',monospace; font-size:.57rem; letter-spacing:.3em; color:rgba(212,175,55,0.5); margin-bottom:.3rem; } .price-num { font-family:'Space Grotesk',sans-serif; font-size:2.1rem; font-weight:700; color:var(--gold); text-shadow:0 0 26px rgba(212,175,55,0.4); line-height:1; } .price-curr { font-size:.88rem; font-weight:400; color:rgba(212,175,55,0.6); margin-left:.3rem; } .btn-nodo { font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; padding:.75rem 1.7rem; border:1px solid var(--gold); color:var(--gold); background:rgba(212,175,55,0.06); border-radius:999px; cursor:none; transition:background .3s, color .3s, box-shadow .3s; } .btn-nodo:hover { background:var(--gold); color:#000; box-shadow:0 0 30px rgba(212,175,55,0.45); } /* Global services CTA — sits below all cards */ .services-cta { display:flex; justify-content:center; margin-top:3.5rem; } /* .btn-services-cta visual → .uiverse.uiverse-gold */ .stats { display:flex; justify-content:center; gap:3.5rem; flex-wrap:wrap; margin-top:5rem; padding-top:3.2rem; border-top:1px solid rgba(0,255,255,0.08); } .stat-num { font-family:'Space Grotesk',sans-serif; font-size:2.3rem; font-weight:700; background:linear-gradient(135deg,var(--cyan),rgba(212,175,55,0.85)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; } .stat-lbl { font-size:.67rem; letter-spacing:.22em; color:rgba(255,255,255,0.28); text-transform:uppercase; font-family:'Space Mono',monospace; } /* ═══════════════════════════════════════════ FASES — Trayectoria digital interactiva ═══════════════════════════════════════════ */ #fases { position:relative; padding:9rem 2rem 8rem; background: radial-gradient(ellipse 55% 50% at 12% 20%, rgba(0,255,255,0.05) 0%, transparent 58%), radial-gradient(ellipse 50% 55% at 88% 78%, rgba(212,175,55,0.045) 0%, transparent 58%), linear-gradient(to bottom,var(--bg),var(--bg-soft),var(--bg)); overflow:hidden; } #fases::before { content:''; position:absolute; top:0; left:50%; transform:translateX(-50%); width:1px; height:90px; background:linear-gradient(to bottom,transparent,var(--cyan)); z-index:2; } /* ── FONDO: Red de puntos interactiva (Fases) ── Una rejilla de puntos dibujada en canvas. Al pasar el cursor se encienden las líneas que conectan los puntos cercanos (constelación) y los puntos próximos brillan; en reposo solo quedan los puntos quietos. Todo el dibujo vive en app.js → fasesConstellation. MUY barato: el bucle rAF SOLO corre mientras el cursor interactúa (o se desvanece) y la sección está visible; en reposo no se repinta nada. Respeta prefers-reduced-motion. */ .fases-fx { position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; } #fases > *:not(.fases-fx) { position:relative; z-index:1; } /* Lienzo de la red de puntos. Tamaño, puntos, líneas y colores (según tema) se calculan en JS (fasesConstellation); aquí solo el lienzo a pantalla completa. Sin filter ni blend-mode: 0 coste de composición en reposo. */ #fases-canvas { position:absolute; inset:0; width:100%; height:100%; display:block; } .fases-wrap { max-width:1120px; margin:0 auto; } /* ── SELECTOR DE FASES — carrusel 3D rotatorio (coverflow) ── */ .f3d { margin:0 auto 2.8rem; } .f3d-stage { position:relative; height:clamp(370px, 52vh, 430px); perspective:1500px; perspective-origin:50% 50%; } .f3d-ring { position:absolute; inset:0; transform-style:preserve-3d; } .f3d-card { position:absolute; top:50%; left:50%; width:clamp(280px, 82vw, 344px); height:clamp(324px, 48vh, 384px); display:flex; flex-direction:column; align-items:stretch; padding:0; border-radius:18px; overflow:visible; border:none; background:rgba(0,0,0,0.5); cursor:none; text-align:center; color:#fff; transform: translate(-50%, -50%) translateX(calc(var(--o, 0) * 60%)) translateZ(calc(var(--ao, 0) * -160px)) rotateY(calc(var(--o, 0) * -42deg)) scale(calc(1 - var(--ao, 0) * 0.12)); opacity:calc(1 - var(--ao, 0) * 0.55); transition:transform .7s cubic-bezier(.55,.05,.2,1), opacity .7s ease, box-shadow .5s ease, border-color .5s ease; box-shadow:0 14px 40px rgba(0,0,0,0.45); z-index:1; } .f3d-card.active { z-index:3; box-shadow:0 20px 55px rgba(0,0,0,0.55), 0 0 34px rgba(0,255,255,0.14); } .f3d-card[data-fase="3"].active { box-shadow:0 20px 55px rgba(0,0,0,0.55), 0 0 34px rgba(212,175,55,0.14); } /* Banner superior con degradado de acento (formato tipo tarjeta) */ .f3d-card-banner { position:relative; margin:-20px 14px 0; height:clamp(106px, 15vh, 130px); border-radius:14px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.05rem; overflow:hidden; background:linear-gradient(135deg, #00e5e5 0%, #0794a8 100%); box-shadow:0 10px 26px rgba(0,180,190,0.4); } .f3d-card[data-fase="3"] .f3d-card-banner { background:linear-gradient(135deg, #f0d264 0%, #b8860b 100%); box-shadow:0 10px 26px rgba(184,134,11,0.4); } .f3d-card-ghost { position:absolute; top:-.9rem; right:.3rem; font-family:'Space Grotesk',sans-serif; font-size:5rem; font-weight:700; line-height:1; color:rgba(255,255,255,0.16); pointer-events:none; user-select:none; } .f3d-card-banner-name { position:relative; font-family:'Space Grotesk',sans-serif; font-size:1.6rem; font-weight:700; letter-spacing:-.02em; color:#fff; } .f3d-card-banner-sub { position:relative; font-family:'Space Grotesk',sans-serif; font-size:.9rem; font-weight:500; letter-spacing:.02em; color:rgba(255,255,255,0.85); } /* Cuerpo con los detalles (se adapta al tema) */ .f3d-card-body { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.85rem; padding:1.15rem 1.4rem 1.4rem; } .f3d-card-diffrow { display:flex; align-items:center; gap:.55rem; } .f3d-card-diff { display:flex; align-items:flex-end; gap:4px; height:16px; } .f3d-card-diff i { width:6px; border-radius:1px; background:rgba(255,255,255,0.18); } .f3d-card-diff i:nth-child(1){height:7px} .f3d-card-diff i:nth-child(2){height:11px} .f3d-card-diff i:nth-child(3){height:16px} .f3d-card-diff i.on { background:var(--cyan); box-shadow:0 0 7px rgba(0,255,255,0.6); } .f3d-card[data-fase="3"] .f3d-card-diff i.on { background:var(--gold); box-shadow:0 0 7px rgba(212,175,55,0.6); } .f3d-card-difflbl { font-family:'Space Mono',monospace; font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--cyan); } .f3d-card[data-fase="3"] .f3d-card-difflbl { color:var(--gold); } .f3d-card-facts { display:flex; justify-content:center; } .f3d-card-facts > div { display:flex; flex-direction:column; align-items:center; gap:.12rem; } .f3d-card-facts .lbl { font-family:'Space Mono',monospace; font-size:.52rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,0.4); margin-bottom:.15rem; } .f3d-card-facts .val { font-family:'Space Grotesk',sans-serif; font-size:1.12rem; font-weight:700; color:#fff; } .f3d-card-facts .val-usd { font-family:'Space Grotesk',sans-serif; font-size:.82rem; font-weight:500; color:rgba(255,255,255,0.55); } /* Controles */ .f3d-controls { display:flex; align-items:center; justify-content:center; gap:1.4rem; margin-top:.4rem; } .f3d-arrow { width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.5rem; line-height:1; padding-bottom:3px; background:rgba(255,255,255,0.03); border:1px solid rgba(0,255,255,0.25); color:var(--cyan); cursor:none; transition:background .3s, border-color .3s, box-shadow .3s, transform .2s; } .f3d-arrow:hover { background:rgba(0,255,255,0.08); border-color:var(--cyan); box-shadow:0 0 18px rgba(0,255,255,0.35); transform:translateY(-2px); } .f3d-dots { display:flex; gap:.6rem; } .f3d-dot { width:9px; height:9px; border-radius:50%; padding:0; background:rgba(255,255,255,0.18); border:none; cursor:none; transition:background .3s, box-shadow .3s, transform .3s; } .f3d-dot.active { background:var(--cyan); box-shadow:0 0 12px rgba(0,255,255,0.7); transform:scale(1.3); } .f3d-dot[data-fase="3"].active { background:var(--gold); box-shadow:0 0 12px rgba(212,175,55,0.7); } @media (prefers-reduced-motion: reduce) { .f3d-card { transition:opacity .3s ease; } } /* ── PANEL DE DETALLE ── */ .fases-stage { position:relative; background:rgba(0,0,0,0.5); border:none; border-radius:26px; padding:2.6rem 2.6rem 2.4rem; overflow:hidden; min-height:420px; } .fase-panel { display:none; } .fase-panel.active { display:block; animation:fasePanelIn .5s cubic-bezier(.25,.46,.45,.94); } @keyframes fasePanelIn { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:translateY(0)} } /* Numeral gigante fantasma de fondo */ .fase-ghost { position:absolute; top:-2.5rem; right:1rem; font-family:'Space Grotesk',sans-serif; font-size:clamp(9rem,22vw,17rem); font-weight:700; line-height:1; letter-spacing:-.05em; color:rgba(0,255,255,0.04); pointer-events:none; z-index:0; user-select:none; } .fase-panel[data-fase="3"] .fase-ghost { color:rgba(212,175,55,0.05); } .fase-head { position:relative; z-index:1; margin-bottom:1.8rem; max-width:640px; } .fase-codename { font-family:'Space Mono',monospace; font-size:.6rem; letter-spacing:.34em; text-transform:uppercase; color:var(--cyan); margin-bottom:.7rem; } .fase-panel[data-fase="3"] .fase-codename { color:var(--gold); } .fase-h { font-family:'Space Grotesk',sans-serif; font-size:clamp(1.6rem,3.4vw,2.3rem); font-weight:700; letter-spacing:-.025em; color:#fff; line-height:1.1; margin-bottom:.7rem; } .fase-h em { font-style:normal; color:var(--cyan); text-shadow:0 0 26px rgba(0,255,255,0.4); } .fase-panel[data-fase="3"] .fase-h em { color:var(--gold); text-shadow:0 0 26px rgba(212,175,55,0.4); } .fase-lead { font-size:.96rem; color:rgba(255,255,255,0.55); line-height:1.74; font-weight:300; } /* Meta-row: dificultad, tiempo, inversión */ .fase-meta { position:relative; z-index:1; display:flex; flex-wrap:wrap; gap:1rem; margin-bottom:2rem; } .fase-meta-card { flex:1; min-width:150px; padding:1rem 1.2rem; background:rgba(255,255,255,0.025); border:1px solid rgba(0,255,255,0.12); border-radius:14px; } .fase-panel[data-fase="3"] .fase-meta-card { border-color:rgba(212,175,55,0.14); } .fase-meta-label { font-family:'Space Mono',monospace; font-size:.55rem; letter-spacing:.22em; text-transform:uppercase; color:rgba(255,255,255,0.42); margin-bottom:.45rem; } .fase-meta-value { font-family:'Space Grotesk',sans-serif; font-size:1.15rem; font-weight:700; color:#fff; display:flex; align-items:center; gap:.5rem; } .fase-meta-value .accent { color:var(--cyan); } .fase-panel[data-fase="3"] .fase-meta-value .accent { color:var(--gold); } .fase-meta-price .num { color:var(--cyan); } .fase-panel[data-fase="3"] .fase-meta-price .num { color:var(--gold); } .fase-meta-price small { font-size:.66rem; font-weight:400; color:rgba(255,255,255,0.4); letter-spacing:.04em; } /* Barras de dificultad dentro del meta-card */ .fase-meta-bars { display:flex; align-items:flex-end; gap:4px; height:18px; } .fase-meta-bars i { width:7px; border-radius:1px; background:rgba(255,255,255,0.15); } .fase-meta-bars i:nth-child(1){height:8px} .fase-meta-bars i:nth-child(2){height:13px} .fase-meta-bars i:nth-child(3){height:18px} .fase-meta-bars i.on { background:var(--cyan); box-shadow:0 0 8px rgba(0,255,255,0.5); } .fase-panel[data-fase="3"] .fase-meta-bars i.on { background:var(--gold); box-shadow:0 0 8px rgba(212,175,55,0.5); } /* ── DELIVERABLES GRID ── */ .fase-deliv-label { position:relative; z-index:1; font-family:'Space Mono',monospace; font-size:.58rem; letter-spacing:.28em; text-transform:uppercase; color:rgba(255,255,255,0.4); margin-bottom:1rem; } .fase-delivs { position:relative; z-index:1; display:grid; grid-template-columns:repeat(2,1fr); gap:.8rem; margin-bottom:2rem; } .fase-deliverable { display:flex; align-items:flex-start; gap:.9rem; padding:1rem 1.1rem; background:rgba(255,255,255,0.025); border:1px solid rgba(0,255,255,0.1); border-radius:14px; opacity:0; transform:translateY(10px); transition:border-color .3s, background .3s, transform .3s; } .fase-panel.active .fase-deliverable { animation:fdReveal .5s cubic-bezier(.25,.46,.45,.94) forwards; } .fase-panel.active .fase-deliverable:nth-child(1){animation-delay:.05s} .fase-panel.active .fase-deliverable:nth-child(2){animation-delay:.12s} .fase-panel.active .fase-deliverable:nth-child(3){animation-delay:.19s} .fase-panel.active .fase-deliverable:nth-child(4){animation-delay:.26s} .fase-panel.active .fase-deliverable:nth-child(5){animation-delay:.33s} .fase-panel.active .fase-deliverable:nth-child(6){animation-delay:.40s} @keyframes fdReveal { to{opacity:1;transform:translateY(0)} } .fase-deliverable:hover { border-color:rgba(0,255,255,0.35); background:rgba(0,255,255,0.03); transform:translateY(-3px); } .fase-panel[data-fase="3"] .fase-deliverable:hover { border-color:rgba(212,175,55,0.35); background:rgba(212,175,55,0.03); } .fd-icon { width:40px; height:40px; flex-shrink:0; border-radius:11px; display:flex; align-items:center; justify-content:center; font-size:1.25rem; background:rgba(0,255,255,0.06); border:1px solid rgba(0,255,255,0.18); } .fase-panel[data-fase="3"] .fd-icon { background:rgba(212,175,55,0.06); border-color:rgba(212,175,55,0.18); } .fd-body { flex:1; min-width:0; } .fd-name { font-family:'Space Grotesk',sans-serif; font-size:.92rem; font-weight:700; color:#fff; line-height:1.25; margin-bottom:.45rem; } .fd-meta { display:flex; flex-wrap:wrap; align-items:center; gap:.4rem; } .fd-cat { font-family:'Space Mono',monospace; font-size:.5rem; letter-spacing:.14em; text-transform:uppercase; padding:.18rem .5rem; border-radius:999px; } .fd-cat.cy { color:var(--cyan); border:1px solid rgba(0,255,255,0.3); background:rgba(0,255,255,0.05); } .fd-cat.gd { color:var(--gold); border:1px solid rgba(212,175,55,0.35); background:rgba(212,175,55,0.05); } .fd-time { font-family:'Space Mono',monospace; font-size:.55rem; letter-spacing:.06em; color:rgba(255,255,255,0.4); display:inline-flex; align-items:center; gap:.25rem; } .fd-time::before { content:'◷'; font-size:.7rem; } /* ── FOOTER DEL PANEL — CTA ── */ .fase-foot { position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1.2rem; padding-top:1.6rem; border-top:1px solid rgba(0,255,255,0.1); } .fase-panel[data-fase="3"] .fase-foot { border-top-color:rgba(212,175,55,0.12); } .fase-foot-note { font-size:.84rem; color:rgba(255,255,255,0.45); font-weight:300; flex:1; min-width:220px; line-height:1.5; } .fase-foot-note strong { color:rgba(255,255,255,0.75); font-weight:600; } /* .fase-cta visual → .uiverse (.uiverse-blue / .uiverse-gold for fase 3) */ /* ═══ TEMA VERDE — Fase 1 (sobrescribe el cian por defecto) ═══ */ /* Carrusel 3D */ .f3d-card[data-fase="1"].active { box-shadow:0 20px 55px rgba(0,0,0,0.55), 0 0 34px rgba(var(--green-rgb),0.16); } .f3d-card[data-fase="1"] .f3d-card-banner { background:linear-gradient(135deg, #2ee883 0%, #0f8f47 100%); box-shadow:0 10px 26px rgba(15,143,71,0.42); } .f3d-card[data-fase="1"] .f3d-card-diff i.on { background:var(--green); box-shadow:0 0 7px rgba(var(--green-rgb),0.6); } .f3d-card[data-fase="1"] .f3d-card-difflbl { color:var(--green); } .f3d-dot[data-fase="1"].active { background:var(--green); box-shadow:0 0 12px rgba(var(--green-rgb),0.7); } /* Panel de detalle */ .fase-panel[data-fase="1"] .fase-codename { color:var(--green); } .fase-panel[data-fase="1"] .fase-ghost { color:rgba(var(--green-rgb),0.05); } .fase-panel[data-fase="1"] .fase-h em { color:var(--green); text-shadow:0 0 26px rgba(var(--green-rgb),0.4); } .fase-panel[data-fase="1"] .fase-meta-card { border-color:rgba(var(--green-rgb),0.16); } .fase-panel[data-fase="1"] .fase-meta-value .accent { color:var(--green); } .fase-panel[data-fase="1"] .fase-meta-price .num { color:var(--green); } .fase-panel[data-fase="1"] .fase-meta-bars i.on { background:var(--green); box-shadow:0 0 8px rgba(var(--green-rgb),0.5); } .fase-panel[data-fase="1"] .fase-deliverable { border-color:rgba(var(--green-rgb),0.12); } .fase-panel[data-fase="1"] .fase-deliverable:hover { border-color:rgba(var(--green-rgb),0.35); background:rgba(var(--green-rgb),0.04); } .fase-panel[data-fase="1"] .fd-icon { background:rgba(var(--green-rgb),0.07); border-color:rgba(var(--green-rgb),0.2); } .fase-panel[data-fase="1"] .fd-cat.cy { color:var(--green); border-color:rgba(var(--green-rgb),0.35); background:rgba(var(--green-rgb),0.06); } .fase-panel[data-fase="1"] .fase-foot { border-top-color:rgba(var(--green-rgb),0.12); } /* ═══ Navegación grande entre fases — efecto flecha circular (Uiverse · talhabangyal) ═══ */ .fase-nav-big { display:flex; justify-content:center; align-items:center; gap:1.4rem; flex-wrap:wrap; margin-top:2.3rem; } .fase-nav-btn { cursor:none; font-weight:700; font-family:'Space Grotesk', Helvetica, sans-serif; transition:transform .2s, box-shadow .35s, background-image .35s; padding:15px 30px; border-radius:100px; /* El color lo define la fase de destino (clases .theme-*, aplicadas por JS) */ background-image:var(--nav-grad, linear-gradient(135deg,#2f6bff,#0a33e0)); border:1px solid transparent; display:flex; align-items:center; font-size:15px; letter-spacing:.03em; color:#fff; box-shadow:0 10px 30px var(--nav-glow, rgba(12,50,230,0.32)); } .fase-nav-btn:hover { box-shadow:0 15px 40px var(--nav-glow-2, rgba(12,50,230,0.5)); } /* Temas de color por fase de destino */ .fase-nav-btn.theme-green { --nav-grad:linear-gradient(135deg,#22c86a,#0c7d37); --nav-glow:rgba(15,143,71,0.34); --nav-glow-2:rgba(15,143,71,0.52); } .fase-nav-btn.theme-blue { --nav-grad:linear-gradient(135deg,#2f6bff,#0a33e0); --nav-glow:rgba(12,50,230,0.34); --nav-glow-2:rgba(12,50,230,0.52); } .fase-nav-btn.theme-gold { --nav-grad:linear-gradient(135deg,#dca02f,#9c6d08); --nav-glow:rgba(154,109,8,0.36); --nav-glow-2:rgba(154,109,8,0.54); } .fase-nav-btn .text { color:#fff; } .fase-nav-btn svg { width:34px; height:34px; transition:transform .3s ease-in-out; flex-shrink:0; } .fase-nav-btn.next svg { margin-left:12px; } .fase-nav-btn.prev svg { margin-right:12px; transform:scaleX(-1); } .fase-nav-btn.next:hover svg { transform:translateX(5px); } .fase-nav-btn.prev:hover svg { transform:scaleX(-1) translateX(5px); } .fase-nav-btn:active { transform:scale(0.95); } /* ── LIGHT MODE — Fases ── */ html[data-theme="light"] #fases { background: radial-gradient(ellipse 55% 50% at 12% 20%, rgba(0,188,212,0.08) 0%, transparent 58%), radial-gradient(ellipse 50% 55% at 88% 78%, rgba(166,124,0,0.06) 0%, transparent 58%), linear-gradient(to bottom,#f5f6f8,#ffffff,#f5f6f8) !important; } html[data-theme="light"] .f3d-card { background:linear-gradient(180deg, #ffffff, #f4f6f8); box-shadow:0 14px 40px rgba(0,0,0,0.1); } html[data-theme="light"] .f3d-card.active { box-shadow:0 18px 50px rgba(0,140,160,0.2), 0 0 26px rgba(0,140,160,0.12); } html[data-theme="light"] .f3d-card[data-fase="3"].active { box-shadow:0 18px 50px rgba(166,124,0,0.2), 0 0 26px rgba(166,124,0,0.12); } /* El banner conserva su degradado de acento; su texto queda en blanco (legible en ambos temas) */ html[data-theme="light"] .f3d-card-facts .lbl { color:rgba(0,0,0,0.45); } html[data-theme="light"] .f3d-card-facts .val { color:#0a0a0a; } html[data-theme="light"] .f3d-card-facts .val-usd { color:rgba(0,0,0,0.5); } html[data-theme="light"] .f3d-card-diff i { background:rgba(0,0,0,0.15); } html[data-theme="light"] .f3d-arrow { background:#ffffff; border-color:rgba(0,140,160,0.3); } html[data-theme="light"] .f3d-dot { background:rgba(0,0,0,0.18); } html[data-theme="light"] .fases-stage { background:#ffffff; box-shadow:0 10px 40px rgba(0,0,0,0.05); } html[data-theme="light"] .fase-ghost { color:rgba(0,140,160,0.06); } html[data-theme="light"] .fase-panel[data-fase="3"] .fase-ghost { color:rgba(166,124,0,0.07); } html[data-theme="light"] .fase-h { color:#0a0a0a; } html[data-theme="light"] .fase-lead { color:rgba(0,0,0,0.58); } html[data-theme="light"] .fase-meta-card { background:#f7f8fa; border-color:rgba(0,0,0,0.08); } html[data-theme="light"] .fase-meta-label { color:rgba(0,0,0,0.45); } html[data-theme="light"] .fase-meta-value { color:#0a0a0a; } html[data-theme="light"] .fase-meta-bars i { background:rgba(0,0,0,0.12); } html[data-theme="light"] .fase-deliv-label { color:rgba(0,0,0,0.45); } html[data-theme="light"] .fase-deliverable { background:#f7f8fa; border-color:rgba(0,0,0,0.08); } html[data-theme="light"] .fase-deliverable:hover { background:rgba(0,188,212,0.04); border-color:rgba(0,188,212,0.35); } html[data-theme="light"] .fase-panel[data-fase="3"] .fase-deliverable:hover { background:rgba(166,124,0,0.04); border-color:rgba(166,124,0,0.35); } html[data-theme="light"] .fd-name { color:#0a0a0a; } html[data-theme="light"] .fd-time { color:rgba(0,0,0,0.42); } html[data-theme="light"] .fase-foot-note { color:rgba(0,0,0,0.5); } html[data-theme="light"] .fase-foot-note strong { color:#0a0a0a; } /* html[data-theme="light"] .fase-cta → handled by .uiverse */ @media(max-width:820px){ #fases { padding:6rem 1.3rem 5rem; } .fases-stage { padding:2rem 1.5rem 1.8rem; } .fase-delivs { grid-template-columns:1fr; } .fase-meta { gap:.7rem; } .fase-meta-card { min-width:calc(50% - .35rem); } } @media(max-width:560px){ .f3d-stage { height:clamp(360px, 96vw, 420px); } .f3d-card-banner-name { font-size:1.45rem; } .fase-meta-card { min-width:100%; } .fase-foot { flex-direction:column; align-items:stretch; } .fase-cta.uiverse { display:block; width:100%; } } /* ═══════════════════════════════════════════ ¿POR QUÉ NOSOTROS? — v2 con personalidad ═══════════════════════════════════════════ */ #why { position:relative; padding:9rem 2rem 8rem; background: radial-gradient(ellipse 50% 60% at 80% 30%, rgba(0,255,255,0.05) 0%, transparent 55%), radial-gradient(ellipse 45% 55% at 15% 75%, rgba(212,175,55,0.04) 0%, transparent 55%), linear-gradient(to bottom,var(--bg),var(--bg-soft),var(--bg)); overflow:hidden; } #why::before { content:''; position:absolute; top:0; left:50%; transform:translateX(-50%); width:1px; height:90px; background:linear-gradient(to bottom,transparent,var(--gold)); } .why-intro { max-width:680px; margin:0 auto 4rem; text-align:center; font-size:clamp(1.05rem,2vw,1.3rem); font-weight:300; color:rgba(255,255,255,0.65); line-height:1.7; } .why-intro strong { color:#fff; font-weight:600; } /* ── Bento-style grid: cards de tamaños distintos ── */ .why-bento { display:grid; grid-template-columns:repeat(6, 1fr); grid-auto-rows:minmax(180px, auto); gap:1.2rem; max-width:1100px; margin:0 auto; } .why-card { position:relative; padding:2rem 1.8rem; background:rgba(255,255,255,0.03); border:1px solid rgba(0,255,255,0.15); border-radius:20px; overflow:hidden; transition:transform .5s cubic-bezier(.25,.46,.45,.94), border-color .4s, box-shadow .4s; cursor:none; } .why-card:hover { transform:translateY(-6px); border-color:rgba(0,255,255,0.5); box-shadow:0 22px 55px rgba(0,255,255,0.13); } /* Cabecera con número grande estilizado */ .why-number { font-family:'Space Grotesk',sans-serif; font-size:clamp(3rem, 7vw, 5rem); font-weight:700; line-height:.85; letter-spacing:-.05em; background:linear-gradient(135deg, var(--cyan), rgba(0,255,255,0.15)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; margin-bottom:.5rem; display:inline-block; position:relative; z-index:2; } .why-card.gold-flavor .why-number { background:linear-gradient(135deg, var(--gold), rgba(212,175,55,0.15)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } .why-eyebrow { font-family:'Space Mono',monospace; font-size:.6rem; letter-spacing:.32em; text-transform:uppercase; color:var(--gold); margin-bottom:.4rem; } .why-card.cyan-flavor .why-eyebrow { color:var(--cyan); } .why-title { font-family:'Space Grotesk',sans-serif; font-size:1.3rem; font-weight:700; letter-spacing:-.015em; color:#fff; line-height:1.2; margin-bottom:.8rem; position:relative; z-index:2; } .why-text { font-size:.92rem; color:rgba(255,255,255,0.55); line-height:1.75; font-weight:300; position:relative; z-index:2; } .why-text strong { color:rgba(255,255,255,0.85); font-weight:600; } /* ═══════════════════════════════════════════ CARD 01 — STAT GIGANTE (cyan, wide) ═══════════════════════════════════════════ */ .why-stat { grid-column:span 3; grid-row:span 2; background:linear-gradient(135deg, rgba(0,255,255,0.08), rgba(0,255,255,0.01)); border-color:rgba(0,255,255,0.3); display:flex; flex-direction:column; justify-content:space-between; padding:2.4rem 2.2rem; } .why-stat-number { font-family:'Space Grotesk',sans-serif; font-size:clamp(4.5rem, 11vw, 7.5rem); font-weight:700; line-height:.9; letter-spacing:-.06em; background:linear-gradient(135deg, var(--cyan), var(--gold)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; text-shadow:0 0 60px rgba(0,255,255,0.15); margin-bottom:.4rem; position:relative; z-index:2; } .why-stat-label { font-family:'Space Mono',monospace; font-size:.7rem; letter-spacing:.28em; text-transform:uppercase; color:var(--gold); margin-bottom:1.5rem; position:relative; z-index:2; } .why-stat-mini { display:flex; gap:1.5rem; flex-wrap:wrap; padding-top:1.4rem; border-top:1px solid rgba(0,255,255,0.15); position:relative; z-index:2; } .why-stat-mini-item { flex:1; min-width:90px; } .why-stat-mini-val { font-family:'Space Grotesk',sans-serif; font-size:1.5rem; font-weight:700; color:var(--cyan); line-height:1; margin-bottom:.2rem; } .why-stat-mini-lbl { font-family:'Space Mono',monospace; font-size:.55rem; letter-spacing:.2em; color:rgba(255,255,255,0.5); text-transform:uppercase; } /* ═══════════════════════════════════════════ CARD 02 — SPEED (terminal animado, gold) ═══════════════════════════════════════════ */ .why-speed { grid-column:span 3; grid-row:span 2; background:linear-gradient(135deg, rgba(212,175,55,0.06), rgba(212,175,55,0.01)); border-color:rgba(212,175,55,0.3); } .why-speed-timeline { margin-top:1.2rem; position:relative; } .why-tl-item { display:flex; align-items:center; gap:.9rem; padding:.6rem 0; position:relative; } .why-tl-tag { font-family:'Space Mono',monospace; font-size:.62rem; letter-spacing:.15em; color:var(--gold); text-transform:uppercase; width:80px; flex-shrink:0; text-align:right; padding-right:.9rem; border-right:1px solid rgba(212,175,55,0.25); } .why-tl-content { font-size:.85rem; color:rgba(255,255,255,0.7); font-weight:400; } .why-tl-content strong { color:#fff; background:linear-gradient(120deg, transparent 0%, transparent 50%, rgba(212,175,55,0.2) 50%, rgba(212,175,55,0.2) 100%); padding:1px 5px; border-radius:3px; } /* ═══════════════════════════════════════════ CARD 03 — TECH STACK (orbit, cyan) ═══════════════════════════════════════════ */ .why-tech { grid-column:span 3; grid-row:span 2; background:linear-gradient(135deg, rgba(0,255,255,0.05), rgba(0,255,255,0.01)); border-color:rgba(0,255,255,0.22); display:flex; flex-direction:column; } .why-tech-visual { flex:1; position:relative; min-height:140px; margin:1rem 0; } .why-orbit-center { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:60px; height:60px; border-radius:50%; background:linear-gradient(135deg, var(--cyan), rgba(0,200,255,0.5)); display:flex; align-items:center; justify-content:center; font-family:'Space Grotesk',sans-serif; font-size:.85rem; font-weight:700; color:#000; box-shadow:0 0 32px rgba(0,255,255,0.45); z-index:2; letter-spacing:.05em; } .why-orbit-ring { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); border:1px dashed rgba(0,255,255,0.3); border-radius:50%; } .why-orbit-ring.r1 { width:130px; height:130px; animation:orbit 14s linear infinite; } .why-orbit-ring.r2 { width:200px; height:200px; animation:orbit 22s linear infinite reverse; opacity:.6; } @keyframes orbit { from { transform:translate(-50%,-50%) rotate(0deg); } to { transform:translate(-50%,-50%) rotate(360deg); } } .why-orbit-node { position:absolute; padding:.35rem .75rem; background:rgba(2,2,2,0.8); border:1px solid var(--cyan); border-radius:999px; font-family:'Space Mono',monospace; font-size:.58rem; letter-spacing:.15em; text-transform:uppercase; color:var(--cyan); white-space:nowrap; box-shadow:0 4px 12px rgba(0,0,0,0.4); } .why-orbit-node.n1 { top:8%; left:30%; } .why-orbit-node.n2 { top:18%; right:12%; } .why-orbit-node.n3 { bottom:22%; left:8%; border-color:var(--gold); color:var(--gold); } .why-orbit-node.n4 { bottom:12%; right:18%; border-color:var(--gold); color:var(--gold); } .why-orbit-node.n5 { top:48%; left:0; } /* ═══════════════════════════════════════════ CARD 04 — SUPPORT (chat preview, cyan, narrow) ═══════════════════════════════════════════ */ .why-support { grid-column:span 3; grid-row:span 2; background:linear-gradient(135deg, rgba(0,255,255,0.04), rgba(255,255,255,0.01)); border-color:rgba(0,255,255,0.2); } .why-chat { margin-top:1rem; display:flex; flex-direction:column; gap:.5rem; } .why-chat-row { display:flex; gap:.5rem; max-width:85%; opacity:0; animation:chatPop .5s cubic-bezier(.25,.46,.45,.94) forwards; } .why-chat-row.me { margin-left:auto; flex-direction:row-reverse; } .why-chat-row.delay-1 { animation-delay:.15s; } .why-chat-row.delay-2 { animation-delay:.3s; } .why-chat-row.delay-3 { animation-delay:.45s; } @keyframes chatPop { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } } .why-card.why-support:hover .why-chat-row { animation:chatPop .5s cubic-bezier(.25,.46,.45,.94) forwards; } .why-chat-bubble { padding:.5rem .85rem; border-radius:14px; font-size:.78rem; line-height:1.45; } .why-chat-row:not(.me) .why-chat-bubble { background:rgba(255,255,255,0.06); color:rgba(255,255,255,0.8); border-bottom-left-radius:4px; } .why-chat-row.me .why-chat-bubble { background:var(--cyan); color:#000; font-weight:500; border-bottom-right-radius:4px; } .why-chat-typing { display:flex; gap:3px; padding:.7rem .85rem; background:rgba(255,255,255,0.06); border-radius:14px; border-bottom-left-radius:4px; } .why-chat-typing span { width:5px; height:5px; background:rgba(255,255,255,0.5); border-radius:50%; animation:typeDot 1.2s infinite; } .why-chat-typing span:nth-child(2) { animation-delay:.15s; } .why-chat-typing span:nth-child(3) { animation-delay:.3s; } @keyframes typeDot { 0%,60%,100% { transform:translateY(0); opacity:.3; } 30% { transform:translateY(-4px); opacity:1; } } /* ═══════════════════════════════════════════ CARD 05 — SECURITY (badge style, gold) ═══════════════════════════════════════════ */ .why-security { grid-column:span 3; grid-row:span 2; background:linear-gradient(135deg, rgba(212,175,55,0.05), rgba(255,255,255,0.01)); border-color:rgba(212,175,55,0.22); } .why-shield { width:80px; height:80px; margin:0 auto 1rem; position:relative; display:flex; align-items:center; justify-content:center; } .why-shield svg { width:100%; height:100%; filter:drop-shadow(0 0 14px rgba(212,175,55,0.5)); } .why-shield-check { position:absolute; font-size:1.6rem; color:var(--gold); } .why-badges { display:flex; flex-wrap:wrap; gap:.4rem; justify-content:center; margin-top:.8rem; } .why-badge { display:inline-flex; align-items:center; gap:.35rem; padding:.35rem .8rem; background:rgba(212,175,55,0.08); border:1px solid rgba(212,175,55,0.3); border-radius:999px; font-family:'Space Mono',monospace; font-size:.58rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); } .why-badge::before { content:'✓'; color:var(--gold); } /* ═══════════════════════════════════════════ CARD 06 — PRICE (highlight, big) ═══════════════════════════════════════════ */ .why-price { grid-column:span 3; grid-row:span 2; background:linear-gradient(135deg, rgba(0,255,255,0.05), rgba(212,175,55,0.04)); border-color:rgba(0,255,255,0.22); display:flex; flex-direction:column; gap:1rem; padding:2rem 1.8rem; } .why-price-content { flex:1; } .why-price-meta { display:flex; gap:.5rem; flex-wrap:wrap; margin-top:1.2rem; } .why-price-visual-wrap { display:flex; align-items:center; justify-content:center; margin:.6rem 0 .4rem; } .why-price-tag { display:inline-flex; align-items:center; gap:.45rem; padding:.4rem .9rem; background:rgba(0,255,255,0.08); border:1px solid rgba(0,255,255,0.25); border-radius:999px; font-family:'Space Mono',monospace; font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--cyan); } .why-price-tag.gold { background:rgba(212,175,55,0.08); border-color:rgba(212,175,55,0.3); color:var(--gold); } .why-price-visual { font-family:'Space Grotesk',sans-serif; font-size:clamp(3.5rem, 6vw, 4.5rem); font-weight:700; line-height:1; letter-spacing:-.04em; background:linear-gradient(135deg, var(--cyan), var(--gold)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; white-space:nowrap; text-shadow:0 0 40px rgba(0,255,255,0.1); text-align:center; display:inline-block; } .why-price-visual sup { font-size:.4em; vertical-align:super; font-weight:400; background:linear-gradient(135deg, var(--cyan), rgba(0,255,255,0.5)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } /* ═══════════════════════════════════════════ CTA STRIP (bottom) ═══════════════════════════════════════════ */ .why-cta-strip { margin-top:3rem; padding:2rem 2.5rem; background:linear-gradient(135deg, rgba(0,255,255,0.05), rgba(212,175,55,0.03)); border:1px solid rgba(0,255,255,0.18); border-radius:20px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1.5rem; max-width:1100px; margin-left:auto; margin-right:auto; position:relative; /* overflow visible para que el easter egg (Void) que se apoya sobre la franja no quede recortado por el borde superior. */ overflow:visible; } .why-cta-strip::before { content:''; position:absolute; inset:0; background:radial-gradient(circle at 30% 50%, rgba(0,255,255,0.08), transparent 60%); border-radius:inherit; /* respeta las esquinas redondeadas sin overflow:hidden */ pointer-events:none; } .why-cta-content { position:relative; z-index:1; flex:1; min-width:280px; } .why-cta-title { font-family:'Space Grotesk',sans-serif; font-size:1.3rem; font-weight:700; color:#fff; margin-bottom:.4rem; } .why-cta-text { font-size:.9rem; color:rgba(255,255,255,0.6); font-weight:300; line-height:1.6; } /* .why-cta-btn visual → .uiverse.uiverse-blue */ /* ═══════════════════════════════════════════ LIGHT MODE OVERRIDES — Why Us v2 (exhaustivo) ═══════════════════════════════════════════ */ html[data-theme="light"] #why { background: radial-gradient(ellipse 50% 60% at 80% 30%, rgba(0,188,212,0.08) 0%, transparent 55%), radial-gradient(ellipse 45% 55% at 15% 75%, rgba(166,124,0,0.06) 0%, transparent 55%), linear-gradient(to bottom,#f5f6f8,#ffffff,#f5f6f8) !important; } /* INTRO */ html[data-theme="light"] .why-intro { color:rgba(0,0,0,0.65) !important; } html[data-theme="light"] .why-intro strong { color:#0a0a0a !important; } /* BASE CARDS — fondos blancos opacos */ html[data-theme="light"] .why-card { background:#ffffff !important; border-color:rgba(0,0,0,0.1) !important; box-shadow:0 4px 14px rgba(0,0,0,0.04); } html[data-theme="light"] .why-card:hover { border-color:rgba(0,188,212,0.4) !important; box-shadow:0 18px 45px rgba(0,140,160,0.12) !important; } /* Card-specific subtle tints */ html[data-theme="light"] .why-stat { background:linear-gradient(135deg, #f0fcfd, #ffffff) !important; border-color:rgba(0,188,212,0.3) !important; } html[data-theme="light"] .why-speed, html[data-theme="light"] .why-security { background:linear-gradient(135deg, #fffbef, #ffffff) !important; border-color:rgba(166,124,0,0.25) !important; } html[data-theme="light"] .why-tech, html[data-theme="light"] .why-support { background:linear-gradient(135deg, #f0fcfd, #ffffff) !important; border-color:rgba(0,188,212,0.22) !important; } html[data-theme="light"] .why-price { background:linear-gradient(135deg, #f0fcfd, #fffbef) !important; border-color:rgba(0,188,212,0.22) !important; } /* TITLES & NUMBERS — todos negros */ html[data-theme="light"] .why-title, html[data-theme="light"] .why-stat-mini-val { color:#0a0a0a !important; } html[data-theme="light"] .why-text { color:rgba(0,0,0,0.62) !important; } html[data-theme="light"] .why-text strong { color:#0a0a0a !important; } html[data-theme="light"] .why-stat-mini-lbl { color:rgba(0,0,0,0.55) !important; } /* TIMELINE (speed card) */ html[data-theme="light"] .why-tl-content { color:rgba(0,0,0,0.7) !important; } html[data-theme="light"] .why-tl-content strong { color:#0a0a0a !important; background:linear-gradient(120deg, transparent 0%, transparent 50%, rgba(166,124,0,0.25) 50%, rgba(166,124,0,0.25) 100%) !important; } html[data-theme="light"] .why-tl-tag { color:var(--gold) !important; border-right-color:rgba(166,124,0,0.3) !important; } /* GRADIENT NUMBERS */ html[data-theme="light"] .why-number { background:linear-gradient(135deg, var(--cyan), rgba(0,188,212,0.25)) !important; -webkit-background-clip:text !important; -webkit-text-fill-color:transparent !important; background-clip:text !important; } html[data-theme="light"] .why-card.gold-flavor .why-number { background:linear-gradient(135deg, var(--gold), rgba(166,124,0,0.25)) !important; -webkit-background-clip:text !important; -webkit-text-fill-color:transparent !important; background-clip:text !important; } html[data-theme="light"] .why-stat-number, html[data-theme="light"] .why-price-visual { background:linear-gradient(135deg, var(--cyan), var(--gold)) !important; -webkit-background-clip:text !important; -webkit-text-fill-color:transparent !important; background-clip:text !important; text-shadow:none !important; } html[data-theme="light"] .why-price-visual sup { background:linear-gradient(135deg, var(--cyan), rgba(0,188,212,0.5)) !important; -webkit-background-clip:text !important; background-clip:text !important; -webkit-text-fill-color:transparent !important; } /* CHAT (support card) */ html[data-theme="light"] .why-chat-row:not(.me) .why-chat-bubble { background:rgba(0,0,0,0.05) !important; color:rgba(0,0,0,0.78) !important; } html[data-theme="light"] .why-chat-row.me .why-chat-bubble { background:var(--cyan) !important; color:#000 !important; } html[data-theme="light"] .why-chat-typing { background:rgba(0,0,0,0.05) !important; } html[data-theme="light"] .why-chat-typing span { background:rgba(0,0,0,0.55) !important; } /* ORBIT NODES (tech card) */ html[data-theme="light"] .why-orbit-center { background:linear-gradient(135deg, var(--cyan), rgba(0,188,212,0.6)) !important; color:#000 !important; box-shadow:0 0 28px rgba(0,188,212,0.4) !important; } html[data-theme="light"] .why-orbit-ring { border-color:rgba(0,140,160,0.35) !important; } html[data-theme="light"] .why-orbit-node { background:#ffffff !important; color:var(--cyan) !important; border-color:var(--cyan) !important; box-shadow:0 4px 12px rgba(0,0,0,0.08) !important; } html[data-theme="light"] .why-orbit-node.n3, html[data-theme="light"] .why-orbit-node.n4 { color:var(--gold) !important; border-color:var(--gold) !important; } /* BADGES (security card) */ html[data-theme="light"] .why-badge { background:rgba(166,124,0,0.08) !important; color:var(--gold) !important; border-color:rgba(166,124,0,0.4) !important; } html[data-theme="light"] .why-badge::before { color:var(--gold) !important; } /* SHIELD svg */ html[data-theme="light"] .why-shield svg path[fill="url(#shield-grad)"] { fill:rgba(166,124,0,0.12) !important; } /* PRICE TAGS */ html[data-theme="light"] .why-price-tag { background:rgba(0,188,212,0.08) !important; color:var(--cyan) !important; border-color:rgba(0,188,212,0.3) !important; } html[data-theme="light"] .why-price-tag.gold { background:rgba(166,124,0,0.08) !important; color:var(--gold) !important; border-color:rgba(166,124,0,0.35) !important; } /* EYEBROW labels */ html[data-theme="light"] .why-eyebrow { color:var(--gold) !important; } html[data-theme="light"] .why-card.cyan-flavor .why-eyebrow { color:var(--cyan) !important; } html[data-theme="light"] .why-stat-label { color:var(--gold) !important; } /* CTA STRIP */ html[data-theme="light"] .why-cta-strip { background:linear-gradient(135deg, rgba(0,188,212,0.08), rgba(166,124,0,0.05)) !important; border-color:rgba(0,188,212,0.3) !important; } html[data-theme="light"] .why-cta-strip::before { background:radial-gradient(circle at 30% 50%, rgba(0,188,212,0.1), transparent 60%) !important; } html[data-theme="light"] .why-cta-title { color:#0a0a0a !important; } html[data-theme="light"] .why-cta-text { color:rgba(0,0,0,0.65) !important; } /* html[data-theme="light"] .why-cta-btn → handled by .uiverse */ @media(max-width:920px){ #why { padding:6rem 1.5rem 5rem; } .why-bento { grid-template-columns:repeat(2, 1fr); grid-auto-rows:auto; gap:1rem; } .why-stat, .why-speed, .why-tech, .why-support, .why-security { grid-column:span 2; grid-row:auto; } .why-price { grid-column:span 2; } .why-card { padding:1.6rem 1.4rem; } .why-stat-number { font-size:clamp(3.5rem, 14vw, 5.5rem); } .why-stat-mini { gap:1rem; } .why-stat-mini-val { font-size:1.3rem; } .why-number { font-size:clamp(2.4rem, 9vw, 3.5rem); } .why-title { font-size:1.1rem; } .why-text, .why-tl-content { font-size:.85rem; } .why-tech-visual { min-height:160px; margin:.8rem 0; } .why-orbit-center { width:50px; height:50px; font-size:.7rem; } .why-orbit-ring.r1 { width:115px; height:115px; } .why-orbit-ring.r2 { width:175px; height:175px; } .why-orbit-node { font-size:.52rem; padding:.28rem .6rem; } .why-price-visual { font-size:clamp(3rem, 9vw, 4rem); } .why-cta-strip { flex-direction:column; text-align:center; padding:1.8rem 1.6rem; } } @media(max-width:560px){ #why { padding:5rem 1rem 4rem; } .why-bento { grid-template-columns:1fr; gap:.9rem; } .why-stat, .why-speed, .why-tech, .why-support, .why-security, .why-price { grid-column:span 1; } .why-card { padding:1.4rem 1.2rem; border-radius:16px; } .why-stat { padding:1.6rem 1.3rem; } .why-stat-number { font-size:3.5rem; } .why-stat-mini { gap:.8rem; padding-top:1rem; } .why-stat-mini-val { font-size:1.15rem; } .why-stat-mini-lbl { font-size:.5rem; letter-spacing:.16em; } .why-number { font-size:2.4rem; } .why-eyebrow { font-size:.55rem; letter-spacing:.25em; } .why-title { font-size:1.05rem; } .why-text { font-size:.82rem; line-height:1.65; } .why-tl-tag { width:64px; font-size:.55rem; padding-right:.6rem; } .why-tl-content { font-size:.78rem; } .why-tech-visual { min-height:150px; } .why-orbit-ring.r2 { display:none; } .why-orbit-ring.r1 { width:120px; height:120px; } .why-orbit-node { font-size:.5rem; padding:.25rem .55rem; letter-spacing:.1em; } .why-shield { width:60px; height:60px; } .why-badge { font-size:.5rem; padding:.28rem .65rem; } .why-price { padding:1.6rem 1.3rem; gap:1.2rem; } .why-price-visual { font-size:3rem; } .why-price-tag { font-size:.55rem; padding:.32rem .75rem; } .why-cta-strip { padding:1.6rem 1.2rem; margin-top:2rem; } .why-cta-title { font-size:1.1rem; } .why-cta-text { font-size:.82rem; } /* .why-cta-btn → .uiverse handles sizing */ .why-chat-bubble { font-size:.72rem; padding:.45rem .75rem; } } /* ═══════════════════════════════════════════ DEMOS INTERACTIVOS — Diseño Premium v2 ═══════════════════════════════════════════ */ #demos { position:relative; padding:9rem 2rem 8rem; background: radial-gradient(ellipse 50% 60% at 20% 30%, rgba(0,255,255,0.04) 0%, transparent 55%), radial-gradient(ellipse 45% 50% at 80% 70%, rgba(212,175,55,0.035) 0%, transparent 55%), linear-gradient(to bottom,var(--black),rgba(0,3,5,0.98),var(--black)); overflow:hidden; } #demos::before { content:''; position:absolute; top:0; left:50%; transform:translateX(-50%); width:1px; height:90px; background:linear-gradient(to bottom,transparent,var(--cyan)); } .demos-grid { display:flex; flex-direction:column; gap:5.5rem; max-width:1100px; margin:0 auto; } .demo-block { display:grid; grid-template-columns:1fr 1.25fr; gap:3.5rem; align-items:center; } .demo-block.reverse { grid-template-columns:1.25fr 1fr; } .demo-block.reverse .demo-info { order:2; } .demo-block.reverse .demo-stage { order:1; } .demo-eyebrow { display:inline-flex; align-items:center; font-family:'Space Mono',monospace; font-size:.62rem; letter-spacing:.3em; color:var(--gold); text-transform:uppercase; margin-bottom:1rem; padding:.35rem 1rem; border:1px solid rgba(212,175,55,0.35); border-radius:999px; background:linear-gradient(90deg, rgba(212,175,55,0.08), transparent); } .demo-title { font-family:'Space Grotesk',sans-serif; font-size:clamp(1.7rem,3vw,2.35rem); font-weight:700; letter-spacing:-.025em; color:#fff; line-height:1.1; margin-bottom:1rem; } .demo-title em { font-style:normal; color:var(--cyan); text-shadow:0 0 24px rgba(0,255,255,0.45); } .demo-text { font-size:.97rem; color:rgba(255,255,255,0.55); line-height:1.78; font-weight:300; margin-bottom:1.5rem; } .demo-features { list-style:none; display:flex; flex-direction:column; gap:.6rem; } .demo-features li { display:flex; align-items:flex-start; gap:.7rem; font-size:.88rem; color:rgba(255,255,255,0.62); font-weight:400; } .demo-features li::before { content:'✓'; color:#000; background:var(--cyan); width:18px; height:18px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.65rem; font-weight:700; flex-shrink:0; margin-top:2px; box-shadow:0 0 10px rgba(0,255,255,0.4); } /* Demo stage shell */ .demo-stage { position:relative; background:linear-gradient(135deg, rgba(255,255,255,0.04), rgba(0,255,255,0.02)); border:1px solid rgba(0,255,255,0.18); border-radius:22px; padding:1.8rem; min-height:380px; display:flex; flex-direction:column; overflow:hidden; backdrop-filter:blur(12px); box-shadow: 0 20px 60px rgba(0,0,0,0.4), inset 0 0 60px rgba(0,255,255,0.02); } .demo-stage::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,var(--cyan),transparent); } .demo-stage::after { content:''; position:absolute; top:-50%; right:-30%; width:300px; height:300px; background:radial-gradient(circle, rgba(0,255,255,0.06) 0%, transparent 70%); pointer-events:none; } .stage-header { display:flex; align-items:center; gap:.55rem; padding-bottom:1rem; margin-bottom:1.2rem; border-bottom:1px solid rgba(0,255,255,0.1); position:relative; z-index:1; } .stage-dot { width:10px; height:10px; border-radius:50%; } .stage-dot.r { background:#ff5f56; box-shadow:0 0 6px rgba(255,95,86,0.5); } .stage-dot.y { background:#ffbd2e; box-shadow:0 0 6px rgba(255,189,46,0.5); } .stage-dot.g { background:#27c93f; box-shadow:0 0 6px rgba(39,201,63,0.5); } .stage-title { margin-left:auto; margin-right:auto; font-family:'Space Mono',monospace; font-size:.62rem; letter-spacing:.22em; color:rgba(0,255,255,0.55); text-transform:uppercase; } /* ───────────────────────────────────────── DEMO 1: AUTOMATIZACIÓN — Visual workflow ───────────────────────────────────────── */ .auto-stage { position:relative; z-index:1; } .auto-scenario { display:flex; align-items:center; gap:.7rem; padding:.8rem 1rem; background:rgba(0,255,255,0.05); border:1px solid rgba(0,255,255,0.2); border-radius:12px; margin-bottom:1.3rem; } .auto-scenario-icon { width:36px; height:36px; flex-shrink:0; border-radius:50%; background:linear-gradient(135deg, var(--cyan), rgba(0,200,255,0.6)); display:flex; align-items:center; justify-content:center; font-size:1.1rem; box-shadow:0 0 18px rgba(0,255,255,0.4); } .auto-scenario-text { flex:1; font-size:.83rem; color:rgba(255,255,255,0.85); line-height:1.4; } .auto-scenario-text strong { color:var(--cyan); font-weight:700; } .flow { display:flex; flex-direction:column; gap:.6rem; margin-bottom:1.2rem; } .flow-row { display:flex; align-items:center; gap:.85rem; padding:.95rem 1.1rem; background:rgba(255,255,255,0.025); border:1px solid rgba(0,255,255,0.12); border-radius:14px; transition:border-color .4s, background .4s, transform .4s, box-shadow .4s; opacity:.55; position:relative; overflow:hidden; } .flow-row::before { content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:transparent; transition:background .35s; } .flow-row.active { border-color:rgba(0,255,255,0.55); background:linear-gradient(90deg, rgba(0,255,255,0.1), rgba(0,255,255,0.02)); box-shadow:0 0 28px rgba(0,255,255,0.2); opacity:1; transform:translateX(6px); } .flow-row.active::before { background:var(--cyan); box-shadow:0 0 14px var(--cyan); } .flow-row.done { opacity:1; border-color:rgba(39,201,63,0.4); background:rgba(39,201,63,0.04); } .flow-row.done::before { background:#27c93f; } .flow-icon { width:42px; height:42px; flex-shrink:0; border-radius:11px; background:linear-gradient(135deg, rgba(0,255,255,0.1), rgba(0,255,255,0.02)); border:1px solid rgba(0,255,255,0.25); display:flex; align-items:center; justify-content:center; font-size:1.25rem; transition:all .35s; } .flow-row.active .flow-icon { background:linear-gradient(135deg, rgba(0,255,255,0.3), rgba(0,200,255,0.15)); border-color:var(--cyan); box-shadow:0 0 18px rgba(0,255,255,0.35); animation:iconSpin .8s ease-out; } .flow-row.done .flow-icon { background:linear-gradient(135deg, rgba(39,201,63,0.2), rgba(39,201,63,0.05)); border-color:rgba(39,201,63,0.6); } @keyframes iconSpin { 0% { transform:scale(1) rotate(0deg); } 50% { transform:scale(1.15) rotate(8deg); } 100% { transform:scale(1) rotate(0deg); } } .flow-body { flex:1; min-width:0; } .flow-name { font-family:'Space Grotesk',sans-serif; font-size:.92rem; font-weight:700; color:#fff; margin-bottom:.2rem; } .flow-desc { font-size:.75rem; color:rgba(255,255,255,0.5); font-weight:300; } .flow-status { font-size:.62rem; font-family:'Space Mono',monospace; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,0.3); padding:.25rem .65rem; border-radius:999px; border:1px solid rgba(255,255,255,0.15); white-space:nowrap; } .flow-row.active .flow-status { color:#000; background:var(--cyan); border-color:var(--cyan); box-shadow:0 0 14px rgba(0,255,255,0.4); } .flow-row.done .flow-status { color:#27c93f; border-color:rgba(39,201,63,0.5); background:rgba(39,201,63,0.08); } .flow-progress { height:4px; border-radius:999px; background:rgba(255,255,255,0.05); overflow:hidden; margin-bottom:1rem; position:relative; } .flow-progress-bar { height:100%; width:0%; background:linear-gradient(90deg, var(--cyan), rgba(39,201,63,0.8)); border-radius:999px; transition:width .8s cubic-bezier(.25,.46,.45,.94); box-shadow:0 0 12px rgba(0,255,255,0.5); } .flow-controls { display:flex; gap:.6rem; justify-content:center; } /* ── Demo "automatización" — botones .uiverse (sizing de contexto) ── */ .flow-cta.uiverse { display:block; } .flow-cta.uiverse .wrapper { min-width:0; padding:11px 0; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; font-weight:700; } /* ───────────────────────────────────────── DEMO 2: MARKETING — Live Dashboard ───────────────────────────────────────── */ .mkt-stage { position:relative; z-index:1; } .mkt-campaign-bar { display:flex; gap:.5rem; margin-bottom:1.2rem; flex-wrap:wrap; } .mkt-camp { flex:1; min-width:90px; padding:.55rem .7rem; border:1px solid rgba(255,255,255,0.12); background:rgba(255,255,255,0.025); border-radius:10px; cursor:none; text-align:center; transition:all .25s; } .mkt-camp:hover { border-color:rgba(0,255,255,0.4); background:rgba(0,255,255,0.04); } .mkt-camp.active { border-color:var(--cyan); background:rgba(0,255,255,0.1); box-shadow:0 0 18px rgba(0,255,255,0.25); } .mkt-camp-name { font-family:'Space Grotesk',sans-serif; font-size:.72rem; font-weight:600; color:rgba(255,255,255,0.7); margin-bottom:.15rem; } .mkt-camp.active .mkt-camp-name { color:#fff; } .mkt-camp-tag { font-family:'Space Mono',monospace; font-size:.5rem; letter-spacing:.15em; color:rgba(0,255,255,0.5); text-transform:uppercase; } .mkt-grid { display:grid; grid-template-columns:1fr 1fr; gap:.85rem; margin-bottom:1rem; } .mkt-card { background:linear-gradient(135deg, rgba(0,255,255,0.04), rgba(255,255,255,0.015)); border:1px solid rgba(0,255,255,0.15); border-radius:14px; padding:1.1rem 1.15rem; position:relative; overflow:hidden; transition:border-color .3s, background .3s, transform .3s; } .mkt-card:hover { border-color:rgba(0,255,255,0.4); background:linear-gradient(135deg, rgba(0,255,255,0.08), rgba(255,255,255,0.02)); transform:translateY(-2px); } .mkt-card.gold { background:linear-gradient(135deg, rgba(212,175,55,0.05), rgba(255,255,255,0.015)); border-color:rgba(212,175,55,0.2); } .mkt-card.gold:hover { border-color:rgba(212,175,55,0.5); background:linear-gradient(135deg, rgba(212,175,55,0.1), rgba(255,255,255,0.02)); } .mkt-card-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:.5rem; } .mkt-card-label { font-family:'Space Mono',monospace; font-size:.58rem; letter-spacing:.2em; color:rgba(255,255,255,0.45); text-transform:uppercase; } .mkt-card-emoji { font-size:1rem; opacity:.7; } .mkt-card-value { font-family:'Space Grotesk',sans-serif; font-size:1.8rem; font-weight:700; color:#fff; line-height:1; margin-bottom:.4rem; letter-spacing:-.025em; } .mkt-card.gold .mkt-card-value { color:#fff; } .mkt-card-delta { font-family:'Space Mono',monospace; font-size:.66rem; letter-spacing:.08em; color:#27c93f; display:inline-flex; align-items:center; gap:.3rem; } .mkt-card-delta::before { content:'▲'; } .mkt-bar { position:absolute; bottom:0; left:0; height:3px; background:linear-gradient(90deg,var(--cyan),rgba(0,255,255,0)); width:0%; transition:width .8s ease-out; box-shadow:0 0 8px rgba(0,255,255,0.5); } .mkt-card.gold .mkt-bar { background:linear-gradient(90deg,var(--gold),rgba(212,175,55,0)); box-shadow:0 0 8px rgba(212,175,55,0.5); } .mkt-chart-wrap { background:linear-gradient(135deg, rgba(0,255,255,0.03), rgba(255,255,255,0.01)); border:1px solid rgba(0,255,255,0.12); border-radius:14px; padding:1rem 1.2rem .6rem; } .mkt-chart-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:.4rem; } .mkt-chart-label { font-family:'Space Mono',monospace; font-size:.6rem; letter-spacing:.2em; color:rgba(255,255,255,0.55); text-transform:uppercase; } .mkt-chart-value { font-family:'Space Grotesk',sans-serif; font-size:.78rem; font-weight:700; color:var(--cyan); } .mkt-chart-wrap svg { width:100%; height:55px; display:block; } /* ───────────────────────────────────────── DEMO 3: CHECKOUT EXPRESS — Pago realista ───────────────────────────────────────── */ .ck-stage { position:relative; z-index:1; } .ck-stepper { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.3rem; padding:0 .3rem; } .ck-stepper-item { display:flex; flex-direction:column; align-items:center; gap:.35rem; flex:1; position:relative; } .ck-stepper-circle { width:32px; height:32px; border-radius:50%; border:1.5px solid rgba(255,255,255,0.15); background:rgba(255,255,255,0.03); display:flex; align-items:center; justify-content:center; font-family:'Space Grotesk',sans-serif; font-size:.78rem; font-weight:700; color:rgba(255,255,255,0.4); transition:all .35s; z-index:2; } .ck-stepper-item.active .ck-stepper-circle { border-color:var(--cyan); background:var(--cyan); color:#000; box-shadow:0 0 18px rgba(0,255,255,0.5); } .ck-stepper-item.done .ck-stepper-circle { border-color:#27c93f; background:#27c93f; color:#000; } .ck-stepper-label { font-family:'Space Mono',monospace; font-size:.55rem; letter-spacing:.16em; color:rgba(255,255,255,0.4); text-transform:uppercase; white-space:nowrap; } .ck-stepper-item.active .ck-stepper-label { color:var(--cyan); } .ck-stepper-item.done .ck-stepper-label { color:#27c93f; } .ck-stepper-line { flex:0 0 30px; height:1px; background:rgba(255,255,255,0.1); margin:0 .3rem; margin-bottom:1.3rem; position:relative; transition:background .4s; } .ck-stepper-line.done { background:#27c93f; } .ck-step { display:none; flex-direction:column; gap:.7rem; animation:ckFade .45s ease; } .ck-step.active { display:flex; } @keyframes ckFade { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} } .ck-h { font-family:'Space Grotesk',sans-serif; font-size:1rem; font-weight:700; color:#fff; } .ck-services { display:flex; flex-direction:column; gap:.55rem; } .ck-svc { display:flex; align-items:center; gap:.85rem; padding:.95rem 1rem; background:linear-gradient(135deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01)); border:1.5px solid rgba(0,255,255,0.12); border-radius:13px; cursor:none; transition:all .3s; position:relative; overflow:hidden; } .ck-svc::before { content:''; position:absolute; inset:0; background:linear-gradient(135deg, rgba(0,255,255,0.06), transparent 60%); opacity:0; transition:opacity .3s; } .ck-svc:hover { border-color:rgba(0,255,255,0.4); transform:translateX(3px); } .ck-svc:hover::before { opacity:1; } .ck-svc.selected { border-color:var(--cyan); background:linear-gradient(135deg, rgba(0,255,255,0.1), rgba(0,255,255,0.02)); box-shadow:0 0 22px rgba(0,255,255,0.25); } .ck-svc.selected::before { opacity:1; } .ck-svc-icon { width:38px; height:38px; flex-shrink:0; border-radius:10px; background:rgba(0,255,255,0.08); border:1px solid rgba(0,255,255,0.2); display:flex; align-items:center; justify-content:center; font-size:1.1rem; transition:all .3s; position:relative; z-index:1; } .ck-svc.selected .ck-svc-icon { background:var(--cyan); border-color:var(--cyan); box-shadow:0 0 14px rgba(0,255,255,0.5); } .ck-svc-body { flex:1; min-width:0; position:relative; z-index:1; } .ck-svc-name { font-family:'Space Grotesk',sans-serif; font-size:.92rem; font-weight:700; color:#fff; margin-bottom:.15rem; } .ck-svc-desc { font-size:.72rem; color:rgba(255,255,255,0.5); font-weight:300; } .ck-svc-price { font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:1.1rem; color:var(--cyan); text-shadow:0 0 12px rgba(0,255,255,0.3); position:relative; z-index:1; } .ck-total { margin-top:.4rem; padding:1rem 1.1rem; background:linear-gradient(135deg, rgba(0,255,255,0.06), rgba(0,255,255,0.01)); border:1px solid rgba(0,255,255,0.18); border-radius:12px; display:flex; align-items:center; justify-content:space-between; } .ck-total-label { font-family:'Space Mono',monospace; font-size:.68rem; letter-spacing:.18em; color:rgba(255,255,255,0.55); text-transform:uppercase; } .ck-total-value { font-family:'Space Grotesk',sans-serif; font-size:1.5rem; font-weight:700; color:var(--cyan); text-shadow:0 0 18px rgba(0,255,255,0.4); } /* ── Checkout — botones .uiverse a ancho completo ── */ .ck-cta.uiverse { display:block; width:100%; margin-top:.4rem; } .ck-cta.uiverse .wrapper { width:100%; min-width:unset; padding:13px 0; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; font-weight:700; } .ck-pay-methods { display:grid; grid-template-columns:repeat(3,1fr); gap:.6rem; } .ck-pay { padding:1rem .5rem; border:1.5px solid rgba(0,255,255,0.15); border-radius:13px; text-align:center; background:rgba(255,255,255,0.02); cursor:none; transition:all .25s; position:relative; } .ck-pay:hover { border-color:rgba(0,255,255,0.45); background:rgba(0,255,255,0.05); transform:translateY(-2px); } .ck-pay.selected { border-color:var(--cyan); background:linear-gradient(135deg, rgba(0,255,255,0.12), rgba(0,255,255,0.03)); box-shadow:0 0 18px rgba(0,255,255,0.3); } .ck-pay-icon { display:block; font-size:1.6rem; margin-bottom:.4rem; filter:grayscale(1) brightness(1.5); opacity:.7; transition:filter .3s, opacity .3s; } .ck-pay:hover .ck-pay-icon, .ck-pay.selected .ck-pay-icon { filter:grayscale(0) brightness(1); opacity:1; } .ck-pay-name { font-family:'Space Grotesk',sans-serif; font-size:.75rem; font-weight:600; color:rgba(255,255,255,0.65); } .ck-pay.selected .ck-pay-name { color:#fff; } .ck-card-form { display:none; margin-top:.4rem; padding:1rem; border-radius:12px; background:rgba(0,0,0,0.3); border:1px solid rgba(0,255,255,0.12); flex-direction:column; gap:.5rem; animation:ckFade .4s ease; } .ck-card-form.active { display:flex; } .ck-input { background:rgba(255,255,255,0.03); border:1px solid rgba(0,255,255,0.15); border-radius:8px; padding:.65rem .85rem; font-family:'Space Mono',monospace; font-size:.78rem; color:#fff; outline:none; cursor:none; transition:border-color .25s; letter-spacing:.05em; } .ck-input:focus { border-color:var(--cyan); } .ck-input::placeholder { color:rgba(255,255,255,0.25); } .ck-input-row { display:flex; gap:.5rem; } .ck-input-row .ck-input { flex:1; } .ck-success { text-align:center; padding:1.8rem .8rem; } .ck-success-icon { width:72px; height:72px; margin:0 auto 1.2rem; border-radius:50%; background:linear-gradient(135deg, rgba(0,255,255,0.2), rgba(39,201,63,0.15)); border:1.5px solid var(--cyan); display:flex; align-items:center; justify-content:center; font-size:2rem; color:var(--cyan); box-shadow:0 0 32px rgba(0,255,255,0.45); animation:ckPulse 1.4s ease-in-out infinite; } @keyframes ckPulse { 0%,100% { transform:scale(1); box-shadow:0 0 32px rgba(0,255,255,0.45); } 50% { transform:scale(1.06); box-shadow:0 0 42px rgba(0,255,255,0.65); } } .ck-success h4 { font-family:'Space Grotesk',sans-serif; font-size:1.3rem; font-weight:700; color:#fff; margin-bottom:.6rem; } .ck-success-amount { font-family:'Space Grotesk',sans-serif; font-size:1.5rem; font-weight:700; color:var(--cyan); text-shadow:0 0 18px rgba(0,255,255,0.4); margin-bottom:.8rem; } .ck-success p { font-size:.85rem; color:rgba(255,255,255,0.55); font-weight:300; line-height:1.6; margin-bottom:1rem; } .ck-notify { display:flex; gap:.5rem; justify-content:center; margin-bottom:1.2rem; } .ck-notify-chip { display:inline-flex; align-items:center; gap:.4rem; padding:.45rem .9rem; background:rgba(39,201,63,0.08); border:1px solid rgba(39,201,63,0.3); border-radius:999px; font-family:'Space Mono',monospace; font-size:.62rem; letter-spacing:.1em; color:#27c93f; } @media(max-width:820px){ .demo-block, .demo-block.reverse { grid-template-columns:1fr; gap:2rem; } .demo-block.reverse .demo-info { order:1; } .demo-block.reverse .demo-stage { order:2; } .ck-stepper-label { display:none; } } /* ═══════════════════════════════════════════ PRECIOS ═══════════════════════════════════════════ */ #precios { position:relative; padding:10rem 2rem 11rem; background:linear-gradient(to bottom,var(--black),rgba(0,3,3,0.98),var(--black)); overflow:hidden; } #precios::before { content:''; position:absolute; top:0; left:50%; transform:translateX(-50%); width:1px; height:80px; background:linear-gradient(to bottom,transparent,rgba(212,175,55,0.5)); } .precios-headline { text-align:center; max-width:720px; margin:0 auto 4.5rem; font-family:'Space Grotesk',sans-serif; font-size:clamp(1.15rem, 2.2vw, 1.55rem); font-weight:400; color:rgba(255,255,255,0.65); line-height:1.65; letter-spacing:-.005em; } .precios-sub { text-align:center; font-family:'Space Mono',monospace; font-size:clamp(.85rem, 1.4vw, 1.05rem); letter-spacing:.18em; color:rgba(0,255,255,0.65); text-transform:uppercase; margin-top:1.2rem; } /* 3D Bill scene */ .bill-scene { margin:4rem auto 0; width:min(420px, 80vw); height:min(220px, 42vw); perspective:1400px; position:relative; cursor:none; user-select:none; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; -webkit-touch-callout:none; -webkit-tap-highlight-color:transparent; touch-action:none; } .bill-scene *, .bill-scene *::before, .bill-scene *::after { user-select:none; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; pointer-events:none; } .bill { width:100%; height:100%; position:relative; transform-style:preserve-3d; transform:rotateY(-15deg) rotateX(8deg); transition:transform .15s ease-out; } .bill-face { position:absolute; inset:0; border-radius:14px; backface-visibility:hidden; -webkit-backface-visibility:hidden; display:flex; align-items:center; justify-content:center; overflow:hidden; box-shadow: 0 30px 60px rgba(0,150,80,0.25), 0 0 80px rgba(0,200,100,0.15), inset 0 0 40px rgba(0,255,150,0.08); } /* Front face — translucent green */ .bill-front { background: radial-gradient(ellipse at 30% 30%, rgba(50,255,150,0.18) 0%, transparent 60%), radial-gradient(ellipse at 70% 70%, rgba(0,200,100,0.12) 0%, transparent 60%), linear-gradient(135deg, rgba(20,80,50,0.55), rgba(10,40,25,0.7)); border:1.5px solid rgba(80,255,150,0.45); backdrop-filter:blur(6px); } /* Back face — slightly different tint */ .bill-back { background: radial-gradient(ellipse at 70% 30%, rgba(80,255,150,0.16) 0%, transparent 60%), radial-gradient(ellipse at 30% 70%, rgba(0,180,90,0.10) 0%, transparent 60%), linear-gradient(135deg, rgba(15,60,40,0.65), rgba(5,30,18,0.75)); border:1.5px solid rgba(80,255,150,0.4); transform:rotateY(180deg); backdrop-filter:blur(6px); } .bill-face::before { content:''; position:absolute; inset:0; background: linear-gradient(45deg, transparent 30%, rgba(120,255,180,0.08) 50%, transparent 70%); pointer-events:none; } .bill-face::after { content:''; position:absolute; inset:10px; border:1px dashed rgba(120,255,180,0.3); border-radius:8px; pointer-events:none; } /* Inner content of bill */ .bill-inner { position:relative; z-index:2; text-align:center; color:rgba(180,255,200,0.9); font-family:'Space Grotesk',sans-serif; width:100%; padding:1rem 1.5rem; } .bill-amount { font-size:clamp(2.5rem, 7vw, 4rem); font-weight:700; letter-spacing:-.04em; line-height:1; text-shadow:0 0 24px rgba(120,255,180,0.5); color:#a8ffce; } .bill-label-top { position:absolute; top:14px; left:18px; font-family:'Space Mono',monospace; font-size:.62rem; letter-spacing:.3em; color:rgba(160,255,200,0.7); text-transform:uppercase; } .bill-label-bot { position:absolute; bottom:14px; right:18px; font-family:'Space Mono',monospace; font-size:.55rem; letter-spacing:.2em; color:rgba(160,255,200,0.55); text-transform:uppercase; } .bill-corner { position:absolute; font-family:'Space Grotesk',sans-serif; font-size:1.05rem; font-weight:700; color:rgba(180,255,210,0.7); } .bill-tl { top:14px; right:18px; } .bill-br { bottom:14px; left:18px; } .bill-seal { width:48px; height:48px; border-radius:50%; border:1.5px solid rgba(120,255,180,0.5); display:flex; align-items:center; justify-content:center; font-family:'Space Mono',monospace; font-size:.7rem; letter-spacing:.05em; color:rgba(160,255,200,0.7); background:rgba(0,80,40,0.2); margin:0 auto .6rem; } .bill-hint { text-align:center; margin-top:2rem; font-family:'Space Mono',monospace; font-size:.7rem; letter-spacing:.25em; color:rgba(120,255,180,0.4); text-transform:uppercase; } .bill-hint::before { content:'↻ '; } /* ═══════════════════════════════════════════ MÁS INFORMACIÓN ═══════════════════════════════════════════ */ #info { position:relative; padding:8rem 2rem 7rem; background: radial-gradient(ellipse 65% 75% at 75% 25%, rgba(0,255,255,0.10) 0%, transparent 55%), radial-gradient(ellipse 55% 65% at 18% 80%, rgba(212,175,55,0.08) 0%, transparent 55%), radial-gradient(ellipse 80% 45% at 50% 0%, rgba(0,255,255,0.06) 0%, transparent 50%), radial-gradient(ellipse 45% 50% at 90% 65%, rgba(212,175,55,0.06) 0%, transparent 50%), linear-gradient(to bottom,var(--black),rgba(0,3,7,0.99),var(--black)); overflow:hidden; } #info::before { content:''; position:absolute; top:0; left:50%; transform:translateX(-50%); width:1px; height:80px; background:linear-gradient(to bottom,transparent,var(--cyan)); z-index:2; } /* Animated grid pattern overlay — brighter and faster */ #info::after { content:''; position:absolute; inset:0; pointer-events:none; background-image: linear-gradient(rgba(0,255,255,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(0,255,255,0.06) 1px, transparent 1px); background-size:55px 55px; mask-image:radial-gradient(ellipse 75% 75% at 50% 50%, #000 35%, transparent 85%); -webkit-mask-image:radial-gradient(ellipse 75% 75% at 50% 50%, #000 35%, transparent 85%); animation:gridDrift 18s linear infinite; z-index:1; } @keyframes gridDrift { 0% { background-position:0 0, 0 0; } 100% { background-position:55px 55px, 55px 55px; } } /* Particle canvas — reactive mouse animation */ #info-canvas { position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; display:block; } .info-inner { position:relative; z-index:3; max-width:1080px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center; } /* Left: headline block */ .info-headline { position:relative; } .info-headline .sec-label { text-align:left; margin-bottom:1rem; } .info-headline h2 { font-family:'Space Grotesk',sans-serif; font-size:clamp(1.9rem,3.8vw,2.9rem); font-weight:700; letter-spacing:-.025em; color:#fff; line-height:1.12; margin-bottom:1.6rem; } .info-headline h2 em { font-style:normal; color:var(--cyan); text-shadow:0 0 30px rgba(0,255,255,0.45); } .info-headline p { font-size:1rem; font-weight:300; color:rgba(255,255,255,0.5); line-height:1.82; margin-bottom:1.4rem; } .info-headline p strong { color:rgba(255,255,255,0.8); font-weight:500; } /* CTA button group */ .info-ctas { display:flex; gap:1rem; flex-wrap:wrap; margin-top:2.4rem; } /* .btn-info-primary visual → .uiverse.uiverse-blue */ /* .btn-info-ghost visual → .uiverse.uiverse-gold */ /* Right: feature pillars */ .info-pillars { display:flex; flex-direction:column; gap:1.4rem; } .pillar { display:flex; gap:1.2rem; align-items:flex-start; padding:1.4rem 1.6rem; background:rgba(255,255,255,0.025); border:1px solid rgba(0,255,255,0.08); border-radius:16px; transition:border-color .35s, background .35s, transform .35s; } .pillar:hover { border-color:rgba(0,255,255,0.3); background:rgba(0,255,255,0.04); transform:translateX(6px); } .pillar-icon { width:42px; height:42px; flex-shrink:0; border:1px solid rgba(0,255,255,0.2); border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:1.1rem; background:rgba(0,255,255,0.04); } .pillar-title { font-family:'Space Grotesk',sans-serif; font-size:.95rem; font-weight:700; color:#fff; margin-bottom:.3rem; } .pillar-text { font-size:.83rem; color:rgba(255,255,255,0.42); line-height:1.65; font-weight:300; } /* Testimonial-style quote — easter egg interactive */ .info-quote { margin-top:3rem; padding:2rem 2.2rem; background:rgba(212,175,55,0.04); border:1px solid rgba(212,175,55,0.2); border-left:3px solid var(--gold); border-radius:12px; grid-column: 1 / -1; cursor:none; user-select:none; transition:background .5s cubic-bezier(.25,.46,.45,.94), border-color .5s cubic-bezier(.25,.46,.45,.94), box-shadow .5s cubic-bezier(.25,.46,.45,.94), transform .4s cubic-bezier(.25,.46,.45,.94); position:relative; overflow:hidden; } .info-quote::before { content:''; position:absolute; top:0; left:0; right:0; bottom:0; background:radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(0,255,255,0.08), transparent 50%); opacity:0; transition:opacity .5s; pointer-events:none; } .info-quote:hover { transform:translateY(-3px); box-shadow:0 14px 40px rgba(0,0,0,0.4); } .info-quote.cyan-mode { background:rgba(0,255,255,0.05); border-color:rgba(0,255,255,0.35); border-left-color:var(--cyan); box-shadow:0 0 50px rgba(0,255,255,0.15); } .info-quote.cyan-mode::before { opacity:1; } .info-quote p { font-size:1.05rem; font-weight:300; font-style:italic; color:rgba(255,255,255,0.65); line-height:1.8; letter-spacing:.01em; position:relative; z-index:1; transition:color .5s; } .info-quote p strong { color:var(--gold); font-style:normal; font-weight:600; transition:color .5s, text-shadow .5s; } .info-quote.cyan-mode p strong { color:var(--cyan); text-shadow:0 0 18px rgba(0,255,255,0.45); } .info-quote cite { display:block; margin-top:.9rem; font-family:'Space Mono',monospace; font-size:.62rem; letter-spacing:.25em; color:rgba(212,175,55,0.55); text-transform:uppercase; font-style:normal; position:relative; z-index:1; transition:color .5s; } .info-quote.cyan-mode cite { color:rgba(0,255,255,0.6); } .info-quote .easter-hint { display:inline-block; margin-left:.5rem; font-size:.55rem; color:rgba(255,255,255,0.2); letter-spacing:.2em; opacity:0; transition:opacity .5s; } .info-quote:hover .easter-hint { opacity:1; } .info-quote.cyan-mode .easter-hint { color:rgba(0,255,255,0.5); opacity:1; } /* ═══════════════════════════════════════════ CONTACTO (sección final) ═══════════════════════════════════════════ */ #contact { position:relative; padding:9rem 2rem 6rem; background: radial-gradient(ellipse 60% 70% at 30% 30%, rgba(0,255,255,0.05) 0%, transparent 55%), radial-gradient(ellipse 55% 60% at 80% 80%, rgba(212,175,55,0.04) 0%, transparent 55%), linear-gradient(to bottom,var(--bg),var(--bg-soft),var(--bg)); overflow:hidden; } #contact::before { content:''; position:absolute; top:0; left:50%; transform:translateX(-50%); width:1px; height:90px; background:linear-gradient(to bottom,transparent,var(--cyan)); } .contact-grid { max-width:1080px; margin:0 auto; display:grid; grid-template-columns:1.1fr 1fr; gap:3.5rem; align-items:start; } .contact-headline { font-family:'Space Grotesk',sans-serif; font-size:clamp(1.6rem,3vw,2.2rem); font-weight:700; letter-spacing:-.025em; color:#fff; line-height:1.15; margin-bottom:1rem; } .contact-headline em { font-style:normal; color:var(--cyan); text-shadow:0 0 22px rgba(0,255,255,0.4); } .contact-lead { font-size:.98rem; color:rgba(255,255,255,0.55); line-height:1.78; font-weight:300; margin-bottom:2.5rem; } /* Info items list (location, phone, email) */ .contact-info-list { display:flex; flex-direction:column; gap:1.2rem; } .contact-info-item { display:flex; align-items:center; gap:1.1rem; padding:1.2rem 1.4rem; background:rgba(255,255,255,0.03); border:1px solid rgba(0,255,255,0.12); border-radius:14px; text-decoration:none; color:inherit; cursor:none; transition:border-color .3s, background .3s, transform .3s, box-shadow .3s; } .contact-info-item:hover { border-color:rgba(0,255,255,0.45); background:rgba(0,255,255,0.04); transform:translateX(5px); box-shadow:0 8px 24px rgba(0,255,255,0.08); } .contact-info-icon { width:46px; height:46px; flex-shrink:0; border-radius:12px; background:linear-gradient(135deg, rgba(0,255,255,0.1), rgba(0,255,255,0.02)); border:1px solid rgba(0,255,255,0.22); display:flex; align-items:center; justify-content:center; font-size:1.2rem; transition:background .3s, border-color .3s, box-shadow .3s; } .contact-info-item:hover .contact-info-icon { background:linear-gradient(135deg, rgba(0,255,255,0.22), rgba(0,255,255,0.05)); border-color:rgba(0,255,255,0.5); box-shadow:0 0 14px rgba(0,255,255,0.25); } .contact-info-body { flex:1; min-width:0; } .contact-info-label { font-family:'Space Mono',monospace; font-size:.6rem; letter-spacing:.28em; color:var(--gold); text-transform:uppercase; margin-bottom:.25rem; } .contact-info-value { font-family:'Space Grotesk',sans-serif; font-size:.95rem; font-weight:600; color:#fff; line-height:1.4; word-break:break-word; } .contact-info-extra { font-size:.78rem; color:rgba(255,255,255,0.45); font-weight:300; margin-top:.2rem; } /* Social row */ /* ── Botones de redes — diseño 2×2 (adaptado de Uiverse by svqantonio) ── */ .soc-grid { display:flex; flex-direction:column; gap:.5em; align-items:flex-start; margin-top:2rem; } .soc-row { display:flex; flex-direction:row; gap:.5em; } .soc-card { width:74px; height:74px; display:flex; align-items:center; justify-content:center; outline:none; /* DARK MODE: charcoal, NO blanco */ background:#1a1d23; border:1px solid rgba(255,255,255,0.08); box-shadow:0 2px 6px rgba(0,0,0,0.5), 0 1px 3px rgba(0,0,0,0.45); cursor:none; text-decoration:none; transition:.2s ease-in-out; } .soc-card svg { width:28px; height:28px; transition:fill .2s ease-in-out; } /* Esquina redonda exterior según posición (forma el bloque 2×2) */ .soc-card.ig { border-radius:74px 6px 6px 6px; } /* sup-izq */ .soc-card.tt { border-radius:6px 74px 6px 6px; } /* sup-der */ .soc-card.wa { border-radius:6px 6px 6px 74px; } /* inf-izq */ .soc-card.gm { border-radius:6px 6px 74px 6px; } /* inf-der */ /* Colores de marca de cada icono */ .soc-card.ig svg { fill:#cc39a4; } .soc-card.tt svg { fill:#fff; } /* TikTok: blanco sobre tarjeta oscura */ .soc-card.wa svg { fill:#25d366; } .soc-card.gm svg { fill:#f14336; } /* Hover: la tarjeta se llena del color de marca y el icono pasa a blanco */ .soc-card:hover { scale:1.1; } .soc-card:hover svg { fill:#fff; } .soc-card.ig:hover { background:#cc39a4; border-color:#cc39a4; box-shadow:0 8px 22px rgba(204,57,164,0.45); } .soc-card.tt:hover { background:#000; border-color:#000; box-shadow:0 8px 22px rgba(0,0,0,0.5); } .soc-card.wa:hover { background:#25d366; border-color:#25d366; box-shadow:0 8px 22px rgba(37,211,102,0.45); } .soc-card.gm:hover { background:#ea4335; border-color:#ea4335; box-shadow:0 8px 22px rgba(234,67,53,0.45); } /* ═══ Redes + invitación ZONE ZERO (botón espacial · Uiverse by Praashoo7, encapsulado) ═══ */ .contact-social-zone { display:flex; align-items:center; gap:2.4rem; flex-wrap:wrap; margin-top:2rem; } .contact-social-zone .soc-grid { margin-top:0; } .zone-zero { display:flex; flex-direction:column; gap:.7rem; margin-left:auto; } .zone-zero-copy { display:flex; flex-direction:column; line-height:1.25; } .zone-zero-kicker { font-family:'Space Mono',monospace; font-size:.55rem; letter-spacing:.28em; text-transform:uppercase; color:var(--cyan); margin-bottom:.2rem; } .zone-zero-name { font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:1.15rem; letter-spacing:.03em; color:#fff; } .zone-zero-sub { font-size:.8rem; color:rgba(255,255,255,0.5); font-weight:300; } html[data-theme="light"] .zone-zero-name { color:#0a0a0a; } html[data-theme="light"] .zone-zero-sub { color:rgba(0,0,0,0.55); } /* Botón espacial — estructura scoped */ .zone-zero .zz-main { position:relative; align-self:flex-start; font-size:13.5px; /* un poco más pequeño (todo el botón escala en em) */ height:3.5em; /* el satélite orbita por encima sin empujar el layout */ } .zone-zero .zz-btn { width:13em; height:3.5em; border:none; display:flex; align-items:center; background-color:#171717; border-radius:15px; padding-left:1em; position:relative; z-index:3; overflow:hidden; transition:.4s ease-in-out; cursor:none; text-decoration:none; } .zone-zero .zz-text { color:#fff; padding-left:0.5em; padding-top:0.1em; letter-spacing:0.8em; transition:.4s ease-in-out; z-index:3; font-weight:bold; font-family:'Space Grotesk',sans-serif; } .zone-zero .zz-planet { position:relative; margin-left:-9.55em; left:2.6em; scale:4; transition:.4s ease-in-out; } .zone-zero .zz-img { margin-left:-7.25em; margin-top:6.3em; transition:.4s ease-in-out; z-index:-2; } .zone-zero .zz-img .zz-stars { margin-right:-0.8em; margin-top:7em; scale:0.85; opacity:0; transition:.4s ease-in-out; } .zone-zero .zz-img .zz-astronaut { position:relative; top:-6.3em; left:.65em; /* centrado en el botón (el SVG mide 50px fijos) */ } .zone-zero .zz-satalite { position:relative; left:-1em; top:-3em; animation:4s zz-around infinite; transition:.4s ease-in-out; } @keyframes zz-around { 0% { z-index:5; transform:translateY(-3.5em) translateX(8.5em); } 50% { transform:translateX(1em) translateY(3.5em); } 100% { transform:translateY(-3.5em) translateX(8.5em); z-index:-2; } } .zone-zero .zz-btn:hover .zz-img { margin-top:-1em; z-index:4; } .zone-zero .zz-btn:hover .zz-text { opacity:0; } .zone-zero .zz-btn:hover .zz-planet { opacity:0; } .zone-zero .zz-btn:hover + .zz-satalite { opacity:0; } .zone-zero .zz-btn:active { transform:scale(0.9); } .zone-zero .zz-btn:active .zz-stars { opacity:1; } @media (prefers-reduced-motion: reduce) { .zone-zero .zz-satalite { animation:none; } } /* Map / location panel right column */ .contact-map-col { position:relative; } .contact-map-card { position:relative; } /* ─── Panel de ubicación visual e interactivo ─── */ .contact-map-stage { min-height:340px; position:relative; display:flex; align-items:center; justify-content:center; } /* ─── Bloque de ubicación: Tierra giratoria + estrellas ─── */ /* Earth/stars animation — From Uiverse.io by Lakshay-art (adaptado) */ .loc-earth-block { position:relative; z-index:3; display:flex; flex-direction:column; align-items:center; gap:1.6rem; } .section-banner { height:250px; width:250px; position:relative; transition:left 0.3s linear; background:url("../img/earth.jpg"); background-size:cover; background-position:left; bottom:0px; border-radius:50%; animation:earthRotate 30s linear 0s infinite; box-shadow:0px 0 20px RGBA(255, 255, 255, 0.2), -5px 0px 8px #c3f4ff inset, 15px 2px 25px #000 inset, -24px -2px 34px #c3f4ff99 inset, 250px 0px 44px #00000066 inset, 150px 0px 38px #000000aa inset; } @keyframes earthRotate { 0% { background-position:0 0; } 100% { background-position:400px 0; } } .section-banner .curved-corner-star { display:flex; position:relative; } .section-banner .curved-corner-bottomleft, .section-banner .curved-corner-bottomright, .section-banner .curved-corner-topleft, .section-banner .curved-corner-topright { width:4px; height:5px; overflow:hidden; position:relative; } .section-banner .curved-corner-bottomleft:before, .section-banner .curved-corner-bottomright:before, .section-banner .curved-corner-topleft:before, .section-banner .curved-corner-topright:before { content:""; display:block; width:200%; height:200%; position:absolute; border-radius:50%; } .section-banner .curved-corner-bottomleft:before { bottom:0; left:0; box-shadow:-5px 5px 0 0 white; } .section-banner .curved-corner-bottomright:before { bottom:0; right:0; box-shadow:5px 5px 0 0 white; } .section-banner .curved-corner-topleft:before { top:0; left:0; box-shadow:-5px -5px 0 0 white; } .section-banner .curved-corner-topright:before { top:0; right:0; box-shadow:5px -5px 0 0 white; } @keyframes twinkling { 0%, 100% { opacity:0.1; } 50% { opacity:1; } } .section-banner .star-1 { position:absolute; left:-20px; animation:twinkling 3s infinite; } .section-banner .star-2 { position:absolute; left:-40px; top:30px; animation:twinkling 2s infinite; } .section-banner .star-3 { position:absolute; left:350px; top:90px; animation:twinkling 4s infinite; } .section-banner .star-4 { position:absolute; left:200px; top:290px; animation:twinkling 3s infinite; } .section-banner .star-5 { position:absolute; left:50px; top:270px; animation:twinkling 1.5s infinite; } .section-banner .star-6 { position:absolute; left:250px; top:-50px; animation:twinkling 4s infinite; } .section-banner .star-7 { position:absolute; left:290px; top:60px; animation:twinkling 2s infinite; } /* Etiqueta "México" */ .loc-earth-label { font-family:'Space Grotesk',sans-serif; font-size:1.2rem; font-weight:700; letter-spacing:.1em; color:#fff; text-shadow:0 0 18px rgba(0,255,255,0.4); } /* ── LIGHT MODE OVERRIDES — Contact ── */ html[data-theme="light"] #contact { background: radial-gradient(ellipse 60% 70% at 30% 30%, rgba(0,188,212,0.08) 0%, transparent 55%), radial-gradient(ellipse 55% 60% at 80% 80%, rgba(166,124,0,0.06) 0%, transparent 55%), linear-gradient(to bottom,#f5f6f8,#ffffff,#f5f6f8) !important; } html[data-theme="light"] .contact-headline { color:#0a0a0a !important; } html[data-theme="light"] .contact-lead { color:rgba(0,0,0,0.62) !important; } html[data-theme="light"] .contact-info-item { background:#ffffff !important; border-color:rgba(0,0,0,0.1) !important; box-shadow:0 4px 14px rgba(0,0,0,0.04); } html[data-theme="light"] .contact-info-item:hover { border-color:rgba(0,188,212,0.45) !important; background:rgba(0,188,212,0.05) !important; box-shadow:0 10px 28px rgba(0,140,160,0.12); } html[data-theme="light"] .contact-info-icon { background:rgba(0,188,212,0.08); border-color:rgba(0,188,212,0.3); } html[data-theme="light"] .contact-info-value { color:#0a0a0a !important; } html[data-theme="light"] .contact-info-extra { color:rgba(0,0,0,0.5) !important; } /* LIGHT MODE: gris clarito en vez de blanco; el icono conserva su color de marca */ html[data-theme="light"] .soc-card { background:#e9ebef; border-color:rgba(0,0,0,0.08); box-shadow:0 2px 6px rgba(0,0,0,0.10), 0 1px 3px rgba(0,0,0,0.06); } /* TikTok: en tema claro el icono va negro sobre la tarjeta clara (en oscuro es blanco) */ html[data-theme="light"] .soc-card.tt svg { fill:#000; } @media(max-width:820px){ .contact-grid { grid-template-columns:1fr; gap:2.5rem; } } /* ═══════════════════════════════════════════ CONTACT MODAL — Formulario de cotización ═══════════════════════════════════════════ */ /* Overlay */ .cmodal-overlay { position:fixed; inset:0; z-index:1000; background:rgba(0,0,0,0.72); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); display:flex; align-items:center; justify-content:center; padding:1rem; opacity:0; pointer-events:none; transition:opacity .35s ease; } .cmodal-overlay.open { opacity:1; pointer-events:all; } /* Tarjeta del modal */ .cmodal { background:var(--bg-soft); border:1px solid rgba(0,255,255,0.22); border-radius:26px; width:100%; max-width:620px; max-height:90vh; overflow-y:auto; overflow-x:hidden; position:relative; box-shadow:0 40px 100px rgba(0,0,0,0.65), 0 0 0 1px rgba(0,255,255,0.04); transform:translateY(22px) scale(.97); transition:transform .38s cubic-bezier(.25,.46,.45,.94); } .cmodal-overlay.open .cmodal { transform:translateY(0) scale(1); } .cmodal::-webkit-scrollbar { width:3px; } .cmodal::-webkit-scrollbar-track { background:transparent; } .cmodal::-webkit-scrollbar-thumb { background:rgba(0,255,255,0.2); border-radius:2px; } /* ── HEADER FIJO ── */ .cmodal-header { display:flex; align-items:center; justify-content:space-between; padding:1.35rem 1.8rem .9rem; border-bottom:1px solid rgba(0,255,255,0.08); position:sticky; top:0; z-index:10; background:var(--bg-soft); backdrop-filter:blur(10px); } .cmodal-logo { font-family:'Space Grotesk',sans-serif; font-size:.88rem; font-weight:700; letter-spacing:.28em; color:#fff; } .cmodal-logo span { color:var(--cyan); } /* Step dots connector */ .cmodal-stepper { display:flex; align-items:center; gap:0; } .cmodal-step-dot { width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,0.1); border:1.5px solid rgba(255,255,255,0.18); transition:all .35s; } .cmodal-step-dot.active { background:var(--cyan); border-color:var(--cyan); box-shadow:0 0 10px rgba(0,255,255,0.65); } .cmodal-step-dot.done { background:rgba(39,201,63,0.75); border-color:#27c93f; } .cmodal-step-line { width:26px; height:1px; background:rgba(255,255,255,0.1); transition:background .35s; } .cmodal-step-line.done { background:rgba(39,201,63,0.45); } .cmodal-close { width:30px; height:30px; border-radius:50%; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); color:rgba(255,255,255,0.45); cursor:none; font-size:.8rem; display:flex; align-items:center; justify-content:center; transition:background .25s, color .25s, border-color .25s; flex-shrink:0; } .cmodal-close:hover { background:rgba(255,80,80,0.14); border-color:rgba(255,80,80,0.4); color:#ff5f56; } /* Progress bar */ .cmodal-progress { height:2px; background:rgba(255,255,255,0.05); } .cmodal-progress-bar { height:100%; background:linear-gradient(90deg,var(--cyan),var(--gold)); transition:width .5s cubic-bezier(.25,.46,.45,.94); box-shadow:0 0 8px rgba(0,255,255,0.5); } /* ── CUERPO DE CADA PASO ── */ .cmodal-body { padding:2rem 1.8rem 1.4rem; animation:cmodalFade .38s ease; } .cmodal-body.hidden { display:none; } @keyframes cmodalFade { from { opacity:0; transform:translateX(14px); } to { opacity:1; transform:translateX(0); } } @keyframes cmodalFadeBack { from { opacity:0; transform:translateX(-14px); } to { opacity:1; transform:translateX(0); } } .cmodal-body.anim-back { animation:cmodalFadeBack .38s ease; } .cmodal-eyebrow { font-family:'Space Mono',monospace; font-size:.56rem; letter-spacing:.38em; text-transform:uppercase; color:var(--gold); margin-bottom:.55rem; } .cmodal-title { font-family:'Space Grotesk',sans-serif; font-size:clamp(1.18rem,3vw,1.52rem); font-weight:700; letter-spacing:-.025em; color:#fff; margin-bottom:.4rem; line-height:1.15; } .cmodal-sub { font-size:.87rem; color:rgba(255,255,255,0.42); font-weight:300; line-height:1.65; margin-bottom:1.6rem; } /* Campos */ .cmodal-fields { display:flex; flex-direction:column; gap:1.3rem; } .cmodal-field { display:flex; flex-direction:column; gap:.45rem; } .cmodal-label { font-family:'Space Grotesk',sans-serif; font-size:.8rem; font-weight:600; color:rgba(255,255,255,0.78); letter-spacing:.02em; } .cmodal-optional { font-weight:300; color:rgba(255,255,255,0.32); font-size:.73rem; } .cmodal-input { background:rgba(255,255,255,0.04); border:1px solid rgba(0,255,255,0.15); border-radius:10px; padding:.78rem 1rem; font-family:'Urbanist',sans-serif; font-size:.93rem; color:#fff; outline:none; width:100%; cursor:none; transition:border-color .25s, box-shadow .25s, background .25s; } .cmodal-input:focus { border-color:var(--cyan); box-shadow:0 0 0 3px rgba(0,255,255,0.1); background:rgba(0,255,255,0.03); } .cmodal-input::placeholder { color:rgba(255,255,255,0.2); } .cmodal-textarea { background:rgba(255,255,255,0.04); border:1px solid rgba(0,255,255,0.15); border-radius:10px; padding:.78rem 1rem; font-family:'Urbanist',sans-serif; font-size:.93rem; color:#fff; outline:none; resize:vertical; min-height:84px; width:100%; cursor:none; line-height:1.6; transition:border-color .25s, box-shadow .25s; } .cmodal-textarea:focus { border-color:var(--cyan); box-shadow:0 0 0 3px rgba(0,255,255,0.1); } .cmodal-textarea::placeholder { color:rgba(255,255,255,0.2); } /* ── OPTION CARDS ── */ .cmodal-options { display:flex; flex-wrap:wrap; gap:.55rem; } .cmodal-option { display:flex; flex-direction:column; align-items:center; gap:.3rem; padding:.7rem .9rem; background:rgba(255,255,255,0.03); border:1.5px solid rgba(0,255,255,0.12); border-radius:13px; cursor:none; flex:1; min-width:90px; text-align:center; transition:all .25s cubic-bezier(.25,.46,.45,.94); user-select:none; position:relative; overflow:hidden; } .cmodal-option::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,var(--cyan),transparent); transform:scaleX(0); transition:transform .35s; } .cmodal-option:hover { border-color:rgba(0,255,255,0.4); background:rgba(0,255,255,0.05); transform:translateY(-2px); } .cmodal-option:hover::before { transform:scaleX(1); } .cmodal-option.selected { border-color:var(--cyan); background:rgba(0,255,255,0.1); box-shadow:0 0 18px rgba(0,255,255,0.2); } .cmodal-option.selected::before { transform:scaleX(1); } .cmodal-opt-icon { font-size:1.45rem; line-height:1; } .cmodal-opt-label { font-family:'Space Grotesk',sans-serif; font-size:.76rem; font-weight:600; color:#fff; line-height:1.25; } .cmodal-opt-sub { font-size:.65rem; color:rgba(255,255,255,0.38); font-weight:300; } /* Sell options — 3 cards más anchas */ .cmodal-option.big { padding:1.1rem .85rem; min-width:120px; } .cmodal-option.big .cmodal-opt-icon { font-size:1.75rem; } .cmodal-option.big .cmodal-opt-label { font-size:.82rem; } /* Time options — fila de 4 */ .time-opts .cmodal-option { min-width:80px; } /* ── PRESUPUESTO — columna vertical ── */ .budget-opts { flex-direction:column; gap:.45rem; } .cmodal-option.budget { flex-direction:row; align-items:center; justify-content:space-between; padding:1rem 1.25rem; min-width:unset; flex:unset; text-align:left; } .cmodal-option.budget::before { background:linear-gradient(90deg,transparent,var(--gold),transparent); } .cmodal-option.budget:hover { border-color:rgba(212,175,55,0.45); background:rgba(212,175,55,0.05); } .cmodal-option.budget.selected { border-color:var(--gold); background:rgba(212,175,55,0.1); box-shadow:0 0 18px rgba(212,175,55,0.2); } .cmodal-budget-num { font-family:'Space Grotesk',sans-serif; font-size:.98rem; font-weight:700; color:#fff; letter-spacing:-.01em; } .cmodal-option.budget.selected .cmodal-budget-num { color:var(--gold); } .cmodal-budget-tag { font-family:'Space Mono',monospace; font-size:.56rem; letter-spacing:.2em; color:var(--gold); text-transform:uppercase; text-align:right; } /* ── REDES SOCIALES ── */ .cmodal-social-rows { display:flex; flex-direction:column; gap:.5rem; } .cmodal-social-row { display:flex; align-items:center; gap:.55rem; } .cmodal-social-icon { font-size:1.1rem; width:26px; flex-shrink:0; text-align:center; } .cmodal-social-row .cmodal-input { flex:1; } /* ── NAVEGACIÓN ── */ .cmodal-nav { display:flex; align-items:center; justify-content:space-between; padding:1rem 1.8rem 1.55rem; gap:1rem; border-top:1px solid rgba(0,255,255,0.08); } .cmodal-btn-back { font-family:'Space Grotesk',sans-serif; font-size:.74rem; font-weight:600; letter-spacing:.1em; padding:.72rem 1.3rem; border:1px solid rgba(255,255,255,0.12); color:rgba(255,255,255,0.45); background:transparent; border-radius:999px; cursor:none; transition:border-color .25s, color .25s; white-space:nowrap; } .cmodal-btn-back:hover { border-color:rgba(255,255,255,0.3); color:#fff; } .cmodal-btn-back.invisible { visibility:hidden; } /* .cmodal-btn-next visual → .uiverse (default cyan); context/size in .cmodal-btn-next.uiverse above */ /* ── PANTALLA DE ÉXITO ── */ .cmodal-success { text-align:center; padding:2.6rem 1rem 1.6rem; } .cmodal-success-icon { width:82px; height:82px; margin:0 auto 1.4rem; border-radius:50%; background:linear-gradient(135deg,rgba(0,255,255,0.14),rgba(39,201,63,0.1)); border:1.5px solid var(--cyan); display:flex; align-items:center; justify-content:center; font-size:2.2rem; color:var(--cyan); box-shadow:0 0 44px rgba(0,255,255,0.4); animation:cmodalPulse 1.8s ease-in-out infinite; } @keyframes cmodalPulse { 0%,100% { transform:scale(1); box-shadow:0 0 44px rgba(0,255,255,0.4); } 50% { transform:scale(1.06); box-shadow:0 0 60px rgba(0,255,255,0.6); } } .cmodal-success-title { font-family:'Space Grotesk',sans-serif; font-size:1.55rem; font-weight:700; color:#fff; margin-bottom:.7rem; } .cmodal-success-title em { font-style:normal; color:var(--cyan); } .cmodal-success-text { font-size:.9rem; color:rgba(255,255,255,0.5); line-height:1.72; font-weight:300; max-width:380px; margin:0 auto 1.8rem; } .cmodal-success-text strong { color:rgba(255,255,255,0.8); } .cmodal-success-actions { display:flex; flex-direction:column; gap:.6rem; align-items:center; } .cmodal-success-btn { display:inline-flex; align-items:center; gap:.5rem; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:.8rem; letter-spacing:.1em; padding:.9rem 2rem; border-radius:999px; cursor:none; text-decoration:none; transition:box-shadow .3s, transform .3s; } .cmodal-success-btn.wa { background:#25d366; color:#000; border:none; } .cmodal-success-btn.wa:hover { box-shadow:0 0 24px rgba(37,211,102,0.55); transform:translateY(-2px); } .cmodal-success-btn.ghost { background:transparent; color:rgba(255,255,255,0.4); border:1px solid rgba(255,255,255,0.14); } .cmodal-success-btn.ghost:hover { color:#fff; border-color:rgba(255,255,255,0.3); } /* ── LIGHT MODE — Modal ── */ html[data-theme="light"] .cmodal { background:#ffffff; border-color:rgba(0,140,160,0.28); box-shadow:0 40px 100px rgba(0,0,0,0.14); } html[data-theme="light"] .cmodal-header { background:#ffffff; border-bottom-color:rgba(0,0,0,0.08); } html[data-theme="light"] .cmodal-logo { color:#0a0a0a; } html[data-theme="light"] .cmodal-title { color:#0a0a0a; } html[data-theme="light"] .cmodal-sub { color:rgba(0,0,0,0.48); } html[data-theme="light"] .cmodal-label { color:rgba(0,0,0,0.72); } html[data-theme="light"] .cmodal-input, html[data-theme="light"] .cmodal-textarea { background:#f7f8fa; border-color:rgba(0,0,0,0.12); color:#0a0a0a; } html[data-theme="light"] .cmodal-input::placeholder, html[data-theme="light"] .cmodal-textarea::placeholder { color:rgba(0,0,0,0.28); } html[data-theme="light"] .cmodal-input:focus, html[data-theme="light"] .cmodal-textarea:focus { border-color:var(--cyan); background:rgba(0,188,212,0.03); } html[data-theme="light"] .cmodal-option { background:#f7f8fa; border-color:rgba(0,0,0,0.1); } html[data-theme="light"] .cmodal-option:hover { border-color:rgba(0,188,212,0.4); background:rgba(0,188,212,0.04); } html[data-theme="light"] .cmodal-option.selected { background:rgba(0,188,212,0.08); border-color:var(--cyan); } html[data-theme="light"] .cmodal-option.budget:hover { border-color:rgba(166,124,0,0.45); background:rgba(166,124,0,0.04); } html[data-theme="light"] .cmodal-option.budget.selected { background:rgba(166,124,0,0.08); border-color:var(--gold); } html[data-theme="light"] .cmodal-opt-label { color:#0a0a0a; } html[data-theme="light"] .cmodal-budget-num { color:#0a0a0a; } html[data-theme="light"] .cmodal-option.budget.selected .cmodal-budget-num { color:var(--gold); } html[data-theme="light"] .cmodal-nav { border-top-color:rgba(0,0,0,0.08); } html[data-theme="light"] .cmodal-btn-back { border-color:rgba(0,0,0,0.14); color:rgba(0,0,0,0.45); } html[data-theme="light"] .cmodal-btn-back:hover { border-color:rgba(0,0,0,0.3); color:#0a0a0a; } html[data-theme="light"] .cmodal-success-title { color:#0a0a0a; } html[data-theme="light"] .cmodal-success-text { color:rgba(0,0,0,0.52); } html[data-theme="light"] .cmodal-success-btn.ghost { color:rgba(0,0,0,0.4); border-color:rgba(0,0,0,0.14); } html[data-theme="light"] .cmodal-success-btn.ghost:hover { color:#0a0a0a; } html[data-theme="light"] .cmodal-close { background:rgba(0,0,0,0.04); border-color:rgba(0,0,0,0.1); color:rgba(0,0,0,0.38); } html[data-theme="light"] .cmodal-step-dot { background:rgba(0,0,0,0.08); border-color:rgba(0,0,0,0.16); } @media(max-width:560px){ .cmodal-overlay { align-items:flex-end; padding:0; } .cmodal { border-radius:20px 20px 0 0; max-height:94vh; } .cmodal-body { padding:1.5rem 1.2rem 1rem; } .cmodal-nav { padding:.85rem 1.2rem 1.2rem; } .cmodal-option.big { min-width:100px; padding:.9rem .7rem; } .time-opts .cmodal-option { min-width:72px; font-size:.68rem; } .cmodal-budget-num { font-size:.88rem; } } /* ═══════════════════════════════════════════ FOOTER ═══════════════════════════════════════════ */ footer { padding:3rem 2.8rem 2rem; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem; } .f-logo { font-family:'Space Grotesk',sans-serif; font-weight:700; letter-spacing:.28em; font-size:.95rem; color:rgba(255,255,255,0.25); } .f-logo span { color:rgba(0,255,255,0.42); } .f-copy { font-family:'Space Mono',monospace; font-size:.58rem; letter-spacing:.08em; color:rgba(255,255,255,0.16); } /* ═══════════════════════════════════════════ SCROLL REVEAL ═══════════════════════════════════════════ */ .reveal { opacity:0; transform:translateY(30px); transition:opacity .85s cubic-bezier(.25,.46,.45,.94), transform .85s cubic-bezier(.25,.46,.45,.94); } .reveal.in { opacity:1; transform:translateY(0); } .d1 { transition-delay:.08s; } .d2 { transition-delay:.2s; } .d3 { transition-delay:.33s; } .d4 { transition-delay:.46s; } .d5 { transition-delay:.56s; } /* ═══════════════════════════════════════════ KEYFRAMES ═══════════════════════════════════════════ */ @keyframes fadeUp { from{opacity:0;transform:translateY(28px)} to{opacity:1;transform:translateY(0)} } @keyframes fadeIn { from{opacity:0} to{opacity:1} } @keyframes pulse { 0%,100%{box-shadow:0 0 0 0 rgba(0,255,255,0.6)} 55%{box-shadow:0 0 0 9px rgba(0,255,255,0)} } @keyframes title-grad-c { 0%{background-position:0% center} 100%{background-position:280% center} } @keyframes title-grad-g { 0%{background-position:0% center} 100%{background-position:280% center} } /* ═══════════════════════════════════════════ RESPONSIVE ═══════════════════════════════════════════ */ @media(max-width:900px){ .info-inner { grid-template-columns:1fr; gap:3rem; } .info-quote { grid-column:1; } } @media(max-width:768px){ nav { padding:.9rem 1.3rem; } .nav-links { display:none; } #hero-anim { height:180px; margin:.5rem auto 2rem; } #hero-anim .loader { --size:1.5; } .nodo-inner { flex-direction:column; } footer { flex-direction:column; text-align:center; } .info-ctas { flex-direction:column; } } /* ══════════════════════════════════════════ PANTALLA DE CARGA (PAGE LOADER) — overlay full-screen Animación "Loading..." de Uiverse. Clases con prefijo pl- para NO colisionar con el .loader del hero (~línea 703). Se oculta vía JS al dispararse window.load (con failsafe). ══════════════════════════════════════════ */ #page-loader{ position: fixed; inset: 0; z-index: 100000; /* por encima de nav, cursor y todo lo demás */ display: flex; align-items: center; justify-content: center; background: var(--bg, #020202); /* fondo oscuro del sitio */ opacity: 1; transition: opacity .6s ease; } /* Estado oculto — fade out y deja de capturar el cursor */ #page-loader.is-hidden{ opacity: 0; visibility: hidden; pointer-events: none; } .pl-wrapper{ position: relative; display: flex; align-items: center; justify-content: center; width: 180px; height: 180px; font-family: "Space Grotesk", sans-serif; /* fuente ya cargada del sitio (Inter no está disponible) */ font-size: 1.2em; font-weight: 300; color: #fff; border-radius: 50%; user-select: none; } .pl-ring{ position: absolute; top: 0; left: 0; width: 100%; aspect-ratio: 1 / 1; border-radius: 50%; background-color: transparent; animation: pl-rotate 2s linear infinite; z-index: 0; } @keyframes pl-rotate{ 0% { transform: rotate(90deg); box-shadow: 0 10px 20px 0 #fff inset, 0 20px 30px 0 #ad5fff inset, 0 60px 60px 0 #471eec inset; } 50% { transform: rotate(270deg); box-shadow: 0 10px 20px 0 #fff inset, 0 20px 10px 0 #d60a47 inset, 0 40px 60px 0 #311e80 inset; } 100% { transform: rotate(450deg); box-shadow: 0 10px 20px 0 #fff inset, 0 20px 30px 0 #ad5fff inset, 0 60px 60px 0 #471eec inset; } } .pl-letter{ display: inline-block; opacity: .4; transform: translateY(0); animation: pl-letter-anim 2s infinite; z-index: 1; } .pl-letter:nth-child(1){ animation-delay: 0s; } .pl-letter:nth-child(2){ animation-delay: .1s; } .pl-letter:nth-child(3){ animation-delay: .2s; } .pl-letter:nth-child(4){ animation-delay: .3s; } .pl-letter:nth-child(5){ animation-delay: .4s; } .pl-letter:nth-child(6){ animation-delay: .5s; } .pl-letter:nth-child(7){ animation-delay: .6s; } .pl-letter:nth-child(8){ animation-delay: .7s; } .pl-letter:nth-child(9){ animation-delay: .8s; } .pl-letter:nth-child(10){ animation-delay: .9s; } @keyframes pl-letter-anim{ 0%, 100% { opacity: .4; transform: translateY(0); } 20% { opacity: 1; transform: scale(1.15); } 40% { opacity: .7; transform: translateY(0); } } /* ══════════════════════════════════════════ BOTÓN DESLIZABLE (SWIPE) — De Uiverse.io by dexter-st Reemplaza "Enviar información" en el último paso del modal. Clases con prefijo sw- para NO colisionar con .orb/.btn/.icon/.letter ya existentes en el sitio. Nesting aplanado para máxima compatibilidad. ══════════════════════════════════════════ */ /* SLOT: la huella pequeña que ocupa el slider en el nav (≈ tamaño del botón "Anterior"). overflow visible para que el resplandor del contenedor (que es mayor y está escalado) no se recorte. */ #cmodal-swipe { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 218px; /* = 320 × 0.68 (ancho del contenedor ya escalado) */ height: 46px; /* huella baja, similar al botón "Anterior" */ overflow: visible; cursor: none; } /* Desactivado hasta que el paso sea válido (presupuesto / método de pago elegido) */ .sw-slot.sw-disabled { opacity: .4; pointer-events: none; } /* Slot del botón deslizable en el checkout ("Pagar de forma segura"): mismo tamaño/escala que el de contacto, pero centrado bajo el total. */ #ck-swipe { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 218px; height: 46px; margin: .7rem auto 0; overflow: visible; cursor: none; } /* CONTENEDOR REAL: conserva la geometría a 320×110 (sin recortes del orbe/halo) y se escala para encajar pequeño dentro del slot. */ .sw-container { position: relative; flex: none; width: 320px; height: 110px; display: flex; justify-content: center; align-items: center; overflow: hidden; transform: scale(0.68); transform-origin: center; } .sw-effect-bg { width: 100%; height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(0, 20, 50, 0.08); filter: blur(5px) contrast(20) grayscale(0.2); } /* En modo claro, ese relleno tintado se ve como un recuadro gris sobre el modal blanco. Lo hacemos transparente: el pill conserva su forma porque la da el filtro (blur+contrast) aplicado sobre el botón, no este relleno plano. */ html[data-theme="light"] .sw-effect-bg { background: transparent; } .sw-btn { width: 260px; height: 56px; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 18px; font-weight: bold; cursor: none; z-index: 3; position: relative; border: 12px solid rgba(255, 255, 255, 0); border-radius: 50px; background: #d4dbe13f; user-select: none; transition: all 0.5s ease; box-shadow: inset 0 0px 6px 3px rgba(50, 50, 50, 0.2), inset 0 -4px 4px 4px rgba(0, 0, 0, 0.05), 0 8px 16px -8px rgba(0, 0, 0, 0.2); } .sw-orb, .sw-orb-2 { display: none; /* sin orbes: elimina el efecto líquido/burbujas alrededor del botón (el resto de animaciones de brillo/color se conservan) */ width: 60px; height: 60px; position: absolute; background: #aaa; border-radius: 50%; top: -14px; left: 0%; transform: translate(-50%, 0%) scale(0.9); transform-origin: 50% 50%; transition: all 0.4s ease; z-index: 1; } .sw-orb-2 { background-color: var(--bg); animation: sw-orb-anim 6s infinite ease-in-out; pointer-events: none; } @keyframes sw-orb-anim { 0% { opacity: 0; transform: translate(var(--x2), 0%) rotate(0deg) translateX(var(--x1)) scale(var(--scale)); } 30%, 70% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--x2), 0%) rotate(calc(var(--rot) * 360deg)) translateX(var(--x1)) scale(var(--scale)); } } @keyframes sw-orb-vanish { 100% { opacity: 0; transform: scale(0); } } @keyframes sw-orb-hover { 0% { left: -12.5%; transform: scale(0.9); } 100% { left: -5%; transform: scale(1.1); background: rgba(128, 230, 255, 0.5); } } @keyframes sw-orb-focus { 0% { left: -5%; transform: scale(1.1); } 50% { transform: scale(1.3); } 100% { left: 80%; transform: scale(1.1); } } .sw-btn:hover { border: 12px solid rgba(139, 177, 177, 0.95); } .sw-btn:active, .sw-btn:focus { border: 12px solid rgb(0, 153, 132); background: rgba(0, 212, 104, 0.845); } .sw-btn:hover > .sw-orb { animation: sw-orb-hover 0.35s ease-in-out forwards; } .sw-btn:hover > .sw-orb-2 { animation: sw-orb-vanish 0.5s forwards ease-out; } .sw-btn:active > .sw-orb, .sw-btn:focus > .sw-orb { animation: sw-orb-focus 0.5s ease forwards; background-color: rgb(0, 153, 128); } .sw-btn:active > .sw-orb-2, .sw-btn:focus > .sw-orb-2 { background-color: #0f09; animation: sw-orb-vanish 1s forwards; } .sw-text-wrapper { padding-left: 20px; position: relative; z-index: 2; color: #87a0b1; font-family: "Space Grotesk", "Inter", "Arial", sans-serif; font-weight: 500; font-size: 16px; transition: all 0.4s ease; letter-spacing: -2px; top: -1px; user-select: none; pointer-events: none; text-shadow: 0 1px 1px rgba(255, 255, 255, 0.15), 0 -1px 1px rgba(0, 0, 0, 0.15); } .sw-letter { display: inline-block; } /* Por defecto: ocultar las letras del segundo texto (estado "confirmado"). Reglas acotadas por botón porque cada uno tiene distinto conteo de letras: · contacto (#cmodal-swipe): "Enviar información"(18) → "Enviado"(7) · checkout (#ck-swipe): "Pagar de forma segura"(21) → "Pagado"(6) */ #cmodal-swipe .sw-text-wrapper .sw-letter:nth-child(n+19) { display: none; } #ck-swipe .sw-text-wrapper .sw-letter:nth-child(n+22) { display: none; } .sw-container:has(.sw-btn:hover) .sw-text-wrapper .sw-letter { animation: sw-letter-hover 1s ease forwards; } /* Al confirmar (:focus): morfar el primer texto → el segundo */ .sw-container:has(.sw-btn:focus) .sw-text-wrapper .sw-letter { animation: sw-letter-focus 1s ease forwards; } /* Letras del primer texto → se ocultan al confirmar */ #cmodal-swipe .sw-container:has(.sw-btn:focus) .sw-text-wrapper .sw-letter:nth-child(-n+18), #ck-swipe .sw-container:has(.sw-btn:focus) .sw-text-wrapper .sw-letter:nth-child(-n+21) { display: none; opacity: 0; } /* Letras del segundo texto → aparecen al confirmar */ #cmodal-swipe .sw-container:has(.sw-btn:focus) .sw-text-wrapper .sw-letter:nth-child(n+19), #ck-swipe .sw-container:has(.sw-btn:focus) .sw-text-wrapper .sw-letter:nth-child(n+22) { display: inline-block; opacity: 0; } @keyframes sw-letter-hover { 0% { color: #8b949a; } 50% { color: #00c8ff; transform: translateX(16px) scale(1.5); filter: blur(9px); } 100% { color: #71d0eb; transform: translateX(12px) scale(1); filter: blur(0px); } } @keyframes sw-letter-focus { 0% { color: #fff0; } 20% { color: #00ffdd; transform: translateX(-150px) scale(0); opacity: 0.5; filter: blur(20px); } 100% { color: #fff; text-shadow: 0 0 21px #058335, 0 0 3px #ffffff, 0 0 2px #24b600; transform: translateX(-22px) scale(1); opacity: 1; filter: blur(0px); } } .sw-container:has(.sw-btn:hover) .sw-icon { transform: translate(-101px, 0px) scale(1.1); } .sw-container:has(.sw-btn:hover) .sw-icon .sw-icon-svg:nth-child(1) { opacity: 0; } .sw-container:has(.sw-btn:hover) .sw-icon .sw-icon-svg:nth-child(2) { opacity: 1; } .sw-container:has(.sw-btn:focus) .sw-icon { transform: translate(102px, 0px) scale(1.1); } .sw-container:has(.sw-btn:focus) .sw-icon .sw-icon-svg:nth-child(1) { opacity: 0; } .sw-container:has(.sw-btn:focus) .sw-icon .sw-icon-svg:nth-child(2) { opacity: 0; } .sw-container:has(.sw-btn:focus) .sw-icon .sw-icon-svg:last-child { opacity: 1; } .sw-icon { position: absolute; display: flex; align-items: center; justify-content: center; height: 56px; aspect-ratio: 1 / 1; border-radius: 50%; background-color: transparent; box-shadow: inset 0 4px 6px 3px rgba(255, 255, 255, 0.75), inset 0 -4px 4px 4px rgba(0, 0, 0, 0.05), 0 6px 8px -3px rgba(0, 0, 0, 0.3); z-index: 1; transition: transform 0.5s ease; transform: translate(-117px, 0px); pointer-events: none; backdrop-filter: blur(10px); } .sw-icon::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; background-image: radial-gradient(circle at 50% 90%, rgba(255, 255, 255, 0.6), transparent 40%), radial-gradient(ellipse at 50% 40%, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.3) 40%, transparent 65%), linear-gradient(180deg, rgba(0, 195, 255, 0.2) -10%, transparent 100%); background-size: 100% 100%, 100% 40%, 100% 100%; background-repeat: no-repeat; transition: all 0.4s ease; z-index: -1; pointer-events: none; } .sw-icon-svg { position: absolute; width: 24px; height: 24px; fill: none; stroke: #9ba6aa; filter: drop-shadow(0 1px 1px rgba(255, 255, 255, 0.35)) drop-shadow(0 4px 4px rgba(0, 0, 0, 0.15)); transition: opacity 0.3s ease, stroke 1.5s cubic-bezier(0.19, 1, 0.22, 1); animation: sw-stroke-anim 4s infinite linear; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5px; stroke-dashoffset: 20; stroke-dasharray: 0, 70.3; } .sw-icon-svg:nth-child(2), .sw-icon-svg:last-child { opacity: 0; } @keyframes sw-stroke-anim { 30%, 60% { stroke-dasharray: 70.3; } 15%, 60% { stroke: rgb(255, 255, 255); stroke-width: 2.5px; filter: drop-shadow(0 0 3px rgb(172, 255, 225)) drop-shadow(0 0 1px rgba(0, 100, 150, 0.4)); } } /* En móvil, el slider salta a su propia línea centrada (ya cabe por su tamaño). */ @media(max-width:768px){ .cmodal-nav { flex-wrap: wrap; row-gap: .4rem; justify-content: center; } #cmodal-swipe { margin: 0 auto; } } /* ══════════════════════════════════════════ EASTER EGGS — Mysteddy & Void, personajes decorativos Discretos y no interactivos: pointer-events:none + aria-hidden en el HTML. Cada uno se ancla a su tarjeta (position:relative del padre) para que acompañe sus animaciones de hover/reveal como si fuera parte de ella. ══════════════════════════════════════════ */ .egg { position:absolute; width:auto; pointer-events:none; user-select:none; z-index:5; filter:drop-shadow(0 10px 16px rgba(0,0,0,0.45)); } html[data-theme="light"] .egg { filter:drop-shadow(0 8px 14px rgba(0,0,0,0.22)); } /* Mysteddy programando — sentado en el borde superior del pilar "Tecnología sin límites" (el banner sobresale 22px; los pies se hunden unos px en su borde para que se lea "sentado"). */ .egg-dev { height:92px; right:26px; bottom:calc(100% + 14px); } /* Void con su laptop — de pie sobre la franja CTA "¿Listo para crecer en serio?" */ .egg-ready { height:112px; right:32px; bottom:calc(100% - 10px); } /* Void de brazos cruzados — parado sobre el pilar "Asesoría tecnológica real" */ .egg-guard { height:88px; right:20px; bottom:calc(100% - 7px); } .pillar { position:relative; } /* ancla del egg; no altera el layout flex */ /* Void recargado — apoyado en el borde derecho de la cita interactiva, señalando hacia el texto (y hacia el easter egg de click que ya vive ahí). */ .egg-lean { height:100px; right:14px; bottom:8px; transform:rotate(6deg); } /* Mysteddy de brazos cruzados — de pie sobre el borde superior del footer, como un guardián que se despide al cerrar la página. */ footer { position:relative; } /* ancla del egg; el footer es flex, no se altera */ .egg-footer { height:118px; left:14px; bottom:calc(100% - 16px); } /* Reserva espacio a la derecha de la cita para que no pise el texto */ @media (min-width:900px){ .info-quote { padding-right:7.5rem; } } /* ══════════════════════════════════════════ ICONOS HEROICONS (solid, en línea) — reemplazan a los emojis Los SVG llevan fill="currentColor": heredan `color` del contenedor, y 1em = el tamaño que ocupaba el emoji (los contenedores ya dimensionan con font-size), así que no cambia ningún layout. ══════════════════════════════════════════ */ .fd-icon svg, .flow-icon svg, .auto-scenario-icon svg, .mkt-card-emoji svg, .ck-svc-icon svg, .ck-pay-icon svg, .pillar-icon svg, .cmodal-opt-icon svg, .cmodal-social-icon svg { width:1em; height:1em; display:block; margin-left:auto; margin-right:auto; } /* Acento cian en cajas con borde cian; dorado donde la sección es dorada */ .fd-icon, .flow-icon, .ck-svc-icon, .pillar-icon, .mkt-card-emoji, .ck-pay-icon, .cmodal-opt-icon { color:var(--cyan); } .fase-panel[data-fase="3"] .fd-icon { color:var(--gold); } .mkt-card.gold .mkt-card-emoji { color:var(--gold); } /* Trueno oscuro sobre el círculo cian brillante del escenario */ .auto-scenario-icon { color:rgba(4,26,34,0.92); } /* Candado pequeño dentro del título del stage (hereda su color cian) */ .stage-title svg { width:.95em; height:.95em; display:inline-block; vertical-align:-0.12em; } /* Globo de chat en el botón de WhatsApp del modal (hereda color del botón) */ .cmodal-success-btn svg { width:1.05em; height:1.05em; display:inline-block; vertical-align:-0.15em; } /* En pantallas angostas las tarjetas se apilan a lo ancho: los personajes se reducen y se pegan más a la esquina para seguir presentes sin estorbar. */ @media (max-width:899px){ .egg { filter:drop-shadow(0 6px 10px rgba(0,0,0,0.4)); } .egg-dev { height:72px; right:14px; } .egg-ready { height:84px; right:18px; } /* Arriba del pilar los botones CTA no dejan aire (48px): Void pasa a vivir DENTRO de la tarjeta, en su propia banda inferior. */ .egg-guard { height:60px; right:14px; bottom:10px; } .info-pillars .pillar:first-child { padding-bottom:4.8rem; } /* La cita pierde el padding lateral en móvil: Void baja a una banda propia bajo la firma, apuntando hacia ella. */ .egg-lean { height:74px; right:12px; bottom:6px; } .info-quote { padding-bottom:5.4rem; } /* Mysteddy más pequeño y algo más hundido en móvil: la tarjeta del mapa ocupa casi todo el ancho, así que su tope debe quedar bajo el borde de ésta para asomarse en la esquina sin pisarla. */ .egg-footer { height:76px; left:16px; bottom:calc(100% - 18px); } }