.vibe-trust {
--primary: #ea4d96;
--secondary: #872A89;
--purple: #40016E;
--cool-purple: #C6B4EC;
--cool-aqua: #5DD8CB;
--white: #FFFFFF;
position: relative;
overflow: hidden;
padding: 8rem 0;
isolation: isolate;
}
.vibe-trust__bg {
position: absolute;
inset: 0;
z-index: 0;
background: linear-gradient(155deg, #0d0816 0%, #200838 35%, #3a0d58 65%, #1a0530 100%);
}
.vibe-trust__canvas {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
width: 100%;
height: 100%;
display: block;
}
.vibe-trust__inner {
position: relative;
z-index: 2;
}
.vibe-trust__top {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 2rem;
margin-bottom: 3rem;
}
.vibe-trust__eyebrow {
margin: 0;
font-size: 1.4rem;
font-weight: 600;
letter-spacing: 0.35rem;
text-transform: uppercase;
color: var(--cool-purple);
}
.vibe-trust__pill {
display: inline-flex;
align-items: center;
padding: 1rem 2.4rem;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.18);
background: rgba(255, 255, 255, 0.06);
backdrop-filter: blur(6px);
color: var(--white);
font-size: 1.3rem;
font-weight: 700;
letter-spacing: 0.1rem;
text-transform: uppercase;
text-decoration: none;
white-space: nowrap;
transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.vibe-trust__pill:hover {
background: rgba(255, 255, 255, 0.12);
border-color: rgba(255, 255, 255, 0.32);
transform: translateY(-1px);
color: var(--white);
}
.vibe-trust__title {
margin: 0 0 2.4rem;
color: var(--white);
font-weight: 800;
font-size: 4rem;
line-height: 1.1;
letter-spacing: -0.02rem;
max-width: 42rem;
}
.vibe-trust__body {
margin: 0;
max-width: 60rem;
font-size: 2rem;
line-height: 1.5;
color: rgba(255, 255, 255, 0.72);
}
.vibe-trust__line {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
gap: 4rem;
margin-top: 8rem;
}
.vibe-trust__line-track {
position: absolute;
left: 0;
right: 0;
top: 50%;
height: 2px;
transform: translateY(-50%);
background: linear-gradient(90deg,
rgba(234, 77, 150, 0) 0%,
rgba(234, 77, 150, 0.9) 50%,
rgba(234, 77, 150, 0) 100%);
box-shadow: 0 0 24px 2px rgba(234, 77, 150, 0.55);
z-index: 0;
animation: vibe-trust-line-pulse 3.2s ease-in-out infinite;
}
@keyframes vibe-trust-line-pulse {
0%, 100% {
box-shadow: 0 0 14px 1px rgba(234, 77, 150, 0.4);
opacity: 0.85;
}
50% {
box-shadow: 0 0 32px 3px rgba(234, 77, 150, 0.85);
opacity: 1;
}
}
.vibe-trust__badge {
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
}
.vibe-trust__cert-img {
display: block;
height: 6.4rem;
width: auto;
max-width: 14rem;
object-fit: contain;
}
.vibe-trust__badge--shield {
flex-direction: column;
}
.vibe-trust__lock {
display: block;
height: 11rem;
width: auto;
max-width: 11rem;
object-fit: contain;
filter: drop-shadow(0 0 18px rgba(234, 77, 150, 0.5))
drop-shadow(0 0 34px rgba(93, 216, 203, 0.22));
position: relative;
z-index: 1;
}
.vibe-trust__lock-reflection {
display: block;
height: 5rem;
width: auto;
max-width: 11rem;
object-fit: contain;
object-position: top;
transform: scaleY(-1);
margin-top: -0.4rem;
opacity: 0.28;
-webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), transparent 80%);
mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), transparent 80%);
pointer-events: none;
}
@media (max-width: 767px) {
.vibe-trust {
padding: 6rem 0;
}
.vibe-trust__title {
font-size: 3.6rem;
}
.vibe-trust__body {
font-size: 1.8rem;
}
.vibe-trust__line {
flex-direction: column;
gap: 3.6rem;
margin-top: 6rem;
}
.vibe-trust__line-track {
display: none;
}
.vibe-trust__lock {
height: 9rem;
max-width: 9rem;
}
.vibe-trust__lock-reflection {
height: 4rem;
}
}
@media (prefers-reduced-motion: reduce) {
.vibe-trust__line-track {
animation: none;
}
}
document.addEventListener('DOMContentLoaded', () => {
document.querySelectorAll('.vibe-trust').forEach((root) => {
const canvas = root.querySelector('[data-vibe-trust-canvas]');
if (!canvas) return;
const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
const ctx = canvas.getContext('2d');
const colors = ['#872A89', '#C6B4EC', '#EA4D96', '#40016E', '#5DD8CB'];
let particles = [];
let width = 0;
let height = 0;
let rafId = null;
function resize() {
width = root.clientWidth;
height = root.clientHeight;
canvas.width = width * window.devicePixelRatio;
canvas.height = height * window.devicePixelRatio;
canvas.style.width = width + 'px';
canvas.style.height = height + 'px';
ctx.setTransform(window.devicePixelRatio, 0, 0, window.devicePixelRatio, 0, 0);
}
function makeParticles() {
particles = Array.from({ length: 80 }, () => ({
x: Math.random() * width,
y: Math.random() * height,
vx: (Math.random() - 0.5) * 0.25,
vy: (Math.random() - 0.5) * 0.25,
r: Math.random() * 1.6 + 0.6,
p: Math.random() * Math.PI * 2,
color: colors[Math.floor(Math.random() * colors.length)],
}));
}
function step() {
ctx.clearRect(0, 0, width, height);
particles.forEach((particle) => {
particle.x += particle.vx;
particle.y += particle.vy;
particle.p += 0.018;
if (particle.x width) particle.vx *= -1;
if (particle.y height) particle.vy *= -1;
const alpha = 0.7 + 0.3 * Math.sin(particle.p);
ctx.beginPath();
ctx.arc(particle.x, particle.y, particle.r, 0, Math.PI * 2);
ctx.fillStyle = particle.color;
ctx.globalAlpha = alpha * 0.8;
ctx.fill();
});
ctx.globalAlpha = 1;
for (let i = 0; i < particles.length; i++) {
for (let j = i + 1; j < particles.length; j++) {
const a = particles[i];
const b = particles[j];
const dx = a.x - b.x;
const dy = a.y - b.y;
const dist = Math.sqrt(dx * dx + dy * dy);
if (dist {
clearTimeout(resizeTimeout);
resizeTimeout = setTimeout(() => {
resize();
makeParticles();
}, 200);
});
});
});
Seguridad
Centro de confianzaUna infraestructura en la que puedes confiar
Nuestro SOC funciona las 24 horas del día, proporcionando supervisión continua, detección de amenazas, y respuesta ante incidentes. Este enfoque proactivo garantiza que las posibles amenazas a la seguridad se identifiquen y mitiguen en tiempo real, minimizando los riesgos y manteniendo la integridad de los datos de nuestros clientes.
