/* Importación de la fuente de Google */
@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;700&display=swap');
/* -- INICIO DE ESTILOS OPTIMIZADOS Y AISLADOS -- */
#data-ia-infographic-embed {
/* Variables CSS movidas aquí para un aislamiento perfecto */
--glass-bg: rgba(255, 255, 255, 0.1);
--glass-bg-hover: rgba(255, 255, 255, 0.15);
--glass-border: rgba(255, 255, 255, 0.2);
--text-color-light: #f0f4f8;
--accent-color: #f39433;
--subtitle-color-original: #e67e22;
--shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
--tooltip-bg: rgba(20, 20, 20, 0.9);
font-family: 'Inter Tight', sans-serif;
color: var(--text-color-light);
font-size: 15px;
box-sizing: border-box;
}
#data-ia-infographic-embed *,
#data-ia-infographic-embed *::before,
#data-ia-infographic-embed *::after {
box-sizing: inherit;
}
#data-ia-infographic-embed .infographic-container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 1.5rem;
}
#data-ia-infographic-embed .block-body {
background: var(--glass-bg);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-radius: 20px;
border: 1px solid var(--glass-border);
padding: 1.5rem;
box-shadow: var(--shadow);
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
width: 100%;
opacity: 0;
transform: translateY(30px);
animation: infographicFadeInUp 0.8s ease-out forwards;
}
#data-ia-infographic-embed .block-body::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(110deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.8s ease-in-out;
}
#data-ia-infographic-embed .block-body:hover::before {
left: 100%;
}
#data-ia-infographic-embed .top-blocks-wrapper {
display: flex;
gap: 1.5rem;
align-items: stretch;
}
#data-ia-infographic-embed .block-body-content {
display: flex;
gap: 1.2rem;
flex: 1;
}
#data-ia-infographic-embed .sub-block-column {
display: flex;
flex-direction: column;
gap: 0.6rem;
flex: 1;
}
#data-ia-infographic-embed .column-title {
position: relative;
font-size: 1.25rem;
font-weight: 700;
color: var(--text-color-light);
padding-bottom: 0.6rem;
margin: 0 0 1.2rem 0;
border-bottom: 2px solid rgba(255, 255, 255, 0.1);
}
#data-ia-infographic-embed .column-title::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 100%;
height: 2px;
background-color: var(--accent-color);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1);
}
#data-ia-infographic-embed .block-body:hover .column-title::after {
transform: scaleX(1);
}
#data-ia-infographic-embed .sub-block-title {
font-weight: 700;
font-size: 1rem;
color: #fff;
margin: 0 0 0.1rem 0;
}
#data-ia-infographic-embed .sub-block-subtitle {
color: var(--subtitle-color-original);
font-weight: 500;
font-size: 0.9rem;
margin: 0 0 0.8rem 0;
}
#data-ia-infographic-embed .item,
#data-ia-infographic-embed .pillar-item {
background: var(--glass-bg);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
border: 1px solid var(--glass-border);
font-weight: 500;
cursor: pointer;
position: relative;
transition: all 0.3s ease;
opacity: 0;
transform: scale(0.95);
animation: infographicPopIn 0.6s ease-out forwards;
}
#data-ia-infographic-embed .item:hover,
#data-ia-infographic-embed .pillar-item:hover {
background: var(--glass-bg-hover);
transform: translateY(-4px) scale(1.02);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
border-color: rgba(255, 255, 255, 0.4);
}
#data-ia-infographic-embed .item {
padding: 0.6rem 1rem;
border-radius: 10px;
text-align: center;
font-size: 0.9rem;
}
#data-ia-infographic-embed .pillar-item {
padding: 0.6rem 1.2rem;
border-radius: 10px;
font-size: 0.85rem;
border-bottom: 2px solid var(--glass-border);
flex: 1;
text-align: center;
}
#data-ia-infographic-embed .bottom-pillars-row {
margin-top: 0.5rem;
text-align: center;
opacity: 0;
transform: translateY(30px);
animation: infographicFadeInUp 0.8s 0.4s ease-out forwards;
}
#data-ia-infographic-embed .svg-connector-container {
margin: 0 0 0.5rem 0;
}
#data-ia-infographic-embed .svg-connector-container svg .cls-1 {
stroke-dasharray: 1500;
stroke-dashoffset: 1500;
animation: infographicDrawSvg 2s 0.8s ease-out forwards;
}
#data-ia-infographic-embed .pillars-title {
font-size: 1.15rem;
font-weight: 700;
color: var(--text-color-light);
margin: 0.5rem 0 1.2rem 0;
}
#data-ia-infographic-embed .pillars-container {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 0.8rem;
}
#data-ia-infographic-embed .tooltip-content {
background-color: var(--tooltip-bg);
color: #fff;
padding: 0.8rem 1rem;
border-radius: 8px;
font-size: 0.85rem;
line-height: 1.4;
width: 240px;
text-align: left;
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%) translateY(10px);
margin-bottom: 10px;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
pointer-events: none;
z-index: 100;
}
#data-ia-infographic-embed .tooltip-content::after {
content: '';
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
border: 6px solid;
border-color: var(--tooltip-bg) transparent transparent transparent;
}
#data-ia-infographic-embed .item:hover .tooltip-content,
#data-ia-infographic-embed .pillar-item:hover .tooltip-content {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}
@keyframes infographicFadeInUp {
to { opacity: 1; transform: translateY(0); }
}
@keyframes infographicPopIn {
to { opacity: 1; transform: scale(1); }
}
@keyframes infographicDrawSvg {
to { stroke-dashoffset: 0; }
}
@media (max-width: 992px) {
#data-ia-infographic-embed .top-blocks-wrapper { flex-direction: column; }
}
@media (max-width: 767px) {
#data-ia-infographic-embed .block-body-content { flex-direction: column; }
}
Revenue Growth
Enhanced Customer Value
Do Different Things
Smart Interactions
Smart Pricing
Data-Driven Understanding of Needs
Data-Driven Spaces
Data Monetization
Do Things Differently
Smart Data Platform
Data Sharing for Joint Growth
Smart Data Visualization
Enhanced Operations
Smart Business Processes
Smart Fraud Prevention
Legacy System Modernisation (LegacIA)
Quantum Optimization
Custom AI Agents
Multi-Agent Integration
Smart Call Center
Smart Knowledge Management
#data-ia-infographic-embed .cls-1 {
fill: none;
stroke: #95a5a6;
stroke-miterlimit: 10;
stroke-width: 2px;
}
Sustainability & Governance
Smart Energy Efficiency
Data & AI Governance
European AI Regulation
DORA
ESG | CSRD
(function() {
function initInfographic() {
const container = document.querySelector('#data-ia-infographic-embed');
if (!container || container.dataset.initialized) return;
container.dataset.initialized = 'true';
const itemsWithTooltips = container.querySelectorAll('[data-tooltip]');
itemsWithTooltips.forEach(item => {
const tooltipText = item.getAttribute('data-tooltip');
if (tooltipText && !item.querySelector('.tooltip-content')) {
const tooltip = document.createElement('span');
tooltip.className = 'tooltip-content';
tooltip.innerText = tooltipText;
item.appendChild(tooltip);
}
});
const animatedItems = container.querySelectorAll('.item, .pillar-item');
animatedItems.forEach((item, index) => {
const delay = 0.5 + index * 0.07;
item.style.animationDelay = `${delay}s`;
});
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', initInfographic);
} else {
initInfographic();
}
})();