/* caso-de-exito/document-head.njk */ * { -webkit-font-smoothing: antialiased; box-sizing: border-box; } html { overflow-x: hidden; width: 100%; max-width: 100%; -webkit-text-size-adjust: 100%; } body { overflow-x: hidden; width: 100%; max-width: 100%; position: relative; font-family: "Inter", sans-serif; letter-spacing: -0.01em; } h1, h2, h3, .font-display { font-family: "Inter", sans-serif; letter-spacing: -0.025em; } .no-scrollbar::-webkit-scrollbar { display: none; } .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; } :root { --hero-blue: 37 99 235; --hero-indigo: 99 102 241; --hero-neon: 3 255 158; --hero-bg1: 11 17 36; --hero-bg2: 13 27 70; } #navbar.scrolled { background: rgba(11, 17, 36, 0.92) !important; backdrop-filter: blur(14px); border-bottom: 1px solid rgba(3, 255, 158, 0.1); } .wow { opacity: 0; transform: translateY(40px) scale(0.98); transition: opacity 0.9s cubic-bezier(0.4, 0, 0.2, 1), transform 0.9s cubic-bezier(0.4, 0, 0.2, 1); } .wow.visible { opacity: 1; transform: translateY(0) scale(1); } .wow-title { opacity: 0; transform: translateY(30px) scale(0.97); transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1), transform 1s cubic-bezier(0.4, 0, 0.2, 1); } .wow-title.visible { opacity: 1; transform: translateY(0) scale(1); } .wow-card { opacity: 0; transform: scale(0.95) translateY(30px); transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 0.8s cubic-bezier(0.4, 0, 0.2, 1); } .wow-card.visible { opacity: 1; transform: scale(1) translateY(0); } .nav-n3 { position: absolute; left: 100%; top: 0; z-index: 50; width: 18rem; margin-left: -0.5rem; padding-left: 0.5rem; opacity: 0; pointer-events: none; transition: opacity 0.15s ease, transform 0.15s ease; transform: translateX(-4px); } .nav-n2:hover > .nav-n3, .group\/n2:hover .nav-n3 { opacity: 1; pointer-events: auto; transform: translateX(0); } .hero-animated-gradient { background: linear-gradient(180deg, rgba(21, 27, 51, 0.62), rgba(11, 17, 36, 0)); } .cyber-grid { background-image: linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, 0.04) 1px, transparent 1px); background-size: 56px 56px; mask-image: linear-gradient(to bottom, black, transparent); opacity: 0.22; } .grad-border-soft { position: relative; background: linear-gradient(#151B33, #151B33) padding-box, linear-gradient(135deg, rgba(255,255,255,0.12), rgba(255,255,255,0.02)) border-box; border: 1px solid transparent; } .spotlight { position: relative; overflow: hidden; } .spotlight::before { content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity 0.4s ease; background: radial-gradient( 320px circle at var(--mx, 50%) var(--my, 50%), rgba(3, 255, 158, 0.10), transparent 60% ); pointer-events: none; } .spotlight:hover::before { opacity: 1; } /* Timeline */ .timeline-line { background: linear-gradient(to bottom, rgba(3,255,158,0.4), rgba(3,255,158,0.05)); } /* Quote */ .quote-card { background: linear-gradient(135deg, rgba(3,255,158,0.06) 0%, rgba(37,99,235,0.06) 100%); border: 1px solid rgba(3,255,158,0.2); } /* Metric highlight */ .metric-ring { background: conic-gradient(#03FF9E var(--pct, 68%), rgba(255,255,255,0.05) 0%); border-radius: 50%; } /* Progress bar */ .progress-bar-fill { background: linear-gradient(90deg, #03FF9E, #2563eb); border-radius: 9999px; transition: width 1.5s cubic-bezier(0.4, 0, 0.2, 1); } /* sAIfy */ #sAIfy-widget { position: fixed; bottom: 24px; right: 24px; width: 360px; background: #151B33; border: 1px solid rgba(3, 255, 158, 0.3); border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,0.5); z-index: 9999; display: none; flex-direction: column; overflow: hidden; max-height: 520px; } #sAIfy-widget.open { display: flex; } .chat-trigger { position: fixed; bottom: 24px; right: 24px; width: 56px; height: 56px; background: #03FF9E; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 9998; box-shadow: 0 0 24px rgba(3,255,158,0.4); transition: all 0.3s; } .chat-trigger:hover { transform: scale(1.1); } .chat-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid rgba(255,255,255,0.08); background: rgba(11,17,36,0.6); } .chat-body { flex: 1; overflow-y: auto; padding: 16px 20px; display: flex; flex-direction: column; gap: 12px; } .chat-footer { padding: 14px 16px; border-top: 1px solid rgba(255,255,255,0.08); display: flex; gap: 8px; background: rgba(11,17,36,0.6); } /* casos-de-exito/document-head.njk */ * { -webkit-font-smoothing: antialiased; } body { font-family: "Inter", sans-serif; letter-spacing: -0.01em; } h1, h2, h3, .font-display { font-family: "Inter", sans-serif; letter-spacing: -0.025em; } .no-scrollbar::-webkit-scrollbar { display: none; } .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; } :root { --hero-blue: 37 99 235; --hero-indigo: 99 102 241; --hero-neon: 3 255 158; --hero-bg1: 11 17 36; --hero-bg2: 13 27 70; } #navbar.scrolled { background: rgba(11, 17, 36, 0.92) !important; backdrop-filter: blur(14px); border-bottom: 1px solid rgba(3, 255, 158, 0.1); } /* Animaciones WOW */ .wow { opacity: 0; transform: translateY(40px) scale(0.98); transition: opacity 0.9s cubic-bezier(0.4, 0, 0.2, 1), transform 0.9s cubic-bezier(0.4, 0, 0.2, 1); } .wow.visible { opacity: 1; transform: translateY(0) scale(1); } .wow-title { opacity: 0; transform: translateY(30px) scale(0.97); transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1), transform 1s cubic-bezier(0.4, 0, 0.2, 1); } .wow-title.visible { opacity: 1; transform: translateY(0) scale(1); } .wow-card { opacity: 0; transform: scale(0.95) translateY(30px); transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 0.8s cubic-bezier(0.4, 0, 0.2, 1); } .wow-card.visible { opacity: 1; transform: scale(1) translateY(0); } .glass-panel { background: rgba(21, 27, 51, 0.7); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.05); } .grad-border-soft { position: relative; background: linear-gradient(#151B33, #151B33) padding-box, linear-gradient(135deg, rgba(255,255,255,0.12), rgba(255,255,255,0.02)) border-box; border: 1px solid transparent; } .spotlight { position: relative; overflow: hidden; } .spotlight::before { content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity 0.4s ease; background: radial-gradient( 320px circle at var(--mx, 50%) var(--my, 50%), rgba(3, 255, 158, 0.10), transparent 60% ); pointer-events: none; } .spotlight:hover::before { opacity: 1; } /* Hero gradient */ @keyframes hero-gradient-shift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @keyframes hero-gradient-drift { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(-6%, 3%, 0) scale(1.08); } 100% { transform: translate3d(0, 0, 0) scale(1); } } .hero-animated-gradient { background-image: radial-gradient(60% 60% at 20% 30%, rgb(var(--hero-blue) / 0.4) 0%, rgb(var(--hero-blue) / 0) 60%), radial-gradient(55% 55% at 80% 25%, rgb(var(--hero-indigo) / 0.28) 0%, rgb(var(--hero-indigo) / 0) 60%), radial-gradient(60% 60% at 70% 80%, rgb(var(--hero-neon) / 0.14) 0%, rgb(var(--hero-neon) / 0) 60%), linear-gradient(120deg, rgb(var(--hero-bg1) / 0.9) 0%, rgb(var(--hero-bg2) / 0.7) 35%, rgb(var(--hero-blue) / 0.55) 70%, rgb(var(--hero-bg1) / 0.92) 100%); background-size: 260% 260%; animation: hero-gradient-shift 10s ease-in-out infinite, hero-gradient-drift 12s ease-in-out infinite; filter: saturate(1.15) contrast(1.05); will-change: transform, background-position; } /* Cyber grid */ .cyber-grid { background-image: linear-gradient(to right, rgba(37, 99, 235, 0.16) 1px, transparent 1px), linear-gradient(to bottom, rgba(37, 99, 235, 0.14) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(circle at 50% 35%, black 0%, black 50%, transparent 72%); opacity: 0.36; } /* Filter buttons */ .filter-btn { transition: all 0.2s ease !important; cursor: pointer !important; user-select: none !important; } .filter-btn.active, .filter-btn[data-active="true"] { background: rgba(3, 255, 158, 0.15) !important; color: #03FF9E !important; border-color: rgba(3, 255, 158, 0.45) !important; font-weight: 700 !important; box-shadow: 0 0 20px -4px rgba(3, 255, 158, 0.4) !important; } .filter-btn:not(.active):hover { border-color: rgba(3, 255, 158, 0.3) !important; color: #ffffff !important; } .filter-select { appearance: none; -webkit-appearance: none; background-color: #111a33; border: 1px solid rgba(255,255,255,0.14); color: #e2e8f0; font-size: 14px; font-weight: 600; padding: 9px 40px 9px 16px; border-radius: 12px; outline: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 13px center; transition: border-color 0.2s; } .filter-select:hover { border-color: rgba(3,255,158,0.3); } .filter-select:focus { border-color: rgba(3,255,158,0.45); } .filter-select option { background: #151b33; color: #e2e8f0; } /* Case card */ .case-card { transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .case-card:hover { transform: translateY(-6px); box-shadow: 0 28px 90px -48px rgba(3, 255, 158, 0.28); } .case-card.hidden-card { display: none; } /* Type badge colors */ .badge-real { background: rgba(3, 255, 158, 0.12); color: #03FF9E; border-color: rgba(3, 255, 158, 0.25); } .badge-anonimo { background: rgba(99, 102, 241, 0.12); color: #818cf8; border-color: rgba(99, 102, 241, 0.25); } .badge-referencial { background: rgba(37, 99, 235, 0.12); color: #60a5fa; border-color: rgba(37, 99, 235, 0.25); } /* Industry badge */ .ind-fintech { background: rgba(251,191,36,0.1); color: #fbbf24; border-color: rgba(251,191,36,0.25); } .ind-banca { background: rgba(59,130,246,0.1); color: #60a5fa; border-color: rgba(59,130,246,0.25); } .ind-tech { background: rgba(139,92,246,0.1); color: #c4b5fd; border-color: rgba(139,92,246,0.25); } .ind-energia { background: rgba(249,115,22,0.1); color: #fb923c; border-color: rgba(249,115,22,0.25); } .ind-construccion { background: rgba(161,161,170,0.1); color: #a1a1aa; border-color: rgba(161,161,170,0.25); } .ind-seguros { background: rgba(20,184,166,0.1); color: #2dd4bf; border-color: rgba(20,184,166,0.25); } /* sAIfy */ #sAIfy-widget { position: fixed; bottom: 24px; right: 24px; width: 360px; background: #151B33; border: 1px solid rgba(3, 255, 158, 0.3); border-radius: 16px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); z-index: 9999; display: none; flex-direction: column; overflow: hidden; max-height: 520px; } #sAIfy-widget.open { display: flex; } .chat-trigger { position: fixed; bottom: 24px; right: 24px; width: 56px; height: 56px; background: #03FF9E; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 9998; box-shadow: 0 0 24px rgba(3, 255, 158, 0.4); transition: all 0.3s; } .chat-trigger:hover { transform: scale(1.1); box-shadow: 0 0 36px rgba(3, 255, 158, 0.6); } .chat-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid rgba(255,255,255,0.08); background: rgba(11,17,36,0.6); } .chat-body { flex: 1; overflow-y: auto; padding: 16px 20px; display: flex; flex-direction: column; gap: 12px; } .chat-footer { padding: 14px 16px; border-top: 1px solid rgba(255,255,255,0.08); display: flex; gap: 8px; background: rgba(11,17,36,0.6); } /* compliance-readiness/document-head.njk */ body { font-family: Inter, sans-serif; } #navbar.scrolled { background: rgba(11,17,36,.92)!important; backdrop-filter: blur(14px); border-bottom: 1px solid rgba(3,255,158,.1); } .glass-panel { background: rgba(21,27,51,.72); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.05); } .cyber-grid { background-image: linear-gradient(to right,rgba(37,99,235,.1) 1px,transparent 1px),linear-gradient(to bottom,rgba(37,99,235,.08) 1px,transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(ellipse 80% 60% at 50% 0%,black 0%,transparent 75%); opacity: .35; } .grad-border { position: relative; background: linear-gradient(#151B33,#151B33) padding-box, linear-gradient(135deg, rgba(3,255,158,0.35), rgba(37,99,235,0.25) 45%, rgba(255,255,255,0.04) 80%) border-box; border: 1px solid transparent; } .grad-border-soft { position: relative; background: linear-gradient(#151B33,#151B33) padding-box, linear-gradient(135deg, rgba(255,255,255,0.12), rgba(255,255,255,0.02)) border-box; border: 1px solid transparent; } .btn-neon { position: relative; background: #03FF9E; color: #0B1124; box-shadow: 0 0 0 0 rgba(3,255,158,0); transition: box-shadow 0.35s ease, transform 0.2s ease, background 0.2s; } .btn-neon:hover { background: #02d483; box-shadow: 0 18px 50px -18px rgba(3,255,158,0.6); transform: translateY(-1px); } .wow { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); } .wow.visible { opacity: 1; transform: translateY(0); } .video-frame { position: relative; width: 100%; padding-top: 56.25%; border-radius: 1rem; overflow: hidden; } .video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } .marquee-track { display: flex; width: max-content; animation: marquee 60s linear infinite; } .marquee-mask { overflow: hidden; width: 100%; max-width: 100%; mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); } @media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } } /* contacto/document-head.njk */ body { font-family: "Inter", sans-serif; } /* Navbar scroll */ #navbar.scrolled { background: rgba(11, 17, 36, 0.92) !important; backdrop-filter: blur(14px); border-bottom: 1px solid rgba(3, 255, 158, 0.1); } /* Glass */ .glass-panel { background: rgba(21, 27, 51, 0.7); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.05); } /* Animations */ .wow { opacity: 0; transform: translateY(30px); transition: opacity 0.8s cubic-bezier(0.4,0,0.2,1), transform 0.8s cubic-bezier(0.4,0,0.2,1); } .wow.visible { opacity: 1; transform: translateY(0); } @keyframes fade-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } .fade-up-1 { animation: fade-up 0.7s ease-out 0.2s both; } .fade-up-2 { animation: fade-up 0.7s ease-out 0.4s both; } .fade-up-3 { animation: fade-up 0.7s ease-out 0.6s both; } .fade-up-4 { animation: fade-up 0.7s ease-out 0.8s both; } @keyframes bg-drift { 0% { transform: translate(0,0) scale(1); } 50% { transform: translate(-3%, 2%) scale(1.06); } 100% { transform: translate(0,0) scale(1); } } .bg-orb { animation: bg-drift 16s ease-in-out infinite; } /* Cyber grid */ .cyber-grid { background-image: linear-gradient(to right, rgba(37,99,235,0.10) 1px, transparent 1px), linear-gradient(to bottom, rgba(37,99,235,0.08) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black 0%, transparent 75%); opacity: 0.35; } /* HubSpot form overrides */ .hs-form, .hs-form .submitted-message { background: transparent !important; } .hs-form fieldset, .hs-form .fieldset, .hs-form .hs-form-field, .hs-form .field, .hs-form .form-columns-1, .hs-form .form-columns-2, .hs-form .form-columns-3, .hs-form .input, .hs-form .hs-fieldtype-text, .hs-form .hs-fieldtype-select, .hs-form .hs-fieldtype-textarea, .hs-form .hs-fieldtype-booleancheckbox, .hs-form .hs-fieldtype-checkbox, .hs-form .hs-fieldtype-radio { border: none !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; outline: none !important; padding: 0 !important; } #hs-form-contact .hs-form-field label { color: #94a3b8 !important; font-size: 0.8rem !important; } #hs-form-contact input, #hs-form-contact select, #hs-form-contact textarea { background: rgba(255,255,255,0.04) !important; border: 1px solid rgba(255,255,255,0.08) !important; border-radius: 0.75rem !important; color: white !important; padding: 0.75rem 1rem !important; } #hs-form-contact input:focus, #hs-form-contact textarea:focus { border-color: rgba(3,255,158,0.5) !important; outline: none !important; } #hs-form-contact .hs-button { background: #03FF9E !important; color: #0B1124 !important; font-weight: 700 !important; border-radius: 0.75rem !important; padding: 0.875rem 2rem !important; border: none !important; width: 100% !important; cursor: pointer !important; transition: background 0.2s !important; } #hs-form-contact .hs-button:hover { background: #02d483 !important; } /* ebook-detail/document-head.njk */ body { font-family: "Inter", sans-serif; } #navbar.scrolled { background: rgba(11, 17, 36, 0.92) !important; backdrop-filter: blur(14px); border-bottom: 1px solid rgba(3, 255, 158, 0.1); } .glass-panel { background: rgba(21, 27, 51, 0.72); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.05); } .cyber-grid { background-image: linear-gradient( to right, rgba(37, 99, 235, 0.1) 1px, transparent 1px ), linear-gradient( to bottom, rgba(37, 99, 235, 0.08) 1px, transparent 1px ); background-size: 56px 56px; mask-image: radial-gradient( ellipse 80% 60% at 50% 0%, black 0%, transparent 75% ); opacity: 0.35; } .resource-card:hover .resource-card__img, .portrait-card:hover img { transform: scale(1.04); } .resource-card__img, .portrait-card img { transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); } /* ebooks/document-head.njk */ body { font-family: "Inter", sans-serif; } #navbar.scrolled { background: rgba(11, 17, 36, 0.92) !important; backdrop-filter: blur(14px); border-bottom: 1px solid rgba(3, 255, 158, 0.1); } .glass-panel { background: rgba(21, 27, 51, 0.72); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.05); } .cyber-grid { background-image: linear-gradient( to right, rgba(37, 99, 235, 0.1) 1px, transparent 1px ), linear-gradient( to bottom, rgba(37, 99, 235, 0.08) 1px, transparent 1px ); background-size: 56px 56px; mask-image: radial-gradient( ellipse 80% 60% at 50% 0%, black 0%, transparent 75% ); opacity: 0.35; } .resource-card:hover .resource-card__img { transform: scale(1.04); } .resource-card__img { transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); } .wow { opacity: 0; transform: translateY(24px); transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); } .wow.visible { opacity: 1; transform: translateY(0); } /* eventos-disruptivos/document-head.njk */ body { font-family: Inter, sans-serif; } #navbar.scrolled { background: rgba(11,17,36,.92)!important; backdrop-filter: blur(14px); border-bottom: 1px solid rgba(3,255,158,.1); } .glass-panel { background: rgba(21,27,51,.72); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.05); } .cyber-grid { background-image: linear-gradient(to right,rgba(37,99,235,.1) 1px,transparent 1px),linear-gradient(to bottom,rgba(37,99,235,.08) 1px,transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(ellipse 80% 60% at 50% 0%,black 0%,transparent 75%); opacity: .35; } .grad-border { position: relative; background: linear-gradient(#151B33,#151B33) padding-box, linear-gradient(135deg, rgba(3,255,158,0.35), rgba(37,99,235,0.25) 45%, rgba(255,255,255,0.04) 80%) border-box; border: 1px solid transparent; } .grad-border-soft { position: relative; background: linear-gradient(#151B33,#151B33) padding-box, linear-gradient(135deg, rgba(255,255,255,0.12), rgba(255,255,255,0.02)) border-box; border: 1px solid transparent; } .btn-neon { position: relative; background: #03FF9E; color: #0B1124; box-shadow: 0 0 0 0 rgba(3,255,158,0); transition: box-shadow 0.35s ease, transform 0.2s ease, background 0.2s; } .btn-neon:hover { background: #02d483; box-shadow: 0 18px 50px -18px rgba(3,255,158,0.6); transform: translateY(-1px); } .wow { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); } .wow.visible { opacity: 1; transform: translateY(0); } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } .marquee-track { display: flex; width: max-content; animation: marquee 60s linear infinite; } .marquee-mask { overflow: hidden; width: 100%; max-width: 100%; mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); } @media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } } /* gracias/document-head.njk */ body { font-family: "Inter", sans-serif; } /* Navbar scroll */ #navbar.scrolled { background: rgba(11, 17, 36, 0.92) !important; backdrop-filter: blur(14px); border-bottom: 1px solid rgba(3, 255, 158, 0.1); } /* Glass panel */ .glass-panel { background: rgba(21, 27, 51, 0.7); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.05); } /* Checkmark animation */ @keyframes check-draw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } } @keyframes circle-scale { 0% { transform: scale(0.6); opacity: 0; } 60% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); opacity: 1; } } @keyframes fade-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } @keyframes glow-pulse { 0%, 100% { box-shadow: 0 0 30px rgba(3,255,158,0.25), 0 0 60px rgba(3,255,158,0.1); } 50% { box-shadow: 0 0 50px rgba(3,255,158,0.45), 0 0 100px rgba(3,255,158,0.2); } } @keyframes bg-drift { 0% { transform: translate(0,0) scale(1); } 50% { transform: translate(-3%, 2%) scale(1.06); } 100% { transform: translate(0,0) scale(1); } } .check-circle { animation: circle-scale 0.7s cubic-bezier(0.34,1.56,0.64,1) 0.3s both, glow-pulse 3s ease-in-out 1.2s infinite; } .check-path { stroke-dasharray: 100; stroke-dashoffset: 100; animation: check-draw 0.5s ease-out 0.9s forwards; } .fade-up-1 { animation: fade-up 0.7s ease-out 1.0s both; } .fade-up-2 { animation: fade-up 0.7s ease-out 1.2s both; } .fade-up-3 { animation: fade-up 0.7s ease-out 1.4s both; } .fade-up-4 { animation: fade-up 0.7s ease-out 1.6s both; } .bg-orb { animation: bg-drift 14s ease-in-out infinite; } /* Cyber grid */ .cyber-grid { background-image: linear-gradient(to right, rgba(37,99,235,0.12) 1px, transparent 1px), linear-gradient(to bottom, rgba(37,99,235,0.10) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(circle at 50% 40%, black 0%, transparent 70%); opacity: 0.3; } /* human-risk/document-head.njk */ body { font-family: "Inter", sans-serif; } .no-scrollbar::-webkit-scrollbar { display: none; } .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; } /* ── Animaciones WOW ─────────────────────────────────────────── */ .wow { opacity: 0; transform: translateY(40px) scale(0.98); transition: opacity 0.9s cubic-bezier(0.4, 0, 0.2, 1), transform 0.9s cubic-bezier(0.4, 0, 0.2, 1); } .wow.visible { opacity: 1; transform: translateY(0) scale(1); } .wow-title { opacity: 0; transform: translateY(30px) scale(0.97); transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1), transform 1s cubic-bezier(0.4, 0, 0.2, 1); } .wow-title.visible { opacity: 1; transform: translateY(0) scale(1); } .wow-card { opacity: 0; transform: scale(0.95) translateY(30px); transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 0.8s cubic-bezier(0.4, 0, 0.2, 1); } .wow-card.visible { opacity: 1; transform: scale(1) translateY(0); } /* ── Efecto Glass ────────────────────────────────────────────── */ .glass-panel { background: rgba(21, 27, 51, 0.7); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.05); } /* ============================================================ SOLUCIONES — selector + panel ============================================================ */ .sol-btn { background: rgba(21,27,51,0.2); border-color: rgba(255,255,255,0.05); } .sol-btn:hover { background: rgba(21,27,51,0.4); border-color: rgba(255,255,255,0.10); } .sol-btn-active { background: rgba(3,255,158,0.06) !important; border-color: rgba(3,255,158,0.30) !important; } .sol-btn-active .sol-arrow { color: #03FF9E; } .sol-btn-active .text-white { color: #ffffff; } /* ── Ciclo animado ───────────────────────────────────────────── */ .cycle-node { transition: background 0.4s, color 0.4s, box-shadow 0.4s, transform 0.4s; } .cycle-active { background: #03FF9E !important; color: #0B1124 !important; box-shadow: 0 0 28px rgba(3,255,158,0.55) !important; transform: scale(1.15) !important; } /* ══════════════════════════════════════════════════════════════ HERO — Variables, gradiente animado, parallax, cyber layer ══════════════════════════════════════════════════════════════ */ :root { --hero-blue: 37 99 235; --hero-indigo: 99 102 241; --hero-neon: 3 255 158; --hero-bg1: 11 17 36; --hero-bg2: 13 27 70; } /* Navbar: se vuelve sólido al hacer scroll */ #navbar.scrolled { background: rgba(11, 17, 36, 0.92) !important; backdrop-filter: blur(14px); border-bottom: 1px solid rgba(3, 255, 158, 0.1); } @keyframes hero-gradient-shift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @keyframes hero-gradient-drift { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(-6%, 3%, 0) scale(1.08); } 100% { transform: translate3d(0, 0, 0) scale(1); } } .hero-animated-gradient { background-image: radial-gradient( 60% 60% at 20% 30%, rgb(var(--hero-blue) / 0.4) 0%, rgb(var(--hero-blue) / 0) 60% ), radial-gradient( 55% 55% at 80% 25%, rgb(var(--hero-indigo) / 0.28) 0%, rgb(var(--hero-indigo) / 0) 60% ), radial-gradient( 60% 60% at 70% 80%, rgb(var(--hero-neon) / 0.14) 0%, rgb(var(--hero-neon) / 0) 60% ), linear-gradient( 120deg, rgb(var(--hero-bg1) / 0.9) 0%, rgb(var(--hero-bg2) / 0.7) 35%, rgb(var(--hero-blue) / 0.55) 70%, rgb(var(--hero-bg1) / 0.92) 100% ); background-size: 260% 260%; animation: hero-gradient-shift 10s ease-in-out infinite, hero-gradient-drift 12s ease-in-out infinite; filter: saturate(1.15) contrast(1.05); will-change: transform, background-position; } .hero-parallax-layer { transform: translate3d( 0, calc(var(--hero-parallax, 0) * -48px), 0 ) scale(calc(1 + var(--hero-parallax, 0) * 0.05)); transform-origin: 50% 40%; will-change: transform; } .hero-scroll-vignette { pointer-events: none; opacity: calc(0.25 + var(--hero-parallax, 0) * 0.45); background: radial-gradient( ellipse 85% 70% at 50% 35%, transparent 0%, rgb(0 0 0 / 0.55) 100% ); transition: opacity 120ms ease-out; } .hero-scroll-progress { position: absolute; bottom: 0; left: 0; right: 0; height: 3px; z-index: 15; background: rgb(255 255 255 / 0.06); } .hero-scroll-progress__bar { height: 100%; width: 0%; background: linear-gradient( 90deg, rgb(var(--hero-neon) / 0.35), rgb(var(--hero-blue) / 0.9) ); box-shadow: 0 0 14px rgb(var(--hero-neon) / 0.35); transition: width 80ms linear; } /* ── Cyber shapes ────────────────────────────────────────────── */ .hero-cyber-layer { pointer-events: none; mix-blend-mode: screen; opacity: 0.8; filter: saturate(1.2) contrast(1.08); } .cyber-grid { background-image: linear-gradient( to right, rgba(37, 99, 235, 0.16) 1px, transparent 1px ), linear-gradient( to bottom, rgba(37, 99, 235, 0.14) 1px, transparent 1px ); background-size: 56px 56px; mask-image: radial-gradient( circle at 50% 35%, black 0%, black 50%, transparent 72% ); opacity: 0.36; } .cyber-scanline { background: linear-gradient( 90deg, transparent 0%, rgba(3, 255, 158, 0.26) 50%, transparent 100% ); filter: blur(0.4px); animation: cyber-scan 2.4s ease-in-out infinite; } .cyber-shape { position: absolute; border-radius: 9999px; animation: cyber-float 8.5s ease-in-out infinite; will-change: transform, opacity; } .cyber-hex { width: 86px; height: 86px; border: 1px solid rgba(37, 99, 235, 0.34); box-shadow: 0 0 28px rgba(37, 99, 235, 0.18); clip-path: polygon( 25% 6%, 75% 6%, 100% 50%, 75% 94%, 25% 94%, 0% 50% ); background: radial-gradient( circle at 30% 30%, rgba(37, 99, 235, 0.16), transparent 60% ); animation: cyber-rotate 26s linear infinite; } .cyber-node { width: 10px; height: 10px; background: rgba(3, 255, 158, 0.36); box-shadow: 0 0 24px rgba(3, 255, 158, 0.28); animation: cyber-flicker 2.8s ease-in-out infinite; } .cyber-line { width: 160px; height: 2px; background: linear-gradient( 90deg, transparent 0%, rgba(37, 99, 235, 0.34) 40%, rgba(3, 255, 158, 0.22) 60%, transparent 100% ); border-radius: 9999px; filter: blur(0.2px); } .cyber-diag { width: 220px; height: 2px; background: linear-gradient( 90deg, transparent 0%, rgba(99, 102, 241, 0.32) 40%, rgba(37, 99, 235, 0.24) 60%, transparent 100% ); transform: rotate(-22deg); border-radius: 9999px; } .cyber-dashed { width: 240px; height: 2px; background: repeating-linear-gradient( 90deg, rgba(37, 99, 235, 0) 0px, rgba(37, 99, 235, 0) 10px, rgba(37, 99, 235, 0.3) 10px, rgba(37, 99, 235, 0.3) 18px ); border-radius: 9999px; filter: drop-shadow(0 0 10px rgba(37, 99, 235, 0.18)); } @keyframes cyber-float { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -12px, 0); } } @keyframes cyber-rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes cyber-flicker { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } @keyframes cyber-scan { 0%, 100% { transform: translateX(-100%); opacity: 0; } 10%, 90% { opacity: 1; } 50% { transform: translateX(200%); } } /* index/document-head.njk */ :root { --bg: #0b1124; --surface: #151b33; --neon: #03ff9e; --blue: 37 99 235; --indigo: 99 102 241; --hero-blue: 37 99 235; --hero-indigo: 99 102 241; --hero-neon: 3 255 158; --hero-bg1: 11 17 36; --hero-bg2: 13 27 70; } @keyframes hero-gradient-shift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @keyframes hero-gradient-drift { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(-6%, 3%, 0) scale(1.08); } 100% { transform: translate3d(0, 0, 0) scale(1); } } .hero-animated-gradient { background-image: radial-gradient( 60% 60% at 20% 30%, rgb(var(--hero-blue) / 0.4) 0%, rgb(var(--hero-blue) / 0) 60% ), radial-gradient( 55% 55% at 80% 25%, rgb(var(--hero-indigo) / 0.28) 0%, rgb(var(--hero-indigo) / 0) 60% ), radial-gradient( 60% 60% at 70% 80%, rgb(var(--hero-neon) / 0.14) 0%, rgb(var(--hero-neon) / 0) 60% ), linear-gradient( 120deg, rgb(var(--hero-bg1) / 0.9) 0%, rgb(var(--hero-bg2) / 0.7) 35%, rgb(var(--hero-blue) / 0.55) 70%, rgb(var(--hero-bg1) / 0.92) 100% ); background-size: 260% 260%; animation: hero-gradient-shift 10s ease-in-out infinite, hero-gradient-drift 12s ease-in-out infinite; filter: saturate(1.15) contrast(1.05); will-change: transform, background-position; } .hero-parallax-layer { transform: translate3d( 0, calc(var(--hero-parallax, 0) * -48px), 0 ) scale(calc(1 + var(--hero-parallax, 0) * 0.05)); transform-origin: 50% 40%; will-change: transform; } .hero-scroll-vignette { pointer-events: none; opacity: calc(0.25 + var(--hero-parallax, 0) * 0.45); background: radial-gradient( ellipse 85% 70% at 50% 35%, transparent 0%, rgb(0 0 0 / 0.55) 100% ); transition: opacity 120ms ease-out; } .hero-scroll-progress { position: absolute; bottom: 0; left: 0; right: 0; height: 3px; z-index: 15; background: rgb(255 255 255 / 0.06); } .hero-scroll-progress__bar { height: 100%; width: 0%; background: linear-gradient( 90deg, rgb(var(--hero-neon) / 0.35), rgb(var(--hero-blue) / 0.9) ); box-shadow: 0 0 14px rgb(var(--hero-neon) / 0.35); transition: width 80ms linear; } /* ── Cyber shapes ────────────────────────────────────────────── */ .hero-cyber-layer { pointer-events: none; mix-blend-mode: screen; opacity: 0.8; filter: saturate(1.2) contrast(1.08); } .cyber-grid { background-image: linear-gradient( to right, rgba(37, 99, 235, 0.16) 1px, transparent 1px ), linear-gradient( to bottom, rgba(37, 99, 235, 0.14) 1px, transparent 1px ); background-size: 56px 56px; mask-image: radial-gradient( circle at 50% 35%, black 0%, black 50%, transparent 72% ); opacity: 0.36; } .cyber-scanline { background: linear-gradient( 90deg, transparent 0%, rgba(3, 255, 158, 0.26) 50%, transparent 100% ); filter: blur(0.4px); animation: cyber-scan 2.4s ease-in-out infinite; } .cyber-shape { position: absolute; border-radius: 9999px; animation: cyber-float 8.5s ease-in-out infinite; will-change: transform, opacity; } .cyber-hex { width: 86px; height: 86px; border: 1px solid rgba(37, 99, 235, 0.34); box-shadow: 0 0 28px rgba(37, 99, 235, 0.18); clip-path: polygon( 25% 6%, 75% 6%, 100% 50%, 75% 94%, 25% 94%, 0% 50% ); background: radial-gradient( circle at 30% 30%, rgba(37, 99, 235, 0.16), transparent 60% ); animation: cyber-rotate 26s linear infinite; } .cyber-node { width: 10px; height: 10px; background: rgba(3, 255, 158, 0.36); box-shadow: 0 0 24px rgba(3, 255, 158, 0.28); animation: cyber-flicker 2.8s ease-in-out infinite; } .cyber-line { width: 160px; height: 2px; background: linear-gradient( 90deg, transparent 0%, rgba(37, 99, 235, 0.34) 40%, rgba(3, 255, 158, 0.22) 60%, transparent 100% ); border-radius: 9999px; filter: blur(0.2px); } .cyber-diag { width: 220px; height: 2px; background: linear-gradient( 90deg, transparent 0%, rgba(99, 102, 241, 0.32) 40%, rgba(37, 99, 235, 0.24) 60%, transparent 100% ); transform: rotate(-22deg); border-radius: 9999px; } .cyber-dashed { width: 240px; height: 2px; background: repeating-linear-gradient( 90deg, rgba(37, 99, 235, 0) 0px, rgba(37, 99, 235, 0) 10px, rgba(37, 99, 235, 0.3) 10px, rgba(37, 99, 235, 0.3) 18px ); border-radius: 9999px; filter: drop-shadow(0 0 10px rgba(37, 99, 235, 0.18)); } @keyframes cyber-float { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -12px, 0); } } @keyframes cyber-rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes cyber-flicker { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } @keyframes cyber-scan { 0%, 100% { transform: translateX(-100%); opacity: 0; } 10%, 90% { opacity: 1; } 50% { transform: translateX(200%); } } * { -webkit-font-smoothing: antialiased; } body { font-family: "Inter", sans-serif; background: var(--bg); letter-spacing: -0.01em; } h1, h2, h3, .font-display { font-family: "Inter", sans-serif; letter-spacing: -0.025em; } .no-scrollbar::-webkit-scrollbar { display: none; } .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; } /* ============ TEXTURAS DE FONDO ============ */ /* Grano sutil */ .grain::after { content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0.025; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* Dot grid */ .dot-grid { background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px); background-size: 28px 28px; mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 75%); } /* ============ BORDES CON GRADIENTE ============ */ .grad-border { position: relative; background: linear-gradient(var(--surface), var(--surface)) padding-box, linear-gradient(135deg, rgba(3, 255, 158, 0.35), rgba(37, 99, 235, 0.25) 45%, rgba(255, 255, 255, 0.04) 80%) border-box; border: 1px solid transparent; } .grad-border-soft { position: relative; background: linear-gradient(var(--surface), var(--surface)) padding-box, linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.02)) border-box; border: 1px solid transparent; } /* ============ SPOTLIGHT EN HOVER ============ */ .spotlight { position: relative; overflow: hidden; } .spotlight::before { content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity 0.4s ease; background: radial-gradient( 320px circle at var(--mx, 50%) var(--my, 50%), rgba(3, 255, 158, 0.10), transparent 60% ); pointer-events: none; } .spotlight:hover::before { opacity: 1; } /* ============ GLOW BUTTON ============ */ .btn-neon { position: relative; background: var(--neon); color: var(--bg); box-shadow: 0 0 0 0 rgba(3, 255, 158, 0); transition: box-shadow 0.35s ease, transform 0.2s ease, background 0.2s; } .btn-neon:hover { background: #02d483; box-shadow: 0 18px 50px -18px rgba(3, 255, 158, 0.6); transform: translateY(-1px); } /* ============ HERO GRADIENT MESH ============ */ @keyframes mesh-drift { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(-3%, 2%, 0) scale(1.06); } } .hero-mesh { background: radial-gradient(50% 50% at 18% 20%, rgba(var(--blue) / 0.45) 0%, transparent 60%), radial-gradient(45% 45% at 82% 15%, rgba(var(--indigo) / 0.30) 0%, transparent 60%), radial-gradient(55% 55% at 70% 75%, rgba(3, 255, 158, 0.14) 0%, transparent 60%); animation: mesh-drift 16s ease-in-out infinite; filter: saturate(1.1); } /* ============ REVEAL ON SCROLL ============ */ [data-reveal] { opacity: 0; transform: translateY(22px); filter: blur(4px); transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1), filter 0.9s cubic-bezier(0.16, 1, 0.3, 1); will-change: opacity, transform; } [data-reveal].in { opacity: 1; transform: translateY(0); filter: blur(0); } /* ============ NAVBAR ============ */ #navbar.scrolled { background: rgba(11, 17, 36, 0.92); backdrop-filter: blur(14px); border-bottom: 1px solid rgba(3, 255, 158, 0.1); } /* Cursor glow suave */ #cursor-glow { transition: opacity 0.5s ease; } /* ============ MARQUEE ============ */ @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } .marquee-track { display: flex; width: max-content; animation: marquee 38s linear infinite; } .marquee-mask { overflow: hidden; width: 100%; max-width: 100%; mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); } /* ============ DASHBOARD MOCKUP ============ */ @keyframes float-card { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } .float-slow { animation: float-card 7s ease-in-out infinite; } @keyframes bar-grow { from { width: 0; } } .bar-fill { background: linear-gradient(90deg, var(--neon), #2563eb); border-radius: 999px; height: 100%; animation: bar-grow 1.6s cubic-bezier(0.16, 1, 0.3, 1); } /* Ring */ .ring-score { background: conic-gradient(var(--neon) 0% var(--p, 72%), rgba(255, 255, 255, 0.06) var(--p, 72%) 100%); } /* FAQ */ .faq-body { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; } .faq-item.open .faq-body { max-height: 320px; } .faq-item.open .faq-chev { transform: rotate(180deg); } /* sAIfy widget */ #saify { position: fixed; bottom: 24px; right: 24px; width: 360px; background: #151B33; border: 1px solid rgba(3,255,158,0.3); border-radius: 18px; box-shadow: 0 20px 60px rgba(0,0,0,0.5); z-index: 9999; display: none; flex-direction: column; overflow: hidden; max-height: 520px; } #saify.open { display: flex; } #saify-trigger { position: fixed; bottom: 24px; right: 24px; width: 58px; height: 58px; background: var(--neon); border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 9998; box-shadow: 0 0 26px rgba(3,255,158,0.45); transition: transform 0.25s; } #saify-trigger:hover { transform: scale(1.08); } /* ===================== sAIfy chat ===================== */ .saify-row { display: flex; } .saify-msg-bot, .saify-msg-user { max-width: 88%; padding: 10px 14px; border-radius: 16px; font-size: 14px; line-height: 1.5; } .saify-msg-bot { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.07); color: #e2e8f0; border-bottom-left-radius: 4px; } .saify-msg-user { background: rgba(3,255,158,0.12); border: 1px solid rgba(3,255,158,0.25); color: #d1fae5; border-bottom-right-radius: 4px; margin-left: auto; } .saify-opt { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 10px 14px; border-radius: 12px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1); color: #cbd5e1; font-size: 13.5px; transition: all .2s; cursor: pointer; } .saify-opt:hover { border-color: rgba(3,255,158,0.4); color: #fff; background: rgba(3,255,158,0.06); } .saify-opt.primary { background: #03FF9E; color: #0B1124; font-weight: 700; border-color: #03FF9E; } .saify-opt.primary:hover { background: #02d483; color: #0B1124; } .saify-card { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 14px; text-decoration: none; cursor: pointer; } .saify-typing span { display: inline-block; width: 6px; height: 6px; margin: 0 1px; border-radius: 50%; background: #64748b; animation: saify-blink 1.2s infinite; } .saify-typing span:nth-child(2) { animation-delay: .2s; } .saify-typing span:nth-child(3) { animation-delay: .4s; } @keyframes saify-blink { 0%,60%,100% { opacity: .25; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } } .saify-hero-panel { display: flex; flex-direction: column; height: 540px; max-height: 76vh; } .saify-scroll { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 10px; } .saify-scroll::-webkit-scrollbar { width: 6px; } .saify-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 3px; } .saify-inputbar { display: flex; gap: 8px; padding: 12px; border-top: 1px solid rgba(255,255,255,0.08); } .saify-inputbar input { flex: 1; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; padding: 10px 14px; color: #fff; font-size: 14px; outline: none; } .saify-inputbar input:focus { border-color: rgba(3,255,158,0.4); } /* ===== finder / command-palette ===== */ .saify-search { display: flex; align-items: center; gap: 10px; padding: 16px 18px; border-top: 1px solid rgba(255,255,255,0.07); position: relative; } .saify-search::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%; background: linear-gradient(90deg, transparent, rgba(3,255,158,0.35), transparent); opacity: 0; transition: opacity .3s; } .saify-search:focus-within::after { opacity: 1; } .saify-search > i { color: #03FF9E; flex-shrink: 0; } .saify-search input { flex: 1; background: transparent; border: 0; outline: 0; color: #fff; font-size: 15px; } .saify-search input::placeholder { color: #64748b; } .saify-go { width: 36px; height: 36px; border-radius: 11px; display: flex; align-items: center; justify-content: center; background: rgba(3,255,158,0.12); color: #03FF9E; cursor: pointer; border: 1px solid rgba(3,255,158,0.25); flex-shrink: 0; transition: all .2s; } .saify-go:hover { background: #03FF9E; color: #0B1124; } .saify-step { animation: stepIn .42s cubic-bezier(.16,1,.3,1); } @keyframes stepIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } .saify-prompt { color: #fff; font-size: 15px; font-weight: 600; line-height: 1.45; margin: 2px 0 16px; } .saify-hint { color: #64748b; font-size: 12px; margin: -8px 0 4px; } .saify-back { display: inline-flex; align-items: center; gap: 5px; color: #94a3b8; font-size: 12px; background: none; border: 0; cursor: pointer; margin-bottom: 12px; padding: 0; } .saify-back:hover { color: #03FF9E; } .saify-list { display: flex; flex-direction: column; gap: 8px; } .saify-row-opt { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 13px 14px; border-radius: 14px; background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.08); cursor: pointer; transition: all .2s; } .saify-row-opt:hover { background: rgba(3,255,158,0.06); border-color: rgba(3,255,158,0.35); transform: translateX(3px); } .saify-row-opt.primary { background: rgba(3,255,158,0.08); border-color: rgba(3,255,158,0.35); } .saify-ic { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.05); color: #03FF9E; flex-shrink: 0; } .saify-row-opt.primary .saify-ic { background: #03FF9E; color: #0B1124; } .saify-row-label { flex: 1; color: #e2e8f0; font-size: 13.5px; font-weight: 500; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .saify-tag { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #03FF9E; background: rgba(3,255,158,0.12); padding: 2px 7px; border-radius: 999px; } .saify-arrow { color: #475569; transition: transform .2s, color .2s; flex-shrink: 0; } .saify-row-opt:hover .saify-arrow { color: #03FF9E; transform: translateX(3px); } .saify-featured { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 14px; border-radius: 16px; margin-bottom: 14px; cursor: pointer; background: linear-gradient(135deg, rgba(3,255,158,0.1), rgba(37,99,235,0.08)); border: 1px solid rgba(3,255,158,0.3); transition: all .2s; } .saify-featured:hover { border-color: rgba(3,255,158,0.55); transform: translateY(-1px); } .saify-featured-ic { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: rgba(3,255,158,0.15); color: #03FF9E; flex-shrink: 0; } .saify-featured-body { flex: 1; display: flex; flex-direction: column; } .saify-featured-kicker { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: #03FF9E; font-weight: 700; } .saify-featured-title { color: #fff; font-weight: 700; font-size: 15px; } .saify-reset { margin-top: 16px; background: none; border: 0; color: #64748b; font-size: 12px; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; } .saify-reset:hover { color: #94a3b8; } .saify-loading { display: flex; align-items: center; gap: 8px; color: #64748b; font-size: 13px; padding: 8px 0; } .saify-loading span { width: 6px; height: 6px; border-radius: 50%; background: #03FF9E; display: inline-block; animation: saify-blink 1.2s infinite; } .saify-loading span:nth-child(2) { animation-delay: .2s; } .saify-loading span:nth-child(3) { animation-delay: .4s; } .saify-success { display: flex; justify-content: center; margin: 6px 0 16px; } .saify-success-ic { width: 54px; height: 54px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(3,255,158,0.15); color: #03FF9E; border: 1px solid rgba(3,255,158,0.4); animation: popIn .45s cubic-bezier(.16,1,.3,1); } @keyframes popIn { from { transform: scale(.5); opacity: 0; } to { transform: scale(1); opacity: 1; } } /* ===== v3: buscador + finder integrado ===== */ .v3-finder { position: relative; } .v3-glow { position: absolute; inset: -4px; border-radius: 18px; background: linear-gradient(90deg,#03FF9E,#2563eb); opacity: .25; filter: blur(16px); transition: opacity 1s ease; pointer-events: none; z-index: 0; } .v3-finder:hover .v3-glow { opacity: .5; transition: opacity .2s ease; } .v3-finder.open .v3-glow, .v3-finder:focus-within .v3-glow { opacity: .5; } .v3-search { position: relative; z-index: 1; display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 14px; background: rgba(11,17,36,0.92); border: 1px solid rgba(255,255,255,0.1); border-radius: 16px; cursor: text; transition: border-radius .25s ease, border-color .25s ease; } .v3-finder.open .v3-search { border-radius: 16px 16px 0 0; border-bottom-color: transparent; } .v3-search > i { color: #03FF9E; flex-shrink: 0; } .v3-search input { flex: 1; background: transparent; border: 0; outline: 0; color: #fff; font-size: 15px; padding: 8px 2px; } .v3-search input::placeholder { color: #64748b; } .v3-panel { position: relative; z-index: 1; max-height: 0; opacity: 0; overflow: hidden; background: rgba(11,17,36,0.92); border: 1px solid rgba(255,255,255,0.1); border-top: 0; border-radius: 0 0 16px 16px; transition: max-height .42s cubic-bezier(.16,1,.3,1), opacity .3s ease; } .v3-finder.open .v3-panel { max-height: 1200px; opacity: 1; } .v3-panel .saify-step { padding: 4px 16px 16px; } /* barra superior fija: título + ocultar */ .v3-bar { position: sticky; top: 0; z-index: 3; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 14px 16px 8px; background: rgba(11,17,36,0.92); } .v3-bar-title { color: #fff; font-size: 15px; font-weight: 600; line-height: 1.4; } .v3-bar-toggle { display: inline-flex; align-items: center; gap: 6px; color: #03FF9E; font-size: 12.5px; font-weight: 600; background: none; border: 0; cursor: pointer; white-space: nowrap; flex-shrink: 0; margin-top: 2px; transition: opacity .2s; } .v3-bar-toggle:hover { opacity: .8; } @media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1 !important; transform: none !important; filter: none !important; } .hero-mesh, .marquee-track, .float-slow { animation: none !important; } } /* landing-descargables/document-head.njk */ body { font-family: Inter, sans-serif; } #navbar.scrolled { background: rgba(11,17,36,.92)!important; backdrop-filter: blur(14px); border-bottom: 1px solid rgba(3,255,158,.1); } .glass-panel { background: rgba(21,27,51,.72); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.05); } .cyber-grid { background-image: linear-gradient(to right,rgba(37,99,235,.1) 1px,transparent 1px),linear-gradient(to bottom,rgba(37,99,235,.08) 1px,transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(ellipse 80% 60% at 50% 0%,black 0%,transparent 75%); opacity: .35; } .grad-border { position: relative; background: linear-gradient(#151B33,#151B33) padding-box, linear-gradient(135deg, rgba(3,255,158,0.35), rgba(37,99,235,0.25) 45%, rgba(255,255,255,0.04) 80%) border-box; border: 1px solid transparent; } /* Portada mock del ebook */ .book { transform: perspective(1400px) rotateY(-14deg); transition: transform .5s cubic-bezier(.16,1,.3,1); box-shadow: -22px 30px 60px -25px rgba(0,0,0,.7); } .book:hover { transform: perspective(1400px) rotateY(-6deg) translateY(-4px); } /* HubSpot-like helpers */ .field { width: 100%; background: #111a33; border: 1px solid rgba(255,255,255,.16); border-radius: 12px; color: #f8fafc; font-size: 15px; min-height: 46px; padding: 11px 15px; outline: none; transition: border-color .2s; } .field:focus { border-color: rgba(3,255,158,.45); } .field::placeholder { color: #64748b; } /* landing-descargables-gracias/document-head.njk */ body { font-family: Inter, sans-serif; } #navbar.scrolled { background: rgba(11,17,36,.92)!important; backdrop-filter: blur(14px); border-bottom: 1px solid rgba(3,255,158,.1); } .glass-panel { background: rgba(21,27,51,.72); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.05); } .cyber-grid { background-image: linear-gradient(to right,rgba(37,99,235,.1) 1px,transparent 1px),linear-gradient(to bottom,rgba(37,99,235,.08) 1px,transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(ellipse 80% 60% at 50% 0%,black 0%,transparent 75%); opacity: .35; } .grad-border { position: relative; background: linear-gradient(#151B33,#151B33) padding-box, linear-gradient(135deg, rgba(3,255,158,0.35), rgba(37,99,235,0.25) 45%, rgba(255,255,255,0.04) 80%) border-box; border: 1px solid transparent; } .book { transform: perspective(1400px) rotateY(-14deg); transition: transform .5s cubic-bezier(.16,1,.3,1); box-shadow: -22px 30px 60px -25px rgba(0,0,0,.7); } .book:hover { transform: perspective(1400px) rotateY(-6deg) translateY(-4px); } @keyframes popIn { from { transform: scale(.5); opacity: 0; } to { transform: scale(1); opacity: 1; } } .pop { animation: popIn .5s cubic-bezier(.16,1,.3,1); } /* resilience/document-head.njk */ body { font-family: "Inter", sans-serif; } .no-scrollbar::-webkit-scrollbar { display: none; } .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; } /* ── Animaciones WOW ─────────────────────────────────────────── */ .wow { opacity: 0; transform: translateY(40px) scale(0.98); transition: opacity 0.9s cubic-bezier(0.4, 0, 0.2, 1), transform 0.9s cubic-bezier(0.4, 0, 0.2, 1); } .wow.visible { opacity: 1; transform: translateY(0) scale(1); } .wow-title { opacity: 0; transform: translateY(30px) scale(0.97); transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1), transform 1s cubic-bezier(0.4, 0, 0.2, 1); } .wow-title.visible { opacity: 1; transform: translateY(0) scale(1); } .wow-card { opacity: 0; transform: scale(0.95) translateY(30px); transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 0.8s cubic-bezier(0.4, 0, 0.2, 1); } .wow-card.visible { opacity: 1; transform: scale(1) translateY(0); } /* ── Efecto Glass ────────────────────────────────────────────── */ .glass-panel { background: rgba(21, 27, 51, 0.7); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.05); } /* ── Soluciones: selector + panel ────────────────────────────── */ .sol-btn { background: rgba(21, 27, 51, 0.2); border-color: rgba(255, 255, 255, 0.05); } .sol-btn:hover { background: rgba(21, 27, 51, 0.4); border-color: rgba(255, 255, 255, 0.1); } .sol-btn-active { background: rgba(3, 255, 158, 0.06) !important; border-color: rgba(3, 255, 158, 0.3) !important; } .sol-btn-active .sol-arrow { color: #03ff9e; } /* ── Tabs ────────────────────────────────────────────────────── */ .tab-btn.active { background-color: rgba(3, 255, 158, 0.1); color: #03ff9e; border-color: #03ff9e; } .tab-content { display: none; } .tab-content.active { display: block; animation: fadeInTab 0.4s ease; } @keyframes fadeInTab { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } /* ══════════════════════════════════════════════════════════════ HERO — Variables, gradiente animado, parallax, cyber layer ══════════════════════════════════════════════════════════════ */ :root { --hero-blue: 37 99 235; --hero-indigo: 99 102 241; --hero-neon: 3 255 158; --hero-bg1: 11 17 36; --hero-bg2: 13 27 70; } #navbar.scrolled { background: rgba(11, 17, 36, 0.92) !important; backdrop-filter: blur(14px); border-bottom: 1px solid rgba(3, 255, 158, 0.1); } @keyframes hero-gradient-shift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @keyframes hero-gradient-drift { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(-6%, 3%, 0) scale(1.08); } 100% { transform: translate3d(0, 0, 0) scale(1); } } .hero-animated-gradient { background-image: radial-gradient( 60% 60% at 20% 30%, rgb(var(--hero-blue) / 0.4) 0%, rgb(var(--hero-blue) / 0) 60% ), radial-gradient( 55% 55% at 80% 25%, rgb(var(--hero-indigo) / 0.28) 0%, rgb(var(--hero-indigo) / 0) 60% ), radial-gradient( 60% 60% at 70% 80%, rgb(var(--hero-neon) / 0.14) 0%, rgb(var(--hero-neon) / 0) 60% ), linear-gradient( 120deg, rgb(var(--hero-bg1) / 0.9) 0%, rgb(var(--hero-bg2) / 0.7) 35%, rgb(var(--hero-blue) / 0.55) 70%, rgb(var(--hero-bg1) / 0.92) 100% ); background-size: 260% 260%; animation: hero-gradient-shift 10s ease-in-out infinite, hero-gradient-drift 12s ease-in-out infinite; filter: saturate(1.15) contrast(1.05); will-change: transform, background-position; } .hero-parallax-layer { transform: translate3d( 0, calc(var(--hero-parallax, 0) * -48px), 0 ) scale(calc(1 + var(--hero-parallax, 0) * 0.05)); transform-origin: 50% 40%; will-change: transform; } .hero-scroll-vignette { pointer-events: none; opacity: calc(0.25 + var(--hero-parallax, 0) * 0.45); background: radial-gradient( ellipse 85% 70% at 50% 35%, transparent 0%, rgb(0 0 0 / 0.55) 100% ); transition: opacity 120ms ease-out; } .hero-scroll-progress { position: absolute; bottom: 0; left: 0; right: 0; height: 3px; z-index: 15; background: rgb(255 255 255 / 0.06); } .hero-scroll-progress__bar { height: 100%; width: 0%; background: linear-gradient( 90deg, rgb(var(--hero-neon) / 0.35), rgb(var(--hero-blue) / 0.9) ); box-shadow: 0 0 14px rgb(var(--hero-neon) / 0.35); transition: width 80ms linear; } /* ── Cyber shapes ────────────────────────────────────────────── */ .hero-cyber-layer { pointer-events: none; mix-blend-mode: screen; opacity: 0.8; filter: saturate(1.2) contrast(1.08); } .cyber-grid { background-image: linear-gradient( to right, rgba(37, 99, 235, 0.16) 1px, transparent 1px ), linear-gradient( to bottom, rgba(37, 99, 235, 0.14) 1px, transparent 1px ); background-size: 56px 56px; mask-image: radial-gradient( circle at 50% 35%, black 0%, black 50%, transparent 72% ); opacity: 0.36; } .cyber-scanline { background: linear-gradient( 90deg, transparent 0%, rgba(3, 255, 158, 0.26) 50%, transparent 100% ); filter: blur(0.4px); animation: cyber-scan 2.4s ease-in-out infinite; } .cyber-shape { position: absolute; border-radius: 9999px; animation: cyber-float 8.5s ease-in-out infinite; will-change: transform, opacity; } .cyber-hex { width: 86px; height: 86px; border: 1px solid rgba(37, 99, 235, 0.34); box-shadow: 0 0 28px rgba(37, 99, 235, 0.18); clip-path: polygon( 25% 6%, 75% 6%, 100% 50%, 75% 94%, 25% 94%, 0% 50% ); background: radial-gradient( circle at 30% 30%, rgba(37, 99, 235, 0.16), transparent 60% ); animation: cyber-rotate 26s linear infinite; } .cyber-node { width: 10px; height: 10px; background: rgba(3, 255, 158, 0.36); box-shadow: 0 0 24px rgba(3, 255, 158, 0.28); animation: cyber-flicker 2.8s ease-in-out infinite; } .cyber-line { width: 160px; height: 2px; background: linear-gradient( 90deg, transparent 0%, rgba(37, 99, 235, 0.34) 40%, rgba(3, 255, 158, 0.22) 60%, transparent 100% ); border-radius: 9999px; filter: blur(0.2px); } .cyber-diag { width: 220px; height: 2px; background: linear-gradient( 90deg, transparent 0%, rgba(99, 102, 241, 0.32) 40%, rgba(37, 99, 235, 0.24) 60%, transparent 100% ); transform: rotate(-22deg); border-radius: 9999px; } .cyber-dashed { width: 240px; height: 2px; background: repeating-linear-gradient( 90deg, rgba(37, 99, 235, 0) 0px, rgba(37, 99, 235, 0) 10px, rgba(37, 99, 235, 0.3) 10px, rgba(37, 99, 235, 0.3) 18px ); border-radius: 9999px; filter: drop-shadow(0 0 10px rgba(37, 99, 235, 0.18)); } @keyframes cyber-float { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -12px, 0); } } @keyframes cyber-rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes cyber-flicker { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } @keyframes cyber-scan { 0%, 100% { transform: translateX(-100%); opacity: 0; } 10%, 90% { opacity: 1; } 50% { transform: translateX(200%); } } /* ── sAIfy Chat Widget ───────────────────────────────────────── */ #sAIfy-widget { position: fixed; bottom: 20px; right: 20px; width: 380px; height: 500px; max-height: 80vh; background: #ffffff; border-radius: 16px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3); display: none; flex-direction: column; z-index: 9999; overflow: hidden; font-family: "Inter", sans-serif; border: 1px solid #e5e7eb; animation: slideUp 0.3s ease-out; } @keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .chat-header { background: linear-gradient(135deg, #0b1124 0%, #151b33 100%); color: white; padding: 16px; display: flex; align-items: center; justify-content: space-between; border-bottom: 2px solid #03ff9e; } .chat-body { flex: 1; padding: 16px; overflow-y: auto; background: #f9fafb; display: flex; flex-direction: column; gap: 12px; } .chat-footer { padding: 12px; background: white; border-top: 1px solid #f3f4f6; display: flex; gap: 8px; } .msg-bubble { max-width: 85%; padding: 10px 14px; border-radius: 12px; font-size: 0.9rem; line-height: 1.4; animation: fadeInMsg 0.3s ease; } @keyframes fadeInMsg { from { opacity: 0; } to { opacity: 1; } } .msg-bot { background: white; color: #374151; border: 1px solid #e5e7eb; align-self: flex-start; border-bottom-left-radius: 2px; } .msg-user { background: #03ff9e; color: #064e3b; align-self: flex-end; border-bottom-right-radius: 2px; font-weight: 500; } .chat-trigger { position: fixed; bottom: 20px; right: 20px; width: 60px; height: 60px; background: #03ff9e; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(3, 255, 158, 0.4); cursor: pointer; z-index: 9998; transition: transform 0.2s; } .chat-trigger:hover { transform: scale(1.05); } /* risk-quantification/document-head.njk */ body { font-family: "Inter", sans-serif; } .no-scrollbar::-webkit-scrollbar { display: none; } .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; } /* ── Animaciones WOW ─────────────────────────────────────────── */ .wow { opacity: 0; transform: translateY(40px) scale(0.98); transition: opacity 0.9s cubic-bezier(0.4, 0, 0.2, 1), transform 0.9s cubic-bezier(0.4, 0, 0.2, 1); } .wow.visible { opacity: 1; transform: translateY(0) scale(1); } .wow-title { opacity: 0; transform: translateY(30px) scale(0.97); transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1), transform 1s cubic-bezier(0.4, 0, 0.2, 1); } .wow-title.visible { opacity: 1; transform: translateY(0) scale(1); } .wow-card { opacity: 0; transform: scale(0.95) translateY(30px); transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 0.8s cubic-bezier(0.4, 0, 0.2, 1); } .wow-card.visible { opacity: 1; transform: scale(1) translateY(0); } /* ── Dashboard animations ────────────────────────────────────── */ @keyframes rq-bar-grow { from { width: 0% } to { width: var(--rq-target-w) } } @keyframes rq-counter-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .rq-bar-animated { width: 0%; animation: none; } .rq-bar-animated.run { animation: rq-bar-grow 1.2s cubic-bezier(0.4,0,0.2,1) forwards; } .rq-kpi-val { opacity: 0; transform: translateY(6px); transition: opacity 0.5s ease, transform 0.5s ease; } .rq-kpi-val.run { opacity: 1; transform: translateY(0); } /* ── Efecto Glass ────────────────────────────────────────────── */ .glass-panel { background: rgba(21, 27, 51, 0.7); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.05); } /* ══════════════════════════════════════════════════════════════ HERO — Variables, gradiente animado, parallax, cyber layer ══════════════════════════════════════════════════════════════ */ :root { --hero-blue: 37 99 235; --hero-indigo: 99 102 241; --hero-neon: 3 255 158; --hero-bg1: 11 17 36; --hero-bg2: 13 27 70; } /* Navbar: se vuelve sólido al hacer scroll */ #navbar.scrolled { background: rgba(11, 17, 36, 0.92) !important; backdrop-filter: blur(14px); border-bottom: 1px solid rgba(3, 255, 158, 0.1); } @keyframes hero-gradient-shift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @keyframes hero-gradient-drift { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(-6%, 3%, 0) scale(1.08); } 100% { transform: translate3d(0, 0, 0) scale(1); } } .hero-animated-gradient { background-image: radial-gradient( 60% 60% at 20% 30%, rgb(var(--hero-blue) / 0.4) 0%, rgb(var(--hero-blue) / 0) 60% ), radial-gradient( 55% 55% at 80% 25%, rgb(var(--hero-indigo) / 0.28) 0%, rgb(var(--hero-indigo) / 0) 60% ), radial-gradient( 60% 60% at 70% 80%, rgb(var(--hero-neon) / 0.14) 0%, rgb(var(--hero-neon) / 0) 60% ), linear-gradient( 120deg, rgb(var(--hero-bg1) / 0.9) 0%, rgb(var(--hero-bg2) / 0.7) 35%, rgb(var(--hero-blue) / 0.55) 70%, rgb(var(--hero-bg1) / 0.92) 100% ); background-size: 260% 260%; animation: hero-gradient-shift 10s ease-in-out infinite, hero-gradient-drift 12s ease-in-out infinite; filter: saturate(1.15) contrast(1.05); will-change: transform, background-position; } .hero-parallax-layer { transform: translate3d( 0, calc(var(--hero-parallax, 0) * -48px), 0 ) scale(calc(1 + var(--hero-parallax, 0) * 0.05)); transform-origin: 50% 40%; will-change: transform; } .hero-scroll-vignette { pointer-events: none; opacity: calc(0.25 + var(--hero-parallax, 0) * 0.45); background: radial-gradient( ellipse 85% 70% at 50% 35%, transparent 0%, rgb(0 0 0 / 0.55) 100% ); transition: opacity 120ms ease-out; } .hero-scroll-progress { position: absolute; bottom: 0; left: 0; right: 0; height: 3px; z-index: 15; background: rgb(255 255 255 / 0.06); } .hero-scroll-progress__bar { height: 100%; width: 0%; background: linear-gradient( 90deg, rgb(var(--hero-neon) / 0.35), rgb(var(--hero-blue) / 0.9) ); box-shadow: 0 0 14px rgb(var(--hero-neon) / 0.35); transition: width 80ms linear; } /* ── Cyber shapes ────────────────────────────────────────────── */ .hero-cyber-layer { pointer-events: none; mix-blend-mode: screen; opacity: 0.8; filter: saturate(1.2) contrast(1.08); } .cyber-grid { background-image: linear-gradient( to right, rgba(37, 99, 235, 0.16) 1px, transparent 1px ), linear-gradient( to bottom, rgba(37, 99, 235, 0.14) 1px, transparent 1px ); background-size: 56px 56px; mask-image: radial-gradient( circle at 50% 35%, black 0%, black 50%, transparent 72% ); opacity: 0.36; } .cyber-scanline { background: linear-gradient( 90deg, transparent 0%, rgba(3, 255, 158, 0.26) 50%, transparent 100% ); filter: blur(0.4px); animation: cyber-scan 2.4s ease-in-out infinite; } .cyber-shape { position: absolute; border-radius: 9999px; animation: cyber-float 8.5s ease-in-out infinite; will-change: transform, opacity; } .cyber-hex { width: 86px; height: 86px; border: 1px solid rgba(37, 99, 235, 0.34); box-shadow: 0 0 28px rgba(37, 99, 235, 0.18); clip-path: polygon( 25% 6%, 75% 6%, 100% 50%, 75% 94%, 25% 94%, 0% 50% ); background: radial-gradient( circle at 30% 30%, rgba(37, 99, 235, 0.16), transparent 60% ); animation: cyber-rotate 26s linear infinite; } .cyber-node { width: 10px; height: 10px; background: rgba(3, 255, 158, 0.36); box-shadow: 0 0 24px rgba(3, 255, 158, 0.28); animation: cyber-flicker 2.8s ease-in-out infinite; } .cyber-line { width: 160px; height: 2px; background: linear-gradient( 90deg, transparent 0%, rgba(37, 99, 235, 0.34) 40%, rgba(3, 255, 158, 0.22) 60%, transparent 100% ); border-radius: 9999px; filter: blur(0.2px); } .cyber-diag { width: 220px; height: 2px; background: linear-gradient( 90deg, transparent 0%, rgba(99, 102, 241, 0.32) 40%, rgba(37, 99, 235, 0.24) 60%, transparent 100% ); transform: rotate(-22deg); border-radius: 9999px; } .cyber-dashed { width: 240px; height: 2px; background: repeating-linear-gradient( 90deg, rgba(37, 99, 235, 0) 0px, rgba(37, 99, 235, 0) 10px, rgba(37, 99, 235, 0.3) 10px, rgba(37, 99, 235, 0.3) 18px ); border-radius: 9999px; filter: drop-shadow(0 0 10px rgba(37, 99, 235, 0.18)); } @keyframes cyber-float { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -12px, 0); } } @keyframes cyber-rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes cyber-flicker { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } @keyframes cyber-scan { 0%, 100% { transform: translateX(-100%); opacity: 0; } 10%, 90% { opacity: 1; } 50% { transform: translateX(200%); } } /* ── sAIfy Chat Widget ───────────────────────────────────────── */ #sAIfy-widget { position: fixed; bottom: 20px; right: 20px; width: 380px; height: 500px; max-height: 80vh; background: #ffffff; border-radius: 16px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3); display: none; flex-direction: column; z-index: 9999; overflow: hidden; font-family: "Inter", sans-serif; border: 1px solid #e5e7eb; animation: slideUp 0.3s ease-out; } @keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .chat-header { background: linear-gradient(135deg, #0b1124 0%, #151b33 100%); color: white; padding: 16px; display: flex; align-items: center; justify-content: space-between; border-bottom: 2px solid #03ff9e; } .chat-body { flex: 1; padding: 16px; overflow-y: auto; background: #f9fafb; display: flex; flex-direction: column; gap: 12px; } .chat-footer { padding: 12px; background: white; border-top: 1px solid #f3f4f6; display: flex; gap: 8px; } .msg-bubble { max-width: 85%; padding: 10px 14px; border-radius: 12px; font-size: 0.9rem; line-height: 1.4; animation: fadeIn 0.3s ease; } .msg-bot { background: white; color: #374151; border: 1px solid #e5e7eb; align-self: flex-start; border-bottom-left-radius: 2px; } .msg-user { background: #03ff9e; color: #064e3b; align-self: flex-end; border-bottom-right-radius: 2px; font-weight: 500; } .chat-trigger { position: fixed; bottom: 20px; right: 20px; width: 60px; height: 60px; background: #03ff9e; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(3, 255, 158, 0.4); cursor: pointer; z-index: 9998; transition: transform 0.2s; } .chat-trigger:hover { transform: scale(1.05); } /* strategy-governance/document-head.njk */ body { font-family: "Inter", sans-serif; } .no-scrollbar::-webkit-scrollbar { display: none; } .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; } /* Stepper dinámico */ .stepper-dinamico .step { transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1), background 0.5s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.5s cubic-bezier(0.4, 0, 0.2, 1); z-index: 1; cursor: pointer; } .stepper-dinamico .step .step-title, .stepper-dinamico .step .step-desc { transition: font-size 0.5s, opacity 0.5s, max-height 0.5s; } .stepper-dinamico .step .step-circle { transition: background 0.5s, color 0.5s, transform 0.5s; } .stepper-dinamico .step.activo { transform: scale(1.12); background: #0b1124; box-shadow: inset 0 0 0 9999px rgba(3, 255, 158, 0.08), 0 8px 32px 0 rgba(3, 255, 158, 0.15); border-color: #03ff9e; z-index: 2; } .stepper-dinamico .step.activo .step-circle { background: #03ff9e; color: #0b1124; transform: scale(1.18); } .stepper-dinamico .step.activo .step-title { font-size: 1.25rem; opacity: 1; letter-spacing: 0.01em; } .stepper-dinamico .step:not(.activo) .step-title { opacity: 0.7; } .stepper-dinamico .step .step-desc { max-height: 0; opacity: 0; overflow: hidden; } .stepper-dinamico .step.activo .step-desc { max-height: 100px; opacity: 1; margin-top: 0.5rem; } .stepper-dinamico .step .step-cta { display: inline-block; opacity: 0; transform: translateY(10px) scale(0.98); pointer-events: none; transition: opacity 0.4s, transform 0.4s; } .stepper-dinamico .step:hover .step-cta { display: inline-block; opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; } /* Animaciones WOW */ .wow { opacity: 0; transform: translateY(40px) scale(0.98); transition: opacity 0.9s cubic-bezier(0.4, 0, 0.2, 1), transform 0.9s cubic-bezier(0.4, 0, 0.2, 1); } .wow.visible { opacity: 1; transform: translateY(0) scale(1); } /* Animación para títulos */ .wow-title { opacity: 0; transform: translateY(30px) scale(0.97); transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1), transform 1s cubic-bezier(0.4, 0, 0.2, 1); } .wow-title.visible { opacity: 1; transform: translateY(0) scale(1); } /* Animación para tarjetas */ .wow-card { opacity: 0; transform: scale(0.95) translateY(30px); transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 0.8s cubic-bezier(0.4, 0, 0.2, 1); } .wow-card.visible { opacity: 1; transform: scale(1) translateY(0); } /* Efecto Glass */ .glass-panel { background: rgba(21, 27, 51, 0.7); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.05); } /* ============================================================ HERO — Variables, gradiente animado, parallax, cyber layer ============================================================ */ :root { --hero-blue: 37 99 235; --hero-indigo: 99 102 241; --hero-neon: 3 255 158; --hero-bg1: 11 17 36; --hero-bg2: 13 27 70; } /* Navbar: se vuelve sólido al hacer scroll */ #navbar.scrolled { background: rgba(11, 17, 36, 0.92) !important; backdrop-filter: blur(14px); border-bottom: 1px solid rgba(3, 255, 158, 0.1); } @keyframes hero-gradient-shift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @keyframes hero-gradient-drift { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(-6%, 3%, 0) scale(1.08); } 100% { transform: translate3d(0, 0, 0) scale(1); } } .hero-animated-gradient { background-image: radial-gradient( 60% 60% at 20% 30%, rgb(var(--hero-blue) / 0.4) 0%, rgb(var(--hero-blue) / 0) 60% ), radial-gradient( 55% 55% at 80% 25%, rgb(var(--hero-indigo) / 0.28) 0%, rgb(var(--hero-indigo) / 0) 60% ), radial-gradient( 60% 60% at 70% 80%, rgb(var(--hero-neon) / 0.14) 0%, rgb(var(--hero-neon) / 0) 60% ), linear-gradient( 120deg, rgb(var(--hero-bg1) / 0.9) 0%, rgb(var(--hero-bg2) / 0.7) 35%, rgb(var(--hero-blue) / 0.55) 70%, rgb(var(--hero-bg1) / 0.92) 100% ); background-size: 260% 260%; animation: hero-gradient-shift 10s ease-in-out infinite, hero-gradient-drift 12s ease-in-out infinite; filter: saturate(1.15) contrast(1.05); will-change: transform, background-position; } .hero-parallax-layer { transform: translate3d( 0, calc(var(--hero-parallax, 0) * -48px), 0 ) scale(calc(1 + var(--hero-parallax, 0) * 0.05)); transform-origin: 50% 40%; will-change: transform; } .hero-scroll-vignette { pointer-events: none; opacity: calc(0.25 + var(--hero-parallax, 0) * 0.45); background: radial-gradient( ellipse 85% 70% at 50% 35%, transparent 0%, rgb(0 0 0 / 0.55) 100% ); transition: opacity 120ms ease-out; } .hero-scroll-progress { position: absolute; bottom: 0; left: 0; right: 0; height: 3px; z-index: 15; background: rgb(255 255 255 / 0.06); } .hero-scroll-progress__bar { height: 100%; width: 0%; background: linear-gradient( 90deg, rgb(var(--hero-neon) / 0.35), rgb(var(--hero-blue) / 0.9) ); box-shadow: 0 0 14px rgb(var(--hero-neon) / 0.35); transition: width 80ms linear; } /* Cyber shapes */ .hero-cyber-layer { pointer-events: none; mix-blend-mode: screen; opacity: 0.8; filter: saturate(1.2) contrast(1.08); } .cyber-grid { background-image: linear-gradient( to right, rgba(37, 99, 235, 0.16) 1px, transparent 1px ), linear-gradient( to bottom, rgba(37, 99, 235, 0.14) 1px, transparent 1px ); background-size: 56px 56px; mask-image: radial-gradient( circle at 50% 35%, black 0%, black 50%, transparent 72% ); opacity: 0.36; } .cyber-scanline { background: linear-gradient( 90deg, transparent 0%, rgba(3, 255, 158, 0.26) 50%, transparent 100% ); filter: blur(0.4px); animation: cyber-scan 2.4s ease-in-out infinite; } .cyber-shape { position: absolute; border-radius: 9999px; animation: cyber-float 8.5s ease-in-out infinite; will-change: transform, opacity; } .cyber-hex { width: 86px; height: 86px; border: 1px solid rgba(37, 99, 235, 0.34); box-shadow: 0 0 28px rgba(37, 99, 235, 0.18); clip-path: polygon( 25% 6%, 75% 6%, 100% 50%, 75% 94%, 25% 94%, 0% 50% ); background: radial-gradient( circle at 30% 30%, rgba(37, 99, 235, 0.16), transparent 60% ); animation: cyber-rotate 26s linear infinite; } .cyber-node { width: 10px; height: 10px; background: rgba(3, 255, 158, 0.36); box-shadow: 0 0 24px rgba(3, 255, 158, 0.28); animation: cyber-flicker 2.8s ease-in-out infinite; } .cyber-line { width: 160px; height: 2px; background: linear-gradient( 90deg, transparent 0%, rgba(37, 99, 235, 0.34) 40%, rgba(3, 255, 158, 0.22) 60%, transparent 100% ); border-radius: 9999px; filter: blur(0.2px); } .cyber-diag { width: 220px; height: 2px; background: linear-gradient( 90deg, transparent 0%, rgba(99, 102, 241, 0.32) 40%, rgba(37, 99, 235, 0.24) 60%, transparent 100% ); transform: rotate(-22deg); border-radius: 9999px; } .cyber-dashed { width: 240px; height: 2px; background: repeating-linear-gradient( 90deg, rgba(37, 99, 235, 0) 0px, rgba(37, 99, 235, 0) 10px, rgba(37, 99, 235, 0.3) 10px, rgba(37, 99, 235, 0.3) 18px ); border-radius: 9999px; filter: drop-shadow(0 0 10px rgba(37, 99, 235, 0.18)); } @keyframes cyber-float { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -12px, 0); } } @keyframes cyber-rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes cyber-flicker { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } @keyframes cyber-scan { 0%, 100% { transform: translateX(-100%); opacity: 0; } 10%, 90% { opacity: 1; } 50% { transform: translateX(200%); } } @keyframes cyber-drift-x { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(20px); } } /* ============================================================ PLANES DE SERVICIO — mirrors .svc-card carousel behavior ============================================================ */ .plans-cards { transition: opacity 1000ms cubic-bezier(0.22, 1, 0.36, 1), filter 900ms cubic-bezier(0.22, 1, 0.36, 1), transform 900ms cubic-bezier(0.22, 1, 0.36, 1); will-change: opacity, transform, filter; } .plan-card { opacity: 0.35; transition: opacity 1.1s cubic-bezier(0.22, 1, 0.36, 1); } .plan-card.active { opacity: 1; z-index: 1; } .plan-card .plan-cta { opacity: 0; transform: translate3d(0, 10px, 0); filter: blur(6px); pointer-events: none; transition: opacity 260ms cubic-bezier(0.16, 1, 0.3, 1), transform 360ms cubic-bezier(0.16, 1, 0.3, 1), filter 360ms cubic-bezier(0.16, 1, 0.3, 1); will-change: opacity, transform, filter; } .plan-card.active .plan-cta { opacity: 1; filter: none; pointer-events: auto; } .plan-card.active:hover .plan-cta { transform: translate3d(0, -2px, 0) scale(1.03); } .plan-card.active:hover .plan-cta i { transform: translateX(4px); transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1); } #planes.planes-active .plans-cards { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: blur(0px); } #planes.planes-active .plan-card { animation: plan-float 6.5s ease-in-out infinite; } #planes.planes-active .plan-card:nth-child(2) { animation-delay: -2.2s; } #planes.planes-active .plan-card:nth-child(3) { animation-delay: -4.4s; } @keyframes plan-float { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -6px, 0); } } /* ============================================================ TECNOLOGÍA — screenshot switcher dots ============================================================ */ .tech-dot { background: rgba(21,27,51,0.2); border-color: rgba(255,255,255,0.08); color: #64748b; } .tech-dot-active { background: rgba(3,255,158,0.08) !important; border-color: rgba(3,255,158,0.35) !important; color: #03FF9E !important; } /* ============================================================ SOLUCIONES — selector + panel ============================================================ */ .sol-btn { background: rgba(21,27,51,0.2); border-color: rgba(255,255,255,0.05); } .sol-btn:hover { background: rgba(21,27,51,0.4); border-color: rgba(255,255,255,0.10); } .sol-btn-active { background: rgba(3,255,158,0.06) !important; border-color: rgba(3,255,158,0.30) !important; } .sol-btn-active .sol-arrow { color: #03FF9E; } .sol-btn-active .text-white { color: #ffffff; } /* ============================================================ SERVICIOS ADICIONALES — sidebar interaction ============================================================ */ .addon-item { transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1); } .addon-item.is-active { background: rgba(3, 255, 158, 0.06); border-color: rgba(3, 255, 158, 0.3); } .addon-item.is-active .addon-label { color: white; } .addon-item .addon-arrow { opacity: 0; transform: translateX(-6px); transition: opacity 0.25s, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1); } .addon-item.is-active .addon-arrow { opacity: 1; transform: translateX(0); } #addon-detail-content { transition: opacity 0.18s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); } #addon-detail-content.fade-out { opacity: 0; transform: translateY(8px); } /* ============================================================ COMPARATIVA — column hover interactions ============================================================ */ .comp-safeu-cell { background: rgba(3, 255, 158, 0.04); border-left: 1px solid rgba(3, 255, 158, 0.15); border-right: 1px solid rgba(3, 255, 158, 0.15); transition: background 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s, box-shadow 0.3s; } .comp-safeu-cell.col-hovered { background: rgba(3, 255, 158, 0.1); border-left-color: rgba(3, 255, 158, 0.5); border-right-color: rgba(3, 255, 158, 0.5); box-shadow: inset 0 0 40px -5px rgba(3, 255, 158, 0.08); } .comp-safeu-cell.col-boosted { background: rgba(3, 255, 158, 0.07); border-color: rgba(3, 255, 158, 0.3); } .comp-ciso-cell { transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s; } .comp-ciso-cell.col-hovered { background: rgba(255, 255, 255, 0.02); } .comp-ciso-cell.col-dimmed { opacity: 0.22; } /* ESTILOS DEL CHAT FLOTANTE (sAIfy) */ #sAIfy-widget { position: fixed; bottom: 20px; right: 20px; width: 380px; height: 500px; max-height: 80vh; background: #ffffff; border-radius: 16px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3); display: none; /* Oculto por defecto */ flex-direction: column; z-index: 9999; overflow: hidden; font-family: "Inter", sans-serif; border: 1px solid #e5e7eb; animation: slideUp 0.3s ease-out; } @keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .chat-header { background: linear-gradient(135deg, #0b1124 0%, #151b33 100%); color: white; padding: 16px; display: flex; align-items: center; justify-content: space-between; border-bottom: 2px solid #03ff9e; } .chat-body { flex: 1; padding: 16px; overflow-y: auto; background: #f9fafb; display: flex; flex-direction: column; gap: 12px; } .chat-footer { padding: 12px; background: white; border-top: 1px solid #f3f4f6; display: flex; gap: 8px; } .msg-bubble { max-width: 85%; padding: 10px 14px; border-radius: 12px; font-size: 0.9rem; line-height: 1.4; animation: fadeIn 0.3s ease; } .msg-bot { background: white; color: #374151; border: 1px solid #e5e7eb; align-self: flex-start; border-bottom-left-radius: 2px; } .msg-user { background: #03ff9e; color: #064e3b; align-self: flex-end; border-bottom-right-radius: 2px; font-weight: 500; } .chat-trigger { position: fixed; bottom: 20px; right: 20px; width: 60px; height: 60px; background: #03ff9e; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(3, 255, 158, 0.4); cursor: pointer; z-index: 9998; transition: transform 0.2s; } .chat-trigger:hover { transform: scale(1.05); } /* vciso/document-head.njk */ body { font-family: Inter, sans-serif; } #navbar.scrolled { background: rgba(11,17,36,.92)!important; backdrop-filter: blur(14px); border-bottom: 1px solid rgba(3,255,158,.1); } .glass-panel { background: rgba(21,27,51,.72); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.05); } .cyber-grid { background-image: linear-gradient(to right,rgba(37,99,235,.1) 1px,transparent 1px),linear-gradient(to bottom,rgba(37,99,235,.08) 1px,transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(ellipse 80% 60% at 50% 0%,black 0%,transparent 75%); opacity: .35; } .grad-border { position: relative; background: linear-gradient(#151B33,#151B33) padding-box, linear-gradient(135deg, rgba(3,255,158,0.35), rgba(37,99,235,0.25) 45%, rgba(255,255,255,0.04) 80%) border-box; border: 1px solid transparent; } .grad-border-soft { position: relative; background: linear-gradient(#151B33,#151B33) padding-box, linear-gradient(135deg, rgba(255,255,255,0.12), rgba(255,255,255,0.02)) border-box; border: 1px solid transparent; } .btn-neon { position: relative; background: #03FF9E; color: #0B1124; box-shadow: 0 0 0 0 rgba(3,255,158,0); transition: box-shadow 0.35s ease, transform 0.2s ease, background 0.2s; } .btn-neon:hover { background: #02d483; box-shadow: 0 18px 50px -18px rgba(3,255,158,0.6); transform: translateY(-1px); } .wow { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); } .wow.visible { opacity: 1; transform: translateY(0); } .video-frame { position: relative; width: 100%; padding-top: 56.25%; border-radius: 1rem; overflow: hidden; } .video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }