rf-v4.9-desafios+soluciones
@@ -0,0 +1,295 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="es">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Animación Nodos Infinito - Pulsos Aleatorios</title>
|
||||||
|
<style>
|
||||||
|
/* Estilos generales solo para visualizar en este ejemplo */
|
||||||
|
body {
|
||||||
|
background-color: #0f172a;
|
||||||
|
margin: 0;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
min-height: 100vh;
|
||||||
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mi-seccion-web {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
padding: 4rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.animacion-infinito {
|
||||||
|
width: 50%;
|
||||||
|
min-width: 300px;
|
||||||
|
max-width: 1000px;
|
||||||
|
aspect-ratio: 2 / 1;
|
||||||
|
position: relative;
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.capa-svg-lineas {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.capa-html-nodos {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
z-index: 2;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Estilos de los Nodos */
|
||||||
|
.nodo-circulo {
|
||||||
|
position: absolute;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
pointer-events: auto;
|
||||||
|
transition: filter 0.3s ease;
|
||||||
|
overflow: hidden;
|
||||||
|
border: 2px solid rgba(255, 255, 255, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nodo-circulo:hover {
|
||||||
|
filter: brightness(1.2);
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nodo-contenido {
|
||||||
|
color: white;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: clamp(0.6rem, 1.5vw, 1.2rem);
|
||||||
|
text-align: center;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nodo-contenido img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Estilos de las líneas base SVG */
|
||||||
|
.linea-base {
|
||||||
|
fill: none;
|
||||||
|
stroke-width: 1.5;
|
||||||
|
opacity: 0.35; /* Un poco más tenues para resaltar la luz */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* NUEVO: Estilo Brillante (Leve) para los datos */
|
||||||
|
.linea-pulso {
|
||||||
|
fill: none;
|
||||||
|
stroke: #ffffff;
|
||||||
|
stroke-width: 2.5;
|
||||||
|
stroke-linecap: round;
|
||||||
|
stroke-dasharray: 18 250; /* Pulso de luz corto, separación larga */
|
||||||
|
/* Efecto glow con doble sombra: un núcleo brillante y un halo difuso */
|
||||||
|
filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 8px rgba(135, 206, 250, 0.7));
|
||||||
|
opacity: 0.9;
|
||||||
|
mix-blend-mode: screen; /* Fusión luminosa con el fondo */
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<section class="mi-seccion-web">
|
||||||
|
<div class="animacion-infinito">
|
||||||
|
<svg class="capa-svg-lineas" viewBox="0 0 1000 500" preserveAspectRatio="xMidYMid meet">
|
||||||
|
<defs id="svg-defs"></defs>
|
||||||
|
<g id="grupo-lineas"></g>
|
||||||
|
</svg>
|
||||||
|
<div class="capa-html-nodos" id="grupo-nodos"></div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const nodosData = [
|
||||||
|
{ id: 'tl', x0: 200, y0: 125, r: 50, color: '#16a085', html: '<span>LOGO A</span>' },
|
||||||
|
{ id: 'bl', x0: 200, y0: 375, r: 50, color: '#2980b9', html: '<span>LOGO B</span>' },
|
||||||
|
{ id: 'tr', x0: 800, y0: 125, r: 50, color: '#c0392b', html: '<span>LOGO C</span>' },
|
||||||
|
{ id: 'br', x0: 800, y0: 375, r: 50, color: '#f39c12', html: '<span>LOGO D</span>' },
|
||||||
|
{ id: 'c', x0: 500, y0: 250, r: 65, color: '#000000', html: '<span>NÚCLEO</span>'}
|
||||||
|
];
|
||||||
|
|
||||||
|
const conexiones = [
|
||||||
|
{ id: 'arcL', from: 'tl', to: 'bl', type: 'vertical', curveOut: -120 },
|
||||||
|
{ id: 'c1', from: 'tl', to: 'c', type: 'horizontal', curveOut: 0 },
|
||||||
|
{ id: 'c2', from: 'bl', to: 'c', type: 'horizontal', curveOut: 0 },
|
||||||
|
{ id: 'arcR', from: 'tr', to: 'br', type: 'vertical', curveOut: 120 },
|
||||||
|
{ id: 'c3', from: 'tr', to: 'c', type: 'horizontal', curveOut: 0 },
|
||||||
|
{ id: 'c4', from: 'br', to: 'c', type: 'horizontal', curveOut: 0 }
|
||||||
|
];
|
||||||
|
|
||||||
|
const contenedorNodos = document.getElementById('grupo-nodos');
|
||||||
|
const grupoLineas = document.getElementById('grupo-lineas');
|
||||||
|
const svgDefs = document.getElementById('svg-defs');
|
||||||
|
const nodosMap = {};
|
||||||
|
|
||||||
|
// 1. Crear Nodos HTML
|
||||||
|
nodosData.forEach(nodo => {
|
||||||
|
nodosMap[nodo.id] = nodo;
|
||||||
|
nodo.floatOffset = Math.random() * 10;
|
||||||
|
|
||||||
|
const el = document.createElement('div');
|
||||||
|
el.className = 'nodo-circulo';
|
||||||
|
el.id = `node-${nodo.id}`;
|
||||||
|
el.style.backgroundColor = nodo.color;
|
||||||
|
el.style.width = `${(nodo.r * 2 / 1000) * 100}%`;
|
||||||
|
el.style.height = `${(nodo.r * 2 / 500) * 100}%`;
|
||||||
|
|
||||||
|
const content = document.createElement('div');
|
||||||
|
content.className = 'nodo-contenido';
|
||||||
|
content.innerHTML = nodo.html;
|
||||||
|
|
||||||
|
el.appendChild(content);
|
||||||
|
contenedorNodos.appendChild(el);
|
||||||
|
nodo.el = el;
|
||||||
|
});
|
||||||
|
|
||||||
|
// 2. Crear Líneas y Gradientes
|
||||||
|
const offsetsLineas = [-12, -6, 0, 6, 12]; // Distancias de las 5 líneas paralelas
|
||||||
|
|
||||||
|
conexiones.forEach(conn => {
|
||||||
|
const n1 = nodosMap[conn.from];
|
||||||
|
const n2 = nodosMap[conn.to];
|
||||||
|
const gradId = `grad-${conn.from}-${conn.to}`;
|
||||||
|
|
||||||
|
// Gradiente
|
||||||
|
const esHorizontal = conn.type === 'horizontal';
|
||||||
|
const grad = document.createElementNS('http://www.w3.org/2000/svg', 'linearGradient');
|
||||||
|
grad.setAttribute('id', gradId);
|
||||||
|
grad.setAttribute('x1', '0%');
|
||||||
|
grad.setAttribute('y1', '0%');
|
||||||
|
grad.setAttribute('x2', esHorizontal ? '100%' : '0%');
|
||||||
|
grad.setAttribute('y2', esHorizontal ? '0%' : '100%');
|
||||||
|
|
||||||
|
const stop1 = document.createElementNS('http://www.w3.org/2000/svg', 'stop');
|
||||||
|
stop1.setAttribute('offset', '0%');
|
||||||
|
stop1.setAttribute('stop-color', n1.color);
|
||||||
|
|
||||||
|
const stop2 = document.createElementNS('http://www.w3.org/2000/svg', 'stop');
|
||||||
|
stop2.setAttribute('offset', '100%');
|
||||||
|
stop2.setAttribute('stop-color', n2.color);
|
||||||
|
|
||||||
|
grad.appendChild(stop1);
|
||||||
|
grad.appendChild(stop2);
|
||||||
|
svgDefs.appendChild(grad);
|
||||||
|
|
||||||
|
// Crear 5 líneas base paralelas
|
||||||
|
conn.pathsBase = [];
|
||||||
|
offsetsLineas.forEach(offset => {
|
||||||
|
const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
|
||||||
|
path.classList.add('linea-base');
|
||||||
|
path.setAttribute('stroke', `url(#${gradId})`);
|
||||||
|
grupoLineas.appendChild(path);
|
||||||
|
conn.pathsBase.push({ el: path, offset: offset });
|
||||||
|
});
|
||||||
|
|
||||||
|
// NUEVO: Crear 3 pulsos de luz dinámicos por conexión
|
||||||
|
conn.pulsos = [];
|
||||||
|
for (let i = 0; i < 3; i++) {
|
||||||
|
const pathPulso = document.createElementNS('http://www.w3.org/2000/svg', 'path');
|
||||||
|
pathPulso.classList.add('linea-pulso');
|
||||||
|
grupoLineas.appendChild(pathPulso);
|
||||||
|
|
||||||
|
conn.pulsos.push({
|
||||||
|
el: pathPulso,
|
||||||
|
currentOffset: offsetsLineas[Math.floor(Math.random() * offsetsLineas.length)], // Elige línea al azar
|
||||||
|
dash: Math.random() * 500, // Desfase inicial
|
||||||
|
speed: 1.0 + Math.random() * 1.5 // Velocidad ligeramente distinta para cada uno
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Lógica para que los pulsos salten de línea aleatoriamente cada cierto tiempo
|
||||||
|
setInterval(() => {
|
||||||
|
conexiones.forEach(conn => {
|
||||||
|
conn.pulsos.forEach(p => {
|
||||||
|
if (Math.random() > 0.4) { // 60% de probabilidad de saltar de carril
|
||||||
|
p.currentOffset = offsetsLineas[Math.floor(Math.random() * offsetsLineas.length)];
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}, 1200);
|
||||||
|
|
||||||
|
// 3. Lógica de animación
|
||||||
|
function animarFrame() {
|
||||||
|
const tiempo = Date.now() * 0.001;
|
||||||
|
|
||||||
|
// Flotación de nodos
|
||||||
|
nodosData.forEach(nodo => {
|
||||||
|
nodo.x = nodo.x0 + Math.sin(tiempo * 1.2 + nodo.floatOffset) * 12;
|
||||||
|
nodo.y = nodo.y0 + Math.cos(tiempo * 1.5 + nodo.floatOffset) * 12;
|
||||||
|
|
||||||
|
nodo.el.style.left = `${(nodo.x / 1000) * 100}%`;
|
||||||
|
nodo.el.style.top = `${(nodo.y / 500) * 100}%`;
|
||||||
|
});
|
||||||
|
|
||||||
|
// Recalcular trazados y animar datos
|
||||||
|
conexiones.forEach(conn => {
|
||||||
|
const n1 = nodosMap[conn.from];
|
||||||
|
const n2 = nodosMap[conn.to];
|
||||||
|
const isHoriz = conn.type === 'horizontal';
|
||||||
|
|
||||||
|
const calcularRuta = (offsetX, offsetY) => {
|
||||||
|
let cp1x, cp1y, cp2x, cp2y;
|
||||||
|
if (isHoriz) {
|
||||||
|
const distanciaX = n2.x - n1.x;
|
||||||
|
cp1x = n1.x + distanciaX * 0.45;
|
||||||
|
cp1y = n1.y;
|
||||||
|
cp2x = n2.x - distanciaX * 0.45;
|
||||||
|
cp2y = n2.y;
|
||||||
|
} else {
|
||||||
|
cp1x = n1.x + conn.curveOut;
|
||||||
|
cp1y = n1.y;
|
||||||
|
cp2x = n2.x + conn.curveOut;
|
||||||
|
cp2y = n2.y;
|
||||||
|
}
|
||||||
|
return `M ${n1.x + offsetX} ${n1.y + offsetY}
|
||||||
|
C ${cp1x + offsetX} ${cp1y + offsetY},
|
||||||
|
${cp2x + offsetX} ${cp2y + offsetY},
|
||||||
|
${n2.x + offsetX} ${n2.y + offsetY}`;
|
||||||
|
};
|
||||||
|
|
||||||
|
// Líneas base acompañando el movimiento
|
||||||
|
conn.pathsBase.forEach(p => {
|
||||||
|
p.el.setAttribute('d', calcularRuta(isHoriz ? 0 : p.offset, isHoriz ? p.offset : 0));
|
||||||
|
});
|
||||||
|
|
||||||
|
// Pulsos de luz viajando y cambiando de línea
|
||||||
|
conn.pulsos.forEach(p => {
|
||||||
|
p.dash -= p.speed; // Avanza la animación
|
||||||
|
p.el.setAttribute('d', calcularRuta(isHoriz ? 0 : p.currentOffset, isHoriz ? p.currentOffset : 0));
|
||||||
|
p.el.style.strokeDashoffset = p.dash;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
requestAnimationFrame(animarFrame);
|
||||||
|
}
|
||||||
|
|
||||||
|
animarFrame();
|
||||||
|
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
After Width: | Height: | Size: 3.5 MiB |
|
After Width: | Height: | Size: 1.8 MiB |
|
After Width: | Height: | Size: 1.7 MiB |
|
After Width: | Height: | Size: 1.7 MiB |
|
After Width: | Height: | Size: 1.8 MiB |
|
After Width: | Height: | Size: 1.8 MiB |
|
After Width: | Height: | Size: 1.5 MiB |
|
After Width: | Height: | Size: 1.5 MiB |
|
After Width: | Height: | Size: 4.1 MiB |
|
After Width: | Height: | Size: 4.6 MiB |
|
After Width: | Height: | Size: 3.3 MiB |
|
After Width: | Height: | Size: 25 KiB |
|
After Width: | Height: | Size: 24 KiB |
|
After Width: | Height: | Size: 23 KiB |
|
After Width: | Height: | Size: 25 KiB |
@@ -0,0 +1,392 @@
|
|||||||
|
/* =========================================================
|
||||||
|
DESAFÍOS - TARJETAS (NUEVO LAYOUT HORIZONTAL INFERIOR)
|
||||||
|
========================================================= */
|
||||||
|
|
||||||
|
.desafio-card {
|
||||||
|
position: relative;
|
||||||
|
background: var(--bg-primary, #ffffff);
|
||||||
|
border-radius: var(--radius-md, 12px);
|
||||||
|
overflow: hidden;
|
||||||
|
box-shadow: 0 2px 8px rgba(0,0,0,0.5);
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
cursor: pointer;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.desafio-card:hover,
|
||||||
|
.desafio-card:focus {
|
||||||
|
transform: translateY(-4px);
|
||||||
|
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
|
||||||
|
}
|
||||||
|
|
||||||
|
.desafio-card:focus-visible {
|
||||||
|
outline: 3px solid var(--ide-primary, #0066cc);
|
||||||
|
outline-offset: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- IMAGEN (azul en el esquema) --- */
|
||||||
|
.desafio-card__image {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: 200px; /* Ajustá según necesites */
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.desafio-card__image img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
transition: transform 0.4s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.desafio-card:hover .desafio-card__image img {
|
||||||
|
transform: scale(1.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.desafio-card__overlay {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
background: linear-gradient(to bottom,
|
||||||
|
rgba(0, 0, 0, 0) 0%,
|
||||||
|
rgba(0, 0, 0, 0.2) 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- CONTENIDO (verde en el esquema) --- */
|
||||||
|
.desafio-card__content {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 1rem;
|
||||||
|
padding: 1rem 1.25rem;
|
||||||
|
background: var(--bg-primary, #ffffff);
|
||||||
|
min-height: 80px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Icono (rojo en el esquema) */
|
||||||
|
.desafio-card__icon {
|
||||||
|
width: 48px;
|
||||||
|
height: 48px;
|
||||||
|
border-radius: 10px;
|
||||||
|
background: var(--bg-subtle, #f5f5f5);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 1.35rem;
|
||||||
|
color: var(--ide-primary, #0066cc);
|
||||||
|
flex-shrink: 0;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.desafio-card:hover .desafio-card__icon {
|
||||||
|
background: var(--ide-primary, #0066cc);
|
||||||
|
color: #ffffff;
|
||||||
|
transform: scale(1.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Título (negro en el esquema) */
|
||||||
|
.desafio-card__title {
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: 600;
|
||||||
|
line-height: 1.4;
|
||||||
|
color: var(--text-body, #333);
|
||||||
|
margin: 0;
|
||||||
|
flex: 1; /* Ocupa el espacio disponible */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Botón + (amarillo en el esquema) */
|
||||||
|
.desafio-card__plus {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: var(--ide-primary, #0066cc);
|
||||||
|
color: #ffffff;
|
||||||
|
border: none;
|
||||||
|
font-size: 1.4rem;
|
||||||
|
font-weight: 600;
|
||||||
|
cursor: pointer;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex-shrink: 0;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
line-height: 1;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.desafio-card:hover .desafio-card__plus {
|
||||||
|
background: var(--ide-primary-dark, #0055aa);
|
||||||
|
transform: scale(1.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* =========================================================
|
||||||
|
RESPONSIVE
|
||||||
|
========================================================= */
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.desafio-card__image {
|
||||||
|
height: 160px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.desafio-card__content {
|
||||||
|
padding: 0.85rem 1rem;
|
||||||
|
gap: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.desafio-card__icon {
|
||||||
|
width: 42px;
|
||||||
|
height: 42px;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.desafio-card__title {
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.desafio-card__plus {
|
||||||
|
width: 36px;
|
||||||
|
height: 36px;
|
||||||
|
font-size: 1.25rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* =========================================================
|
||||||
|
MODALES COMPACTOS - 2 COLUMNAS
|
||||||
|
========================================================= */
|
||||||
|
|
||||||
|
.modal-compact {
|
||||||
|
background: var(--bg-primary, #ffffff);
|
||||||
|
border-radius: var(--radius-lg, 16px);
|
||||||
|
max-width: 800px;
|
||||||
|
width: 90%;
|
||||||
|
max-height: 85vh;
|
||||||
|
overflow-y: auto;
|
||||||
|
position: relative;
|
||||||
|
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2);
|
||||||
|
animation: modalCompactSlideIn 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes modalCompactSlideIn {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(20px) scale(0.97);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0) scale(1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-compact .modal-close-btn {
|
||||||
|
position: absolute;
|
||||||
|
top: 1rem;
|
||||||
|
right: 1rem;
|
||||||
|
width: 36px;
|
||||||
|
height: 36px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: var(--bg-subtle, #f5f5f5);
|
||||||
|
border: none;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
color: var(--text-muted, #6c757d);
|
||||||
|
cursor: pointer;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-compact .modal-close-btn:hover {
|
||||||
|
background: var(--text-muted, #6c757d);
|
||||||
|
color: #ffffff;
|
||||||
|
transform: rotate(90deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Body: 2 columnas */
|
||||||
|
.modal-compact__body {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1.2fr 1fr;
|
||||||
|
gap: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Columna 1: Textos */
|
||||||
|
.modal-compact__col-text {
|
||||||
|
padding: 2rem 2rem 2rem 2.5rem;
|
||||||
|
border-right: 1px solid var(--border-color, #e0e0e0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-compact__title {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
gap: 0.75rem;
|
||||||
|
font-size: 1.35rem;
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--text-body, #333);
|
||||||
|
margin: 0 0 1.25rem;
|
||||||
|
line-height: 1.3;
|
||||||
|
padding-right: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-compact__title i {
|
||||||
|
color: var(--ide-primary, #0066cc);
|
||||||
|
font-size: 1.5rem;
|
||||||
|
flex-shrink: 0;
|
||||||
|
margin-top: 0.15rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-compact__intro {
|
||||||
|
font-size: 0.95rem;
|
||||||
|
line-height: 1.6;
|
||||||
|
color: var(--text-muted, #6c757d);
|
||||||
|
margin: 0 0 1.5rem;
|
||||||
|
padding-bottom: 1.5rem;
|
||||||
|
border-bottom: 1px solid var(--border-color, #e0e0e0);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Secciones */
|
||||||
|
.modal-compact__section {
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-compact__section:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-compact__section-title {
|
||||||
|
font-size: 0.95rem;
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--text-body, #333);
|
||||||
|
margin: 0 0 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Lista de preguntas */
|
||||||
|
.modal-compact__list {
|
||||||
|
list-style: none;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-compact__list li {
|
||||||
|
padding: 0.75rem 1rem;
|
||||||
|
background: var(--bg-subtle, #f5f5f5);
|
||||||
|
border-radius: 6px;
|
||||||
|
border-left: 3px solid var(--ide-primary, #0066cc);
|
||||||
|
font-size: 0.88rem;
|
||||||
|
line-height: 1.5;
|
||||||
|
color: var(--text-body, #333);
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-compact__list li:hover {
|
||||||
|
background: var(--bg-primary, #ffffff);
|
||||||
|
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
|
||||||
|
transform: translateX(3px);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Badges */
|
||||||
|
.modal-compact__badges {
|
||||||
|
display: flex;
|
||||||
|
gap: 0.5rem;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Columna 2: Visual */
|
||||||
|
.modal-compact__col-visual {
|
||||||
|
padding: 2rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 1.5rem;
|
||||||
|
background: var(--bg-subtle, #f8f9fa);
|
||||||
|
border-radius: 0 var(--radius-lg, 16px) var(--radius-lg, 16px) 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-compact__image {
|
||||||
|
width: 100%;
|
||||||
|
border-radius: var(--radius-md, 12px);
|
||||||
|
overflow: hidden;
|
||||||
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-compact__image img {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Iconos */
|
||||||
|
.modal-compact__icons {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-compact__icon-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.75rem;
|
||||||
|
padding: 0.75rem;
|
||||||
|
background: var(--bg-primary, #ffffff);
|
||||||
|
border-radius: 8px;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-compact__icon-item:hover {
|
||||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
||||||
|
transform: translateX(3px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-compact__icon-item i {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
border-radius: 8px;
|
||||||
|
background: linear-gradient(135deg, var(--ide-primary, #0066cc) 0%, var(--ide-accent, #00aa88) 100%);
|
||||||
|
color: #ffffff;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-compact__icon-item span {
|
||||||
|
font-size: 0.85rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--text-body, #333);
|
||||||
|
line-height: 1.3;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* CTA */
|
||||||
|
.modal-compact__cta {
|
||||||
|
width: 100%;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 0.85rem 1.5rem;
|
||||||
|
font-size: 0.95rem;
|
||||||
|
margin-top: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* =========================================================
|
||||||
|
RESPONSIVE
|
||||||
|
========================================================= */
|
||||||
|
|
||||||
|
@media (max-width: 900px) {
|
||||||
|
.modal-compact__body {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-compact__col-text {
|
||||||
|
padding: 2rem 1.5rem;
|
||||||
|
border-right: none;
|
||||||
|
border-bottom: 1px solid var(--border-color, #e0e0e0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-compact__col-visual {
|
||||||
|
border-radius: 0 0 var(--radius-lg, 16px) var(--radius-lg, 16px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-compact__title {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
padding-right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -21,34 +21,7 @@
|
|||||||
--eco-tab-duration: 250ms;
|
--eco-tab-duration: 250ms;
|
||||||
}
|
}
|
||||||
|
|
||||||
.herobg-1{
|
|
||||||
background-image:
|
|
||||||
linear-gradient(
|
|
||||||
to right,
|
|
||||||
rgba(0, 0, 0, 0.6) 0%,
|
|
||||||
rgba(0, 0, 0, 0.3) 20%,
|
|
||||||
rgba(0, 0, 0, 0.15) 70%,
|
|
||||||
rgba(0, 0, 0, 0.0) 100%
|
|
||||||
),
|
|
||||||
url('../assets/img/hero/hero_003.png');
|
|
||||||
background-size: cover;
|
|
||||||
background-position: center;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
}
|
|
||||||
.herobg-2{
|
|
||||||
background-image:
|
|
||||||
linear-gradient(
|
|
||||||
to right,
|
|
||||||
rgba(44,109,140, 1) 0%,
|
|
||||||
rgba(44,109,140, 0.5) 40%,
|
|
||||||
rgba(44,109,140, 0.2) 70%,
|
|
||||||
rgba(44,109,140, 0.05) 100%
|
|
||||||
),
|
|
||||||
url('../assets/img/hero/hero_017.png');
|
|
||||||
background-size: cover;
|
|
||||||
background-position: center;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* ---------- TABS / BOTONES ---------- */
|
/* ---------- TABS / BOTONES ---------- */
|
||||||
|
|||||||
@@ -266,6 +266,10 @@ p, li, .lead-text, .text-body, .text-muted {
|
|||||||
position: relative;
|
position: relative;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
.section-padding-md {
|
||||||
|
padding-top: clamp(2.5rem, 4vw, 4.5rem);
|
||||||
|
padding-bottom: clamp(2.5rem, 5vw, 4.5rem);
|
||||||
|
}
|
||||||
|
|
||||||
.section-padding-sm {
|
.section-padding-sm {
|
||||||
padding-top: clamp(1rem, 2vw, 3.5rem);
|
padding-top: clamp(1rem, 2vw, 3.5rem);
|
||||||
@@ -284,6 +288,63 @@ p, li, .lead-text, .text-body, .text-muted {
|
|||||||
.bg3{
|
.bg3{
|
||||||
background: radial-gradient(circle at 50% 50%, var(--ide-accent-soft) 0%, transparent 100%), var(--bg-body);
|
background: radial-gradient(circle at 50% 50%, var(--ide-accent-soft) 0%, transparent 100%), var(--bg-body);
|
||||||
}
|
}
|
||||||
|
.herobg-1{
|
||||||
|
background-image:
|
||||||
|
linear-gradient(
|
||||||
|
to right,
|
||||||
|
rgba(0, 0, 0, 0.6) 0%,
|
||||||
|
rgba(0, 0, 0, 0.3) 20%,
|
||||||
|
rgba(0, 0, 0, 0.15) 70%,
|
||||||
|
rgba(0, 0, 0, 0.0) 100%
|
||||||
|
),
|
||||||
|
url('../assets/img/hero/hero_003.png');
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
}
|
||||||
|
.herobg-2{
|
||||||
|
background-image:
|
||||||
|
linear-gradient(
|
||||||
|
to right,
|
||||||
|
rgba(44,109,140, 1) 0%,
|
||||||
|
rgba(44,109,140, 0.5) 40%,
|
||||||
|
rgba(44,109,140, 0.2) 70%,
|
||||||
|
rgba(44,109,140, 0.05) 100%
|
||||||
|
),
|
||||||
|
url('../assets/img/hero/hero_017.png');
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
}
|
||||||
|
.herobg-3{
|
||||||
|
background-image:
|
||||||
|
linear-gradient(
|
||||||
|
to right,
|
||||||
|
rgba(56,128,89, 1) 0%,
|
||||||
|
rgba(56,128,89, 0.5) 40%,
|
||||||
|
rgba(56,128,89, 0.2) 70%,
|
||||||
|
rgba(56,128,89, 0.05) 100%
|
||||||
|
),
|
||||||
|
url('../assets/img/hero/hero-desafios.png');
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
}
|
||||||
|
.herobg-4{
|
||||||
|
background-image:
|
||||||
|
linear-gradient(
|
||||||
|
to right,
|
||||||
|
rgba(0, 0, 0, 0.6) 0%,
|
||||||
|
rgba(0, 0, 0, 0.3) 20%,
|
||||||
|
rgba(0, 0, 0, 0.15) 70%,
|
||||||
|
rgba(0, 0, 0, 0.0) 100%
|
||||||
|
),
|
||||||
|
url('../assets/img/hero/hero-soluciones.png');
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/* --- 5. Componentes: Header & Navbar --- */
|
/* --- 5. Componentes: Header & Navbar --- */
|
||||||
@@ -1031,6 +1092,11 @@ p, li, .lead-text, .text-body, .text-muted {
|
|||||||
grid-template-columns: repeat(5, 1fr);
|
grid-template-columns: repeat(5, 1fr);
|
||||||
gap: 1.25rem;
|
gap: 1.25rem;
|
||||||
}
|
}
|
||||||
|
.grid-6 {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(6, 1fr);
|
||||||
|
gap: 0.7rem;
|
||||||
|
}
|
||||||
|
|
||||||
/* --- 8. Hero: La Doble Entrada (Home) --- */
|
/* --- 8. Hero: La Doble Entrada (Home) --- */
|
||||||
|
|
||||||
@@ -2490,7 +2556,26 @@ canvas {
|
|||||||
filter: grayscale(100%);
|
filter: grayscale(100%);
|
||||||
opacity: 0.1;
|
opacity: 0.1;
|
||||||
}
|
}
|
||||||
|
.parallax-bg-layer2 {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
/* Imagen de fondo */
|
||||||
|
background-image: url('../assets/img/34.png');
|
||||||
|
background-position: center center;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: cover;
|
||||||
|
|
||||||
|
/* CLAVE: Deja la imagen fija en el viewport mientras el sitio scrollea */
|
||||||
|
background-attachment: fixed;
|
||||||
|
|
||||||
|
/* Estética sobria IDE */
|
||||||
|
filter: grayscale(100%);
|
||||||
|
opacity: 0.1;
|
||||||
|
}
|
||||||
/* Cortina suave en bordes superior e inferior para fundir con el header/footer */
|
/* Cortina suave en bordes superior e inferior para fundir con el header/footer */
|
||||||
.parallax-overlay {
|
.parallax-overlay {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|||||||
@@ -10,6 +10,7 @@
|
|||||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
|
||||||
<link rel="icon" type="image/x-icon" href="assets/img/favicon.png">
|
<link rel="icon" type="image/x-icon" href="assets/img/favicon.png">
|
||||||
<link rel="stylesheet" href="css/styles.css">
|
<link rel="stylesheet" href="css/styles.css">
|
||||||
|
<link rel="stylesheet" href="css/desafio.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
@@ -18,76 +19,130 @@
|
|||||||
<main>
|
<main>
|
||||||
|
|
||||||
<!-- Header Desafíos -->
|
<!-- Header Desafíos -->
|
||||||
<section class="section-padding" style="background: var(--bg-surface); border-bottom: 1px solid var(--border-color);">
|
<section class="section-padding herobg-3">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center;">
|
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center;">
|
||||||
<div>
|
<div>
|
||||||
<h1 style="margin-bottom: 1.25rem; font-size: 3rem; line-height: 1.1;">
|
<h1 style="margin-bottom: 1.25rem; font-size: 3rem; line-height: 1.1; color:white">
|
||||||
¿Qué está pasando<br>en tu organización?
|
¿Qué está pasando<br>en tu organización?
|
||||||
</h1>
|
</h1>
|
||||||
<p class="lead-text" style="color:var(--text-body)">
|
<p class="lead-text" style="color:white">
|
||||||
A veces el desafío es evidente. Otras, aparece como una señal, una necesidad de cambio o una oportunidad. Empecemos por comprenderlo para identificar dónde intervenir.
|
A veces el desafío es evidente. Otras, aparece como una señal, una necesidad de cambio o una oportunidad. Empecemos por comprenderlo para identificar dónde intervenir.
|
||||||
</p>
|
</p>
|
||||||
|
<a href="contacto.html" class="btn btn-primary btn-cta-unificado"
|
||||||
|
style="border-radius: 50px; align-items: center; gap: 0.5rem; margin-top: 1.5rem; display: inline-flex;">
|
||||||
|
HABLEMOS
|
||||||
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
|
||||||
|
stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<circle cx="12" cy="12" r="10"></circle>
|
||||||
|
<polyline points="12 16 16 12 12 8"></polyline>
|
||||||
|
<line x1="8" y1="12" x2="16" y2="12"></line>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<div style="display: flex; justify-content: center;">
|
|
||||||
<img src="assets/img/placeholder-infinito.png" alt="Estrategia, Procesos, Tecnología, Personas y Resultados" style="max-width: 100%; height: auto;">
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- Grilla de Desafíos con Modales -->
|
<!-- Grilla de Desafíos con Modales -->
|
||||||
<section class="section-padding bg3">
|
<section class="section-padding contact-parallax-section">
|
||||||
|
<div class="parallax-wrapper" aria-hidden="true">
|
||||||
|
<div id="contact-parallax-bg" class="parallax-bg-layer2"></div>
|
||||||
|
<div class="parallax-overlay"></div>
|
||||||
|
</div>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
|
|
||||||
<div class="grid-3" style="gap: 2rem;">
|
<div class="grid-3 desafios-grid" style="gap: 1.5rem;">
|
||||||
|
|
||||||
<!-- Desafío 1 -->
|
<!-- Desafío 1 -->
|
||||||
<div class="card dfcard1" style="display: flex; flex-direction: column; justify-content: space-between; padding: 2rem; cursor: pointer; transition: all 0.3s ease;" data-open-modal="modal-desafio-1">
|
<div class="desafio-card" data-open-modal="modal-desafio-1" tabindex="0" role="button" aria-label="Ver más sobre ordenar la gestión">
|
||||||
<h3 style="font-size: 1.3rem; margin-bottom: 2rem;">La organización creció y necesitamos ordenar los procesos.</h3>
|
<div class="desafio-card__image">
|
||||||
<div style="align-self: flex-end; width: 40px; height: 40px; border-radius: 50%; background: var(--bg-subtle); display: flex; align-items: center; justify-content: center; color: var(--ide-primary);">
|
<img src="assets/img/desafios/t1.png" alt="Gestión organizacional" loading="lazy">
|
||||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>
|
<div class="desafio-card__overlay"></div>
|
||||||
|
</div>
|
||||||
|
<div class="desafio-card__content">
|
||||||
|
<div class="desafio-card__icon">
|
||||||
|
<i class="fa-solid fa-sitemap"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="desafio-card__title">Crecimos y necesitamos ordenar la gestión.</h3>
|
||||||
|
<button class="desafio-card__plus" aria-label="Abrir detalle"><i class="fa-solid fa-plus"></i></button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Desafío 2 -->
|
<!-- Desafío 2 -->
|
||||||
<div class="card dfcard1" style="display: flex; flex-direction: column; justify-content: space-between; padding: 2rem; cursor: pointer; transition: all 0.3s ease;" data-open-modal="modal-desafio-2">
|
<div class="desafio-card" data-open-modal="modal-desafio-2" tabindex="0" role="button" aria-label="Ver más sobre convertir iniciativas en resultados">
|
||||||
<h3 style="font-size: 1.3rem; margin-bottom: 2rem;">Necesitamos mejorar la eficiencia y los resultados.</h3>
|
<div class="desafio-card__image">
|
||||||
<div style="align-self: flex-end; width: 40px; height: 40px; border-radius: 50%; background: var(--bg-subtle); display: flex; align-items: center; justify-content: center; color: var(--ide-primary);">
|
<img src="assets/img/desafios/t2.png" alt="Gestión de proyectos" loading="lazy">
|
||||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>
|
<div class="desafio-card__overlay"></div>
|
||||||
|
</div>
|
||||||
|
<div class="desafio-card__content">
|
||||||
|
<div class="desafio-card__icon">
|
||||||
|
<i class="fa-solid fa-bullseye"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="desafio-card__title">Tenemos muchas iniciativas, pero cuesta convertirlas en resultados.</h3>
|
||||||
|
<button class="desafio-card__plus" aria-label="Abrir detalle"><i class="fa-solid fa-plus"></i></button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Desafío 3 -->
|
<!-- Desafío 3 -->
|
||||||
<div class="card dfcard1" style="display: flex; flex-direction: column; justify-content: space-between; padding: 2rem; cursor: pointer; transition: all 0.3s ease;" data-open-modal="modal-desafio-3">
|
<div class="desafio-card" data-open-modal="modal-desafio-3" tabindex="0" role="button" aria-label="Ver más sobre implementar cambios">
|
||||||
<h3 style="font-size: 1.3rem; margin-bottom: 2rem;">Queremos desarrollar a nuestras personas y fortalecer equipos.</h3>
|
<div class="desafio-card__image">
|
||||||
<div style="align-self: flex-end; width: 40px; height: 40px; border-radius: 50%; background: var(--bg-subtle); display: flex; align-items: center; justify-content: center; color: var(--ide-primary);">
|
<img src="assets/img/desafios/t3.png" alt="Gestión del cambio" loading="lazy">
|
||||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>
|
<div class="desafio-card__overlay"></div>
|
||||||
|
</div>
|
||||||
|
<div class="desafio-card__content">
|
||||||
|
<div class="desafio-card__icon">
|
||||||
|
<i class="fa-solid fa-people-arrows"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="desafio-card__title">Estamos impulsando cambios, pero cuesta llevarlos a la práctica.</h3>
|
||||||
|
<button class="desafio-card__plus" aria-label="Abrir detalle"><i class="fa-solid fa-plus"></i></button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Desafío 4 -->
|
<!-- Desafío 4 -->
|
||||||
<div class="card dfcard1" style="display: flex; flex-direction: column; justify-content: space-between; padding: 2rem; cursor: pointer; transition: all 0.3s ease;" data-open-modal="modal-desafio-4">
|
<div class="desafio-card" data-open-modal="modal-desafio-4" tabindex="0" role="button" aria-label="Ver más sobre tecnología e IA">
|
||||||
<h3 style="font-size: 1.3rem; margin-bottom: 2rem;">Buscamos incorporar tecnología o avanzar en la transformación digital.</h3>
|
<div class="desafio-card__image">
|
||||||
<div style="align-self: flex-end; width: 40px; height: 40px; border-radius: 50%; background: var(--bg-subtle); display: flex; align-items: center; justify-content: center; color: var(--ide-primary);">
|
<img src="assets/img/desafios/t4.png" alt="Tecnología e inteligencia artificial" loading="lazy">
|
||||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>
|
<div class="desafio-card__overlay"></div>
|
||||||
|
</div>
|
||||||
|
<div class="desafio-card__content">
|
||||||
|
<div class="desafio-card__icon">
|
||||||
|
<i class="fa-solid fa-robot"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="desafio-card__title">Queremos aprovechar la tecnología y la IA con sentido.</h3>
|
||||||
|
<button class="desafio-card__plus" aria-label="Abrir detalle"><i class="fa-solid fa-plus"></i></button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Desafío 5 -->
|
<!-- Desafío 5 -->
|
||||||
<div class="card dfcard1" style="display: flex; flex-direction: column; justify-content: space-between; padding: 2rem; cursor: pointer; transition: all 0.3s ease;" data-open-modal="modal-desafio-5">
|
<div class="desafio-card" data-open-modal="modal-desafio-5" tabindex="0" role="button" aria-label="Ver más sobre cumplimiento normativo">
|
||||||
<h3 style="font-size: 1.3rem; margin-bottom: 2rem;">Necesitamos fortalecer la calidad, el cumplimiento o la gestión de riesgos.</h3>
|
<div class="desafio-card__image">
|
||||||
<div style="align-self: flex-end; width: 40px; height: 40px; border-radius: 50%; background: var(--bg-subtle); display: flex; align-items: center; justify-content: center; color: var(--ide-primary);">
|
<img src="assets/img/desafios/t5.png" alt="Cumplimiento normativo" loading="lazy">
|
||||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>
|
<div class="desafio-card__overlay"></div>
|
||||||
|
</div>
|
||||||
|
<div class="desafio-card__content">
|
||||||
|
<div class="desafio-card__icon">
|
||||||
|
<i class="fa-solid fa-certificate"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="desafio-card__title">Necesitamos cumplir nuevos requisitos sin sumar burocracia.</h3>
|
||||||
|
<button class="desafio-card__plus" aria-label="Abrir detalle"><i class="fa-solid fa-plus"></i></button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Desafío 6 -->
|
<!-- Desafío 6: Brújula IDE -->
|
||||||
<div class="card dfcard2" style="display: flex; flex-direction: column; justify-content: space-between; padding: 2rem; background: var(--bg-subtle); border: 1px dashed var(--ide-accent);">
|
<div class="desafio-card" data-open-modal="modal-desafio-6" tabindex="0" role="button" aria-label="Ver más sobre brújula IDE">
|
||||||
<h3 style="font-size: 1.3rem; margin-bottom: 2rem; color: var(--text-muted);">No sé exactamente qué necesito.</h3>
|
<div class="desafio-card__image">
|
||||||
<a href="index.html#brujula" class="btn btn-primary btn-sm" style="align-self: flex-start; text-transform: uppercase;">
|
<img src="assets/img/desafios/t6.png" alt="Brújula IDE" loading="lazy">
|
||||||
INICIAR BRÚJULA IDE →
|
<div class="desafio-card__overlay"></div>
|
||||||
</a>
|
</div>
|
||||||
|
<div class="desafio-card__content">
|
||||||
|
<div class="desafio-card__icon">
|
||||||
|
<i class="fa-solid fa-compass"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="desafio-card__title">Sabemos que algo debería cambiar, pero no tenemos claro por dónde empezar.</h3>
|
||||||
|
<button class="desafio-card__plus" aria-label="Abrir detalle"><i class="fa-solid fa-plus"></i></button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@@ -95,152 +150,407 @@
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!--CTA-->
|
<!--Seccion 3-->
|
||||||
<section class="section-padding" style="background-color: var(--bg-surface); border-top: 1px solid var(--border-color);">
|
<section class="section-padding bg2">
|
||||||
<div class="container text-center">
|
<div class="container">
|
||||||
<div class="cta-module" style="background: var(--bg-primary); border-radius: var(--radius-md); padding: 4rem; text-align: center; box-shadow: var(--shadow-sm);">
|
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center;">
|
||||||
<h2 style="font-size: 2.2rem; color: #fff; margin-bottom: 2rem;">¿Tu situación es diferente? Conversemos...</h2>
|
<div>
|
||||||
<a href="contacto.html" class="btn btn-primary-cta btn-cta-unificado" style="border-radius: 50px; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 2rem; font-size: 1.1rem; border: 1px solid rgba(255,255,255,0.2);">
|
<span class="eyebrow" style="text-transform: uppercase;">UNA MIRADA AMPLIA</span>
|
||||||
HABLEMOS
|
<h1 style="margin-bottom: 0.8rem; line-height: 1.1; color: var(--text-heading);">
|
||||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><polyline points="12 16 16 12 12 8"></polyline><line x1="8" y1="12" x2="16" y2="12"></line></svg>
|
Distintas señales pueden tener un mismo origen.
|
||||||
</a>
|
</h1>
|
||||||
|
<p class="lead-text" style="margin-bottom: 2.5rem;">
|
||||||
|
Comprender las conexiones nos permite identificar dónde intervenir y generar un mayor impacto.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="hero-visual">
|
||||||
|
<img src="assets/img/Infinito ecosistema.png" alt="Ilustración de desafíos organizacionales" style="width: 100%; max-width: 500px;">
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
<!-- MODALES DE DETALLE DE CADA DESAFÍO -->
|
|
||||||
|
<!-- Sección 4 -->
|
||||||
|
<section class="section-padding-sm herobg-2">
|
||||||
|
<div class="container container-wide">
|
||||||
|
<div class="hero-grid">
|
||||||
|
<div>
|
||||||
|
|
||||||
|
<h1 style="margin-bottom: 0.8rem; line-height: 1.1; color: white;">
|
||||||
|
¿Tu situación es diferente?
|
||||||
|
</h1>
|
||||||
|
<p class="lead-text" style="margin-bottom: 2.5rem; color: white;">
|
||||||
|
No necesitás saber qué servicio buscar; partimos del desafío real para diseñar la intervención adecuada.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<!-- Hero Actions -->
|
||||||
|
<div class="hero-actions" style="display: flex; gap: 1rem; flex-wrap: wrap; align-items: center;">
|
||||||
|
<a href="contacto.html" class="btn btn-primary btn-cta-unificado"
|
||||||
|
style="border-radius: 50px; display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.5rem;">
|
||||||
|
HABLEMOS
|
||||||
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
|
||||||
|
stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<circle cx="12" cy="12" r="10"></circle>
|
||||||
|
<polyline points="12 16 16 12 12 8"></polyline>
|
||||||
|
<line x1="8" y1="12" x2="16" y2="12"></line>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="hero-visual"
|
||||||
|
style="width: 100%; height: 500px; position: relative; display: flex; justify-content: center; align-items: center;">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Modal Desafío 1 -->
|
<!-- Modal Desafío 1 -->
|
||||||
<div id="modal-desafio-1" class="modal-backdrop" role="dialog" aria-modal="true">
|
<div id="modal-desafio-1" class="modal-backdrop" role="dialog" aria-modal="true" aria-labelledby="modal-1-title">
|
||||||
<div class="modal-window" style="padding: 3rem;">
|
<div class="modal-compact">
|
||||||
<button class="modal-close-btn" aria-label="Cerrar modal">✕</button>
|
<button class="modal-close-btn" aria-label="Cerrar modal">✕</button>
|
||||||
<h3 style="font-size: 1.6rem; margin-bottom: 1.5rem; color: var(--text-main);">La organización creció y necesitamos ordenar los procesos</h3>
|
|
||||||
|
|
||||||
<div style="margin-bottom: 2rem;">
|
<div class="modal-compact__body">
|
||||||
<p style="font-size: 1.05rem; color: var(--text-body); margin-bottom: 1rem;"><strong>Preguntas disparadoras:</strong></p>
|
<!-- COLUMNA 1: Textos y preguntas -->
|
||||||
<ul style="padding-left: 1.2rem; font-size: 1rem; color: var(--text-body); line-height: 1.6;">
|
<div class="modal-compact__col-text">
|
||||||
<li>¿Los procesos están formalizados o dependen de la memoria individual?</li>
|
<h2 id="modal-1-title" class="modal-compact__title">
|
||||||
<li>¿Existen cuellos de botella claros entre departamentos?</li>
|
<i class="fa-solid fa-sitemap"></i>
|
||||||
<li>¿Contamos con indicadores que midan el desempeño en tiempo real?</li>
|
Ordenar la gestión después del crecimiento
|
||||||
</ul>
|
</h2>
|
||||||
</div>
|
<p class="modal-compact__intro">
|
||||||
|
Lo que antes funcionaba de manera informal empieza a generar descoordinación, retrabajos, falta de claridad o dependencia de personas clave.
|
||||||
|
</p>
|
||||||
|
|
||||||
<div style="margin-bottom: 2.5rem;">
|
<div class="modal-compact__section">
|
||||||
<p style="font-size: 1.05rem; color: var(--text-body); margin-bottom: 1rem;"><strong>Capacidades que intervienen:</strong></p>
|
<h3 class="modal-compact__section-title">Preguntas disparadoras:</h3>
|
||||||
<div style="display: flex; gap: 0.5rem; flex-wrap: wrap;">
|
<ul class="modal-compact__list">
|
||||||
<span class="ecosystem-badge badge-excellence">IDE Excellence</span>
|
<li>¿Los procesos están formalizados o dependen de la memoria individual?</li>
|
||||||
<span class="ecosystem-badge badge-academy">IDE Academy</span>
|
<li>¿Existen cuellos de botella claros entre departamentos?</li>
|
||||||
|
<li>¿Contamos con indicadores que midan el desempeño en tiempo real?</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="modal-compact__section">
|
||||||
|
<h3 class="modal-compact__section-title">Capacidades que intervienen:</h3>
|
||||||
|
<div class="modal-compact__badges">
|
||||||
|
<span class="ecosystem-badge badge-excellence">IDE Excellence</span>
|
||||||
|
<span class="ecosystem-badge badge-academy">IDE Academy</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- COLUMNA 2: Imagen, iconos y CTA -->
|
||||||
|
<div class="modal-compact__col-visual">
|
||||||
|
<div class="modal-compact__image">
|
||||||
|
<img src="assets/img/desafios/t1.png" alt="Gestión organizacional estructurada">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="modal-compact__icons">
|
||||||
|
<div class="modal-compact__icon-item">
|
||||||
|
<i class="fa-solid fa-diagram-project"></i>
|
||||||
|
<span>Procesos definidos</span>
|
||||||
|
</div>
|
||||||
|
<div class="modal-compact__icon-item">
|
||||||
|
<i class="fa-solid fa-users-gear"></i>
|
||||||
|
<span>Roles claros</span>
|
||||||
|
</div>
|
||||||
|
<div class="modal-compact__icon-item">
|
||||||
|
<i class="fa-solid fa-chart-line"></i>
|
||||||
|
<span>Indicadores en tiempo real</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<a href="contacto.html" class="btn btn-primary btn-cta-unificado modal-compact__cta">HABLEMOS</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<a href="contacto.html" class="btn btn-primary btn-cta-unificado" style="width: 100%; justify-content: center; padding: 1rem;">HABLEMOS</a>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Modal Desafío 2 -->
|
<!-- Modal Desafío 2 -->
|
||||||
<div id="modal-desafio-2" class="modal-backdrop" role="dialog" aria-modal="true">
|
<div id="modal-desafio-2" class="modal-backdrop" role="dialog" aria-modal="true" aria-labelledby="modal-2-title">
|
||||||
<div class="modal-window" style="padding: 3rem;">
|
<div class="modal-compact">
|
||||||
<button class="modal-close-btn" aria-label="Cerrar modal">✕</button>
|
<button class="modal-close-btn" aria-label="Cerrar modal">✕</button>
|
||||||
<h3 style="font-size: 1.6rem; margin-bottom: 1.5rem; color: var(--text-main);">Necesitamos mejorar la eficiencia y los resultados</h3>
|
|
||||||
|
|
||||||
<div style="margin-bottom: 2rem;">
|
<div class="modal-compact__body">
|
||||||
<p style="font-size: 1.05rem; color: var(--text-body); margin-bottom: 1rem;"><strong>Preguntas disparadoras:</strong></p>
|
<div class="modal-compact__col-text">
|
||||||
<ul style="padding-left: 1.2rem; font-size: 1rem; color: var(--text-body); line-height: 1.6;">
|
<h2 id="modal-2-title" class="modal-compact__title">
|
||||||
<li>¿Se define con claridad el alcance antes de iniciar la ejecución?</li>
|
<i class="fa-solid fa-bullseye"></i>
|
||||||
<li>¿Hay un responsable visible con autoridad de gestión?</li>
|
Convertir iniciativas en resultados concretos
|
||||||
<li>¿Se aplican marcos ágiles o híbridos adecuados a la complejidad del proyecto?</li>
|
</h2>
|
||||||
</ul>
|
<p class="modal-compact__intro">
|
||||||
</div>
|
Los proyectos avanzan con dificultades, compiten por recursos o pierden foco, y necesitamos mejorar la forma de priorizar, coordinar y ejecutar.
|
||||||
|
</p>
|
||||||
|
|
||||||
<div style="margin-bottom: 2.5rem;">
|
<div class="modal-compact__section">
|
||||||
<p style="font-size: 1.05rem; color: var(--text-body); margin-bottom: 1rem;"><strong>Capacidades que intervienen:</strong></p>
|
<h3 class="modal-compact__section-title">Preguntas disparadoras:</h3>
|
||||||
<div style="display: flex; gap: 0.5rem; flex-wrap: wrap;">
|
<ul class="modal-compact__list">
|
||||||
<span class="ecosystem-badge badge-project">IDE Projects</span>
|
<li>¿Se define con claridad el alcance antes de iniciar la ejecución?</li>
|
||||||
<span class="ecosystem-badge badge-excellence">IDE Excellence</span>
|
<li>¿Hay un responsable visible con autoridad de gestión?</li>
|
||||||
|
<li>¿Se aplican marcos ágiles o híbridos adecuados a la complejidad del proyecto?</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="modal-compact__section">
|
||||||
|
<h3 class="modal-compact__section-title">Capacidades que intervienen:</h3>
|
||||||
|
<div class="modal-compact__badges">
|
||||||
|
<span class="ecosystem-badge badge-project">IDE Projects</span>
|
||||||
|
<span class="ecosystem-badge badge-excellence">IDE Excellence</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="modal-compact__col-visual">
|
||||||
|
<div class="modal-compact__image">
|
||||||
|
<img src="assets/img/desafios/t2.png" alt="Gestión de proyectos efectiva">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="modal-compact__icons">
|
||||||
|
<div class="modal-compact__icon-item">
|
||||||
|
<i class="fa-solid fa-list-check"></i>
|
||||||
|
<span>Alcance definido</span>
|
||||||
|
</div>
|
||||||
|
<div class="modal-compact__icon-item">
|
||||||
|
<i class="fa-solid fa-user-tie"></i>
|
||||||
|
<span>Responsable con autoridad</span>
|
||||||
|
</div>
|
||||||
|
<div class="modal-compact__icon-item">
|
||||||
|
<i class="fa-solid fa-layer-group"></i>
|
||||||
|
<span>Metodologías ágiles/híbridas</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<a href="contacto.html" class="btn btn-primary btn-cta-unificado modal-compact__cta">HABLEMOS</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<a href="contacto.html" class="btn btn-primary btn-cta-unificado" style="width: 100%; justify-content: center; padding: 1rem;">HABLEMOS</a>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Modal Desafío 3 -->
|
<!-- Modal Desafío 3 -->
|
||||||
<div id="modal-desafio-3" class="modal-backdrop" role="dialog" aria-modal="true">
|
<div id="modal-desafio-3" class="modal-backdrop" role="dialog" aria-modal="true" aria-labelledby="modal-3-title">
|
||||||
<div class="modal-window" style="padding: 3rem;">
|
<div class="modal-compact">
|
||||||
<button class="modal-close-btn" aria-label="Cerrar modal">✕</button>
|
<button class="modal-close-btn" aria-label="Cerrar modal">✕</button>
|
||||||
<h3 style="font-size: 1.6rem; margin-bottom: 1.5rem; color: var(--text-main);">Queremos desarrollar a nuestras personas y fortalecer equipos</h3>
|
|
||||||
|
|
||||||
<div style="margin-bottom: 2rem;">
|
<div class="modal-compact__body">
|
||||||
<p style="font-size: 1.05rem; color: var(--text-body); margin-bottom: 1rem;"><strong>Preguntas disparadoras:</strong></p>
|
<div class="modal-compact__col-text">
|
||||||
<ul style="padding-left: 1.2rem; font-size: 1rem; color: var(--text-body); line-height: 1.6;">
|
<h2 id="modal-3-title" class="modal-compact__title">
|
||||||
<li>¿El equipo adopta los cambios o persiste la resistencia?</li>
|
<i class="fa-solid fa-people-arrows"></i>
|
||||||
<li>¿Comprenden el sentido del cambio que se quiere implementar?</li>
|
Llevar los cambios a la práctica
|
||||||
<li>¿Cuentan con las herramientas formativas para desempeñarse con seguridad?</li>
|
</h2>
|
||||||
</ul>
|
<p class="modal-compact__intro">
|
||||||
</div>
|
Nuevos procesos, herramientas o formas de trabajar no siempre logran integrarse a la dinámica cotidiana de la organización.
|
||||||
|
</p>
|
||||||
|
|
||||||
<div style="margin-bottom: 2.5rem;">
|
<div class="modal-compact__section">
|
||||||
<p style="font-size: 1.05rem; color: var(--text-body); margin-bottom: 1rem;"><strong>Capacidades que intervienen:</strong></p>
|
<h3 class="modal-compact__section-title">Preguntas disparadoras:</h3>
|
||||||
<div style="display: flex; gap: 0.5rem; flex-wrap: wrap;">
|
<ul class="modal-compact__list">
|
||||||
<span class="ecosystem-badge badge-academy">IDE Academy</span>
|
<li>¿El equipo adopta los cambios o persiste la resistencia?</li>
|
||||||
<span class="ecosystem-badge badge-excellence">IDE Excellence</span>
|
<li>¿Comprenden el sentido del cambio que se quiere implementar?</li>
|
||||||
|
<li>¿Cuentan con las herramientas formativas para desempeñarse con seguridad?</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="modal-compact__section">
|
||||||
|
<h3 class="modal-compact__section-title">Capacidades que intervienen:</h3>
|
||||||
|
<div class="modal-compact__badges">
|
||||||
|
<span class="ecosystem-badge badge-academy">IDE Academy</span>
|
||||||
|
<span class="ecosystem-badge badge-excellence">IDE Excellence</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="modal-compact__col-visual">
|
||||||
|
<div class="modal-compact__image">
|
||||||
|
<img src="assets/img/desafios/t3.png" alt="Gestión del cambio organizacional">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="modal-compact__icons">
|
||||||
|
<div class="modal-compact__icon-item">
|
||||||
|
<i class="fa-solid fa-hand-holding-heart"></i>
|
||||||
|
<span>Adopción real</span>
|
||||||
|
</div>
|
||||||
|
<div class="modal-compact__icon-item">
|
||||||
|
<i class="fa-solid fa-lightbulb"></i>
|
||||||
|
<span>Comprensión del cambio</span>
|
||||||
|
</div>
|
||||||
|
<div class="modal-compact__icon-item">
|
||||||
|
<i class="fa-solid fa-graduation-cap"></i>
|
||||||
|
<span>Formación adecuada</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<a href="contacto.html" class="btn btn-primary btn-cta-unificado modal-compact__cta">HABLEMOS</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<a href="contacto.html" class="btn btn-primary btn-cta-unificado" style="width: 100%; justify-content: center; padding: 1rem;">HABLEMOS</a>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Modal Desafío 4 -->
|
<!-- Modal Desafío 4 -->
|
||||||
<div id="modal-desafio-4" class="modal-backdrop" role="dialog" aria-modal="true">
|
<div id="modal-desafio-4" class="modal-backdrop" role="dialog" aria-modal="true" aria-labelledby="modal-4-title">
|
||||||
<div class="modal-window" style="padding: 3rem;">
|
<div class="modal-compact">
|
||||||
<button class="modal-close-btn" aria-label="Cerrar modal">✕</button>
|
<button class="modal-close-btn" aria-label="Cerrar modal">✕</button>
|
||||||
<h3 style="font-size: 1.6rem; margin-bottom: 1.5rem; color: var(--text-main);">Buscamos incorporar tecnología o avanzar en la transformación digital</h3>
|
|
||||||
|
|
||||||
<div style="margin-bottom: 2rem;">
|
<div class="modal-compact__body">
|
||||||
<p style="font-size: 1.05rem; color: var(--text-body); margin-bottom: 1rem;"><strong>Preguntas disparadoras:</strong></p>
|
<div class="modal-compact__col-text">
|
||||||
<ul style="padding-left: 1.2rem; font-size: 1rem; color: var(--text-body); line-height: 1.6;">
|
<h2 id="modal-4-title" class="modal-compact__title">
|
||||||
<li>¿Tenemos claro dónde la tecnología puede generar valor real?</li>
|
<i class="fa-solid fa-robot"></i>
|
||||||
<li>¿Estamos automatizando el desorden o mejorando el proceso base?</li>
|
Aprovechar la tecnología y la IA con sentido
|
||||||
<li>¿El equipo está preparado para esta adopción tecnológica?</li>
|
</h2>
|
||||||
</ul>
|
<p class="modal-compact__intro">
|
||||||
</div>
|
Vemos oportunidades para automatizar, sistematizar o mejorar decisiones, pero necesitamos identificar dónde la tecnología puede generar valor real.
|
||||||
|
</p>
|
||||||
|
|
||||||
<div style="margin-bottom: 2.5rem;">
|
<div class="modal-compact__section">
|
||||||
<p style="font-size: 1.05rem; color: var(--text-body); margin-bottom: 1rem;"><strong>Capacidades que intervienen:</strong></p>
|
<h3 class="modal-compact__section-title">Preguntas disparadoras:</h3>
|
||||||
<div style="display: flex; gap: 0.5rem; flex-wrap: wrap;">
|
<ul class="modal-compact__list">
|
||||||
<span class="ecosystem-badge badge-digital">IDE Digital</span>
|
<li>¿Estamos automatizando el desorden o mejorando el proceso base?</li>
|
||||||
<span class="ecosystem-badge badge-excellence">IDE Excellence</span>
|
<li>¿El equipo está preparado para esta adopción tecnológica?</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="modal-compact__section">
|
||||||
|
<h3 class="modal-compact__section-title">Capacidades que intervienen:</h3>
|
||||||
|
<div class="modal-compact__badges">
|
||||||
|
<span class="ecosystem-badge badge-digital">IDE Digital</span>
|
||||||
|
<span class="ecosystem-badge badge-excellence">IDE Excellence</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="modal-compact__col-visual">
|
||||||
|
<div class="modal-compact__image">
|
||||||
|
<img src="assets/img/desafios/t4.png" alt="Transformación digital estratégica">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="modal-compact__icons">
|
||||||
|
<div class="modal-compact__icon-item">
|
||||||
|
<i class="fa-solid fa-gears"></i>
|
||||||
|
<span>Proceso base optimizado</span>
|
||||||
|
</div>
|
||||||
|
<div class="modal-compact__icon-item">
|
||||||
|
<i class="fa-solid fa-users-viewfinder"></i>
|
||||||
|
<span>Equipo preparado</span>
|
||||||
|
</div>
|
||||||
|
<div class="modal-compact__icon-item">
|
||||||
|
<i class="fa-solid fa-wand-magic-sparkles"></i>
|
||||||
|
<span>IA aplicada con propósito</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<a href="contacto.html" class="btn btn-primary btn-cta-unificado modal-compact__cta">HABLEMOS</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<a href="contacto.html" class="btn btn-primary btn-cta-unificado" style="width: 100%; justify-content: center; padding: 1rem;">HABLEMOS</a>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Modal Desafío 5 -->
|
<!-- Modal Desafío 5 -->
|
||||||
<div id="modal-desafio-5" class="modal-backdrop" role="dialog" aria-modal="true">
|
<div id="modal-desafio-5" class="modal-backdrop" role="dialog" aria-modal="true" aria-labelledby="modal-5-title">
|
||||||
<div class="modal-window" style="padding: 3rem;">
|
<div class="modal-compact">
|
||||||
<button class="modal-close-btn" aria-label="Cerrar modal">✕</button>
|
<button class="modal-close-btn" aria-label="Cerrar modal">✕</button>
|
||||||
<h3 style="font-size: 1.6rem; margin-bottom: 1.5rem; color: var(--text-main);">Necesitamos fortalecer la calidad, el cumplimiento o la gestión de riesgos</h3>
|
|
||||||
|
|
||||||
<div style="margin-bottom: 2rem;">
|
<div class="modal-compact__body">
|
||||||
<p style="font-size: 1.05rem; color: var(--text-body); margin-bottom: 1rem;"><strong>Preguntas disparadoras:</strong></p>
|
<div class="modal-compact__col-text">
|
||||||
<ul style="padding-left: 1.2rem; font-size: 1rem; color: var(--text-body); line-height: 1.6;">
|
<h2 id="modal-5-title" class="modal-compact__title">
|
||||||
<li>¿El cumplimiento normativo está sumando burocracia sin aportar valor?</li>
|
<i class="fa-solid fa-certificate"></i>
|
||||||
<li>¿Se gestiona solo para aprobar auditorías o se mejora continuamente?</li>
|
Cumplir requisitos sin burocracia
|
||||||
<li>¿Está integrado el sistema de gestión a las decisiones del negocio?</li>
|
</h2>
|
||||||
</ul>
|
<p class="modal-compact__intro">
|
||||||
</div>
|
Una norma, certificación, cliente o regulación exige cambios. Buscamos integrarlos a la gestión para que, además de cumplir, ayuden a mejorar.
|
||||||
|
</p>
|
||||||
|
|
||||||
<div style="margin-bottom: 2.5rem;">
|
<div class="modal-compact__section">
|
||||||
<p style="font-size: 1.05rem; color: var(--text-body); margin-bottom: 1rem;"><strong>Capacidades que intervienen:</strong></p>
|
<h3 class="modal-compact__section-title">Preguntas disparadoras:</h3>
|
||||||
<div style="display: flex; gap: 0.5rem; flex-wrap: wrap;">
|
<ul class="modal-compact__list">
|
||||||
<span class="ecosystem-badge badge-excellence">IDE Excellence</span>
|
<li>¿El cumplimiento normativo está sumando burocracia sin aportar valor?</li>
|
||||||
<span class="ecosystem-badge badge-academy">IDE Academy</span>
|
<li>¿Se gestiona solo para aprobar auditorías o se mejora continuamente?</li>
|
||||||
|
<li>¿Está integrado el sistema de gestión a las decisiones del negocio?</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="modal-compact__section">
|
||||||
|
<h3 class="modal-compact__section-title">Capacidades que intervienen:</h3>
|
||||||
|
<div class="modal-compact__badges">
|
||||||
|
<span class="ecosystem-badge badge-excellence">IDE Excellence</span>
|
||||||
|
<span class="ecosystem-badge badge-academy">IDE Academy</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="modal-compact__col-visual">
|
||||||
|
<div class="modal-compact__image">
|
||||||
|
<img src="assets/img/desafios/t5.png" alt="Cumplimiento normativo integrado">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="modal-compact__icons">
|
||||||
|
<div class="modal-compact__icon-item">
|
||||||
|
<i class="fa-solid fa-scale-balanced"></i>
|
||||||
|
<span>Cumplimiento con valor</span>
|
||||||
|
</div>
|
||||||
|
<div class="modal-compact__icon-item">
|
||||||
|
<i class="fa-solid fa-rotate"></i>
|
||||||
|
<span>Mejora continua</span>
|
||||||
|
</div>
|
||||||
|
<div class="modal-compact__icon-item">
|
||||||
|
<i class="fa-solid fa-briefcase"></i>
|
||||||
|
<span>Integrado al negocio</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<a href="contacto.html" class="btn btn-primary btn-cta-unificado modal-compact__cta">HABLEMOS</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<a href="contacto.html" class="btn btn-primary btn-cta-unificado" style="width: 100%; justify-content: center; padding: 1rem;">HABLEMOS</a>
|
<!-- Modal Desafío 6 -->
|
||||||
|
<div id="modal-desafio-6" class="modal-backdrop" role="dialog" aria-modal="true" aria-labelledby="modal-6-title">
|
||||||
|
<div class="modal-compact">
|
||||||
|
<button class="modal-close-btn" aria-label="Cerrar modal">✕</button>
|
||||||
|
|
||||||
|
<div class="modal-compact__body">
|
||||||
|
<div class="modal-compact__col-text">
|
||||||
|
<h2 id="modal-6-title" class="modal-compact__title">
|
||||||
|
<i class="fa-solid fa-compass"></i>
|
||||||
|
No tenemos claro por dónde empezar
|
||||||
|
</h2>
|
||||||
|
<p class="modal-compact__intro">
|
||||||
|
Los resultados, los procesos o la dinámica de la organización muestran señales que necesitamos comprender antes de decidir dónde intervenir.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="modal-compact__section">
|
||||||
|
<h3 class="modal-compact__section-title">Capacidades que intervienen:</h3>
|
||||||
|
<div class="modal-compact__badges">
|
||||||
|
<span class="ecosystem-badge badge-excellence">IDE Excellence</span>
|
||||||
|
<span class="ecosystem-badge badge-academy">IDE Academy</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="modal-compact__col-visual">
|
||||||
|
<div class="modal-compact__image">
|
||||||
|
<img src="assets/img/desafios/t6.png" alt="Brújula IDE - Orientación estratégica">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="modal-compact__icons">
|
||||||
|
<div class="modal-compact__icon-item">
|
||||||
|
<i class="fa-solid fa-magnifying-glass-chart"></i>
|
||||||
|
<span>Diagnóstico claro</span>
|
||||||
|
</div>
|
||||||
|
<div class="modal-compact__icon-item">
|
||||||
|
<i class="fa-solid fa-route"></i>
|
||||||
|
<span>Ruta definida</span>
|
||||||
|
</div>
|
||||||
|
<div class="modal-compact__icon-item">
|
||||||
|
<i class="fa-solid fa-handshake"></i>
|
||||||
|
<span>Acompañamiento experto</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<a href="index.html#brujula" class="btn btn-primary btn-cta-unificado modal-compact__cta">Orientarme con la Brújula IDE</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
@@ -1343,3 +1343,57 @@ async function initSearchPage() {
|
|||||||
}, 220);
|
}, 220);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
|
// Seleccionar todas las tarjetas con data-open-modal
|
||||||
|
const tarjetas = document.querySelectorAll('[data-open-modal]');
|
||||||
|
|
||||||
|
tarjetas.forEach(function(tarjeta) {
|
||||||
|
const modalId = tarjeta.getAttribute('data-open-modal');
|
||||||
|
const modal = document.getElementById(modalId);
|
||||||
|
if (!modal) return;
|
||||||
|
|
||||||
|
const closeBtn = modal.querySelector('.modal-close-btn');
|
||||||
|
|
||||||
|
// Abrir modal al hacer click en la tarjeta
|
||||||
|
tarjeta.addEventListener('click', function(e) {
|
||||||
|
// Evita que se abra si el click fue en el botón/link interno
|
||||||
|
if (e.target.closest('.solucion-card__btn')) return;
|
||||||
|
|
||||||
|
modal.classList.add('is-active');
|
||||||
|
document.body.style.overflow = 'hidden';
|
||||||
|
});
|
||||||
|
|
||||||
|
// Abrir con Enter o Space (accesibilidad)
|
||||||
|
tarjeta.addEventListener('keydown', function(e) {
|
||||||
|
if (e.key === 'Enter' || e.key === ' ') {
|
||||||
|
e.preventDefault();
|
||||||
|
modal.classList.add('is-active');
|
||||||
|
document.body.style.overflow = 'hidden';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Cerrar con botón X
|
||||||
|
if (closeBtn) {
|
||||||
|
closeBtn.addEventListener('click', function() {
|
||||||
|
modal.classList.remove('is-active');
|
||||||
|
document.body.style.overflow = '';
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Cerrar al hacer click fuera del modal
|
||||||
|
modal.addEventListener('click', function(e) {
|
||||||
|
if (e.target === modal) {
|
||||||
|
modal.classList.remove('is-active');
|
||||||
|
document.body.style.overflow = '';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Cerrar con tecla ESC
|
||||||
|
document.addEventListener('keydown', function(e) {
|
||||||
|
if (e.key === 'Escape' && modal.classList.contains('is-active')) {
|
||||||
|
modal.classList.remove('is-active');
|
||||||
|
document.body.style.overflow = '';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
@@ -0,0 +1,312 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="es">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Animación Nodos Infinito</title>
|
||||||
|
<style>
|
||||||
|
/* Estilos generales solo para visualizar en este ejemplo */
|
||||||
|
body {
|
||||||
|
background-color: #0f172a; /* Fondo oscuro para resaltar la luz */
|
||||||
|
margin: 0;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
min-height: 100vh;
|
||||||
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- CÓDIGO A INSERTAR EN TU SECCIÓN --- */
|
||||||
|
|
||||||
|
.mi-seccion-web {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
padding: 4rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* El contenedor ocupa el 50% de la sección y mantiene una proporción 2:1 */
|
||||||
|
.animacion-infinito {
|
||||||
|
width: 50%;
|
||||||
|
min-width: 300px;
|
||||||
|
max-width: 1000px;
|
||||||
|
aspect-ratio: 2 / 1;
|
||||||
|
position: relative;
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.capa-svg-lineas {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
z-index: 1; /* Por detrás de los nodos */
|
||||||
|
}
|
||||||
|
|
||||||
|
.capa-html-nodos {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
z-index: 2; /* Por delante de las líneas */
|
||||||
|
pointer-events: none; /* Permite clicks a través del contenedor vacío */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Estilos de los Nodos (Círculos) */
|
||||||
|
.nodo-circulo {
|
||||||
|
position: absolute;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
pointer-events: auto; /* Reactiva interacción en el nodo */
|
||||||
|
transition: filter 0.3s ease;
|
||||||
|
overflow: hidden;
|
||||||
|
border: 2px solid rgba(255, 255, 255, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nodo-circulo:hover {
|
||||||
|
filter: brightness(1.2);
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nodo-contenido {
|
||||||
|
color: white;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: clamp(0.6rem, 1.5vw, 1.2rem); /* Texto responsivo */
|
||||||
|
text-align: center;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nodo-contenido img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover; /* Ajusta logos o imágenes png al círculo */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Estilos de las líneas SVG */
|
||||||
|
.linea-base {
|
||||||
|
fill: none;
|
||||||
|
stroke-width: 1.5;
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.linea-pulso {
|
||||||
|
fill: none;
|
||||||
|
stroke-width: 2.5;
|
||||||
|
stroke-linecap: round;
|
||||||
|
stroke-dasharray: 10 120; /* Tamaño del pulso de luz */
|
||||||
|
filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.8));
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<section class="mi-seccion-web">
|
||||||
|
|
||||||
|
<!-- CONTENEDOR PRINCIPAL DE LA ANIMACIÓN -->
|
||||||
|
<div class="animacion-infinito">
|
||||||
|
|
||||||
|
<!-- SVG para las líneas de conexión dinámicas -->
|
||||||
|
<svg class="capa-svg-lineas" viewBox="0 0 1000 500" preserveAspectRatio="xMidYMid meet">
|
||||||
|
<defs id="svg-defs">
|
||||||
|
<!-- Los gradientes se inyectan por JS para coincidir con los nodos -->
|
||||||
|
</defs>
|
||||||
|
<g id="grupo-lineas"></g>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<!-- Contenedor HTML para los Círculos con contenido -->
|
||||||
|
<div class="capa-html-nodos" id="grupo-nodos">
|
||||||
|
<!-- Los nodos HTML se renderizan dinámicamente -->
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
/**
|
||||||
|
* CONFIGURACIÓN DE LOS CÍRCULOS (NODOS)
|
||||||
|
* - id: Identificador único
|
||||||
|
* - x0, y0: Coordenadas base en una grilla virtual de 1000x500
|
||||||
|
* - r: Radio base del círculo (escala acorde al contenedor)
|
||||||
|
* - color: Color principal usado para fondos y fusión de gradientes
|
||||||
|
* - html: Contenido interno (Texto o una etiqueta <img src="...">)
|
||||||
|
*/
|
||||||
|
const nodosData = [
|
||||||
|
{ id: 'tl', x0: 200, y0: 125, r: 50, color: '#16a085', html: '<span>LOGO A</span>' }, // Arriba Izquierda (Verde)
|
||||||
|
{ id: 'bl', x0: 200, y0: 375, r: 50, color: '#2980b9', html: '<span>LOGO B</span>' }, // Abajo Izquierda (Azul)
|
||||||
|
{ id: 'tr', x0: 800, y0: 125, r: 50, color: '#c0392b', html: '<span>LOGO C</span>' }, // Arriba Derecha (Rojo)
|
||||||
|
{ id: 'br', x0: 800, y0: 375, r: 50, color: '#f39c12', html: '<span>LOGO D</span>' }, // Abajo Derecha (Naranja)
|
||||||
|
{ id: 'c', x0: 500, y0: 250, r: 65, color: '#000000', html: '<span>NÚCLEO</span>'} // Centro (Negro)
|
||||||
|
];
|
||||||
|
|
||||||
|
// Definición de las conexiones lógicas entre nodos
|
||||||
|
const conexiones = [
|
||||||
|
{ id: 'arcL', from: 'tl', to: 'bl', type: 'vertical', curveOut: -120 }, // Arco exterior izquierdo
|
||||||
|
{ id: 'c1', from: 'tl', to: 'c', type: 'horizontal', curveOut: 0 },
|
||||||
|
{ id: 'c2', from: 'bl', to: 'c', type: 'horizontal', curveOut: 0 },
|
||||||
|
{ id: 'arcR', from: 'tr', to: 'br', type: 'vertical', curveOut: 120 }, // Arco exterior derecho
|
||||||
|
{ id: 'c3', from: 'tr', to: 'c', type: 'horizontal', curveOut: 0 },
|
||||||
|
{ id: 'c4', from: 'br', to: 'c', type: 'horizontal', curveOut: 0 }
|
||||||
|
];
|
||||||
|
|
||||||
|
// Inicializar elementos DOM
|
||||||
|
const contenedorNodos = document.getElementById('grupo-nodos');
|
||||||
|
const grupoLineas = document.getElementById('grupo-lineas');
|
||||||
|
const svgDefs = document.getElementById('svg-defs');
|
||||||
|
|
||||||
|
// Mapeo rápido de nodos para acceder por ID
|
||||||
|
const nodosMap = {};
|
||||||
|
|
||||||
|
// 1. Crear Nodos HTML y Gradientes SVG
|
||||||
|
nodosData.forEach(nodo => {
|
||||||
|
nodosMap[nodo.id] = nodo;
|
||||||
|
|
||||||
|
// Offset aleatorio para que floten desincronizados
|
||||||
|
nodo.floatOffset = Math.random() * 10;
|
||||||
|
|
||||||
|
// Crear elemento DOM
|
||||||
|
const el = document.createElement('div');
|
||||||
|
el.className = 'nodo-circulo';
|
||||||
|
el.id = `node-${nodo.id}`;
|
||||||
|
el.style.backgroundColor = nodo.color;
|
||||||
|
// El ancho y alto real se maneja por % para ser responsivo respecto a 1000x500
|
||||||
|
el.style.width = `${(nodo.r * 2 / 1000) * 100}%`;
|
||||||
|
el.style.height = `${(nodo.r * 2 / 500) * 100}%`;
|
||||||
|
|
||||||
|
const content = document.createElement('div');
|
||||||
|
content.className = 'nodo-contenido';
|
||||||
|
content.innerHTML = nodo.html;
|
||||||
|
|
||||||
|
el.appendChild(content);
|
||||||
|
contenedorNodos.appendChild(el);
|
||||||
|
nodo.el = el;
|
||||||
|
});
|
||||||
|
|
||||||
|
conexiones.forEach(conn => {
|
||||||
|
const n1 = nodosMap[conn.from];
|
||||||
|
const n2 = nodosMap[conn.to];
|
||||||
|
const gradId = `grad-${conn.from}-${conn.to}`;
|
||||||
|
conn.gradId = gradId;
|
||||||
|
|
||||||
|
// Crear gradiente SVG
|
||||||
|
const esHorizontal = conn.type === 'horizontal';
|
||||||
|
const grad = document.createElementNS('http://www.w3.org/2000/svg', 'linearGradient');
|
||||||
|
grad.setAttribute('id', gradId);
|
||||||
|
grad.setAttribute('x1', '0%');
|
||||||
|
grad.setAttribute('y1', '0%');
|
||||||
|
grad.setAttribute('x2', esHorizontal ? '100%' : '0%');
|
||||||
|
grad.setAttribute('y2', esHorizontal ? '0%' : '100%');
|
||||||
|
|
||||||
|
const stop1 = document.createElementNS('http://www.w3.org/2000/svg', 'stop');
|
||||||
|
stop1.setAttribute('offset', '0%');
|
||||||
|
stop1.setAttribute('stop-color', n1.color);
|
||||||
|
|
||||||
|
const stop2 = document.createElementNS('http://www.w3.org/2000/svg', 'stop');
|
||||||
|
stop2.setAttribute('offset', '100%');
|
||||||
|
stop2.setAttribute('stop-color', n2.color);
|
||||||
|
|
||||||
|
grad.appendChild(stop1);
|
||||||
|
grad.appendChild(stop2);
|
||||||
|
svgDefs.appendChild(grad);
|
||||||
|
|
||||||
|
// Crear múltiples paths para dar aspecto de "cable de datos" y luces
|
||||||
|
conn.pathsBase = [];
|
||||||
|
for (let i = -2; i <= 2; i++) {
|
||||||
|
const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
|
||||||
|
path.classList.add('linea-base');
|
||||||
|
path.setAttribute('stroke', `url(#${gradId})`);
|
||||||
|
grupoLineas.appendChild(path);
|
||||||
|
conn.pathsBase.push({ el: path, offset: i * 6 }); // Separación entre cables
|
||||||
|
}
|
||||||
|
|
||||||
|
// Path para el pulso de luz (datos)
|
||||||
|
const pathPulso = document.createElementNS('http://www.w3.org/2000/svg', 'path');
|
||||||
|
pathPulso.classList.add('linea-pulso');
|
||||||
|
pathPulso.setAttribute('stroke', '#ffffff'); // Color de la luz
|
||||||
|
grupoLineas.appendChild(pathPulso);
|
||||||
|
conn.pathPulso = pathPulso;
|
||||||
|
});
|
||||||
|
|
||||||
|
// 2. Lógica de animación
|
||||||
|
let offsetPulsoDatos = 0;
|
||||||
|
|
||||||
|
function animarFrame() {
|
||||||
|
const tiempo = Date.now() * 0.001; // Tiempo en segundos
|
||||||
|
|
||||||
|
// A. Actualizar posición de los círculos (Flotación en el vacío)
|
||||||
|
nodosData.forEach(nodo => {
|
||||||
|
// Cálculo de oscilación leve basada en seno y coseno
|
||||||
|
nodo.x = nodo.x0 + Math.sin(tiempo * 1.2 + nodo.floatOffset) * 12;
|
||||||
|
nodo.y = nodo.y0 + Math.cos(tiempo * 1.5 + nodo.floatOffset) * 12;
|
||||||
|
|
||||||
|
// Actualizar posiciones en HTML (Usando % para hacerlo 100% responsivo)
|
||||||
|
nodo.el.style.left = `${(nodo.x / 1000) * 100}%`;
|
||||||
|
nodo.el.style.top = `${(nodo.y / 500) * 100}%`;
|
||||||
|
});
|
||||||
|
|
||||||
|
// B. Animar pulso de datos (CSS Stroke Dashoffset)
|
||||||
|
offsetPulsoDatos -= 1.5; // Velocidad del pulso de luz
|
||||||
|
|
||||||
|
// C. Recalcular trazados de las líneas para acompañar a los círculos
|
||||||
|
conexiones.forEach(conn => {
|
||||||
|
const n1 = nodosMap[conn.from];
|
||||||
|
const n2 = nodosMap[conn.to];
|
||||||
|
|
||||||
|
// Función que genera un Bezier Curve fluido (forma del infinito)
|
||||||
|
const calcularRuta = (offsetX, offsetY) => {
|
||||||
|
let cp1x, cp1y, cp2x, cp2y;
|
||||||
|
|
||||||
|
if (conn.type === 'horizontal') {
|
||||||
|
// Curvas hacia el centro (Eje X dinámico para suavidad)
|
||||||
|
const distanciaX = n2.x - n1.x;
|
||||||
|
cp1x = n1.x + distanciaX * 0.45;
|
||||||
|
cp1y = n1.y;
|
||||||
|
cp2x = n2.x - distanciaX * 0.45;
|
||||||
|
cp2y = n2.y;
|
||||||
|
} else {
|
||||||
|
// Arcos exteriores
|
||||||
|
cp1x = n1.x + conn.curveOut;
|
||||||
|
cp1y = n1.y;
|
||||||
|
cp2x = n2.x + conn.curveOut;
|
||||||
|
cp2y = n2.y;
|
||||||
|
}
|
||||||
|
|
||||||
|
return `M ${n1.x + offsetX} ${n1.y + offsetY}
|
||||||
|
C ${cp1x + offsetX} ${cp1y + offsetY},
|
||||||
|
${cp2x + offsetX} ${cp2y + offsetY},
|
||||||
|
${n2.x + offsetX} ${n2.y + offsetY}`;
|
||||||
|
};
|
||||||
|
|
||||||
|
// Actualizar líneas base
|
||||||
|
conn.pathsBase.forEach(p => {
|
||||||
|
// Si es horizontal las separamos en el eje Y, si es vertical en el eje X
|
||||||
|
const isHoriz = conn.type === 'horizontal';
|
||||||
|
p.el.setAttribute('d', calcularRuta(isHoriz ? 0 : p.offset, isHoriz ? p.offset : 0));
|
||||||
|
});
|
||||||
|
|
||||||
|
// Actualizar línea de pulso
|
||||||
|
conn.pathPulso.setAttribute('d', calcularRuta(0, 0));
|
||||||
|
conn.pathPulso.style.strokeDashoffset = offsetPulsoDatos;
|
||||||
|
});
|
||||||
|
|
||||||
|
requestAnimationFrame(animarFrame); // Bucle infinito a 60fps
|
||||||
|
}
|
||||||
|
|
||||||
|
// Iniciar animación
|
||||||
|
animarFrame();
|
||||||
|
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||