/* ==========================================================================
   Estructura Base Fluida y Valores de Respaldo Seguros
   ========================================================================== */
.mi-timeline-wrapper {
    position: relative; width: 100%; margin: 0 auto; font-family: inherit; 
    
    /* Variables de seguridad (Si Elementor falla, CSS usará esto) */
    --grosor-linea: 4px; --size-marcador: 44px; --size-ico-norm: 32px; --size-ico-hov: 36px;
    --gap-vertical: 60px; --gap-horizontal: 40px; --borde-grosor-global: 2px;
}

.timeline-items { position: relative; z-index: 3; }

/* ==========================================================================
   Líneas y Efectos Glow Premium
   ========================================================================== */
.timeline-rail {
    position: absolute; left: 50%; transform: translateX(-50%);
    width: var(--grosor-linea, 4px); 
    background-color: var(--c-lin-inactiva, #C6C6DD); 
    z-index: 1; top: 0; height: 100%; 
}

.timeline-progress {
    position: absolute; top: 0; left: 0; width: 100%; height: 0%; 
    background-color: var(--c-lin-activa, #FACC15); 
    transition: height 0.1s linear;
}

/* Efecto Glow PRO */
.efecto-glow-activo .timeline-progress { box-shadow: 0 0 15px var(--c-lin-activa, #FACC15); }
.efecto-glow-activo .timeline-item.item-activo .timeline-numero { box-shadow: 0 0 15px var(--bg-mar-act, #FACC15); }

/* Efecto Latido (Pulse) PRO */
.efecto-pulso-activo .timeline-item.item-activo .timeline-numero::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    border-radius: inherit; 
    border: 2px solid var(--bg-mar-act, #FACC15);
    animation: timeline-pulse-ring 2s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
    z-index: -1;
}
@keyframes timeline-pulse-ring {
    0% { transform: scale(1); opacity: 0.8; }
    100% { transform: scale(1.6); opacity: 0; }
}

/* ==========================================================================
   Filas de Alineación Inteligente
   ========================================================================== */
.timeline-item { display: flex; align-items: center; position: relative; width: 100%; margin-bottom: var(--gap-vertical, 60px); }
.timeline-item:last-child { margin-bottom: 0; }
.timeline-item-izquierda { justify-content: flex-start; }
.timeline-item-derecha { justify-content: flex-end; }

/* ==========================================================================
   Marcador Central
   ========================================================================== */
.timeline-numero {
    position: absolute; left: 50%; transform: translateX(-50%);
    width: var(--size-marcador, 44px); height: var(--size-marcador, 44px);
    background-color: var(--bg-mar-norm, #C6C6DD); 
    color: var(--txt-mar-norm, #fff); 
    display: flex; align-items: center; justify-content: center;
    z-index: 4; transition: all 0.4s ease-in-out;
}
.timeline-numero svg { width: 50%; height: 50%; fill: var(--txt-mar-norm, #fff); transition: fill 0.4s ease; }
.timeline-numero i { font-size: calc(var(--size-marcador, 44px) * 0.5); color: var(--txt-mar-norm, #fff); transition: color 0.4s ease; }

.forma-circulo .timeline-numero { border-radius: 50%; }
.forma-cuadrado .timeline-numero { border-radius: 8px; }
.forma-rombo .timeline-numero { border-radius: 4px; clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); }
.forma-hexagono .timeline-numero { border-radius: 0; clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); }

/* ==========================================================================
   Tarjetas, Textos e Iconos
   ========================================================================== */
.timeline-tarjeta {
    width: calc(50% - var(--gap-horizontal, 40px)); 
    background-color: var(--bg-tar-norm, #fff);
    border-style: solid; border-color: var(--borde-tar-norm, #C6C6DD); border-width: var(--borde-grosor-global, 2px); 
    border-radius: 20px; transition: all 0.4s ease-in-out;
}
.timeline-tarjeta-header { display: flex; align-items: center; gap: 15px; margin-bottom: 15px; }
.timeline-textos-header { display: flex; flex-direction: column; }

/* Tipografías Nativas Resueltas */
.timeline-subtitulo { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 4px; color: var(--col-sub-norm, #C6C6DD); transition: color 0.4s ease; }
.timeline-tarjeta h3 { margin: 0; color: var(--col-tit-norm, #333); transition: color 0.4s ease; }
.timeline-tarjeta-contenido p, .timeline-tarjeta-contenido span, .timeline-tarjeta-contenido div { margin-top: 0; margin-bottom: 15px; color: var(--col-desc-norm, #555); transition: color 0.4s ease; }
.timeline-tarjeta-contenido p:last-child { margin-bottom: 0; }

.timeline-tarjeta-icono .ico-hover, .timeline-tarjeta-icono .ico-activo { display: none; }
.timeline-tarjeta-icono .ico-normal { display: block; }
.timeline-tarjeta-icono svg { width: var(--size-ico-norm, 32px); height: var(--size-ico-norm, 32px); fill: var(--c-ico-norm, #C6C6DD); transition: all 0.3s ease; }
.timeline-tarjeta-icono i { font-size: var(--size-ico-norm, 32px); color: var(--c-ico-norm, #C6C6DD); transition: all 0.3s ease; }

/* ==========================================================================
   ESTADO HOVER (Al pasar el ratón)
   ========================================================================== */
.timeline-item:not(.item-activo):hover .timeline-tarjeta { background-color: var(--bg-tar-hov, #fafafa); border-color: var(--borde-tar-hov, #FACC15); }
.timeline-item:not(.item-activo):hover .timeline-subtitulo { color: var(--col-sub-hov, #a0a0b8) !important; }
.timeline-item:not(.item-activo):hover .timeline-tarjeta h3 { color: var(--col-tit-hov, #111) !important; }
.timeline-item:not(.item-activo):hover .timeline-tarjeta-contenido p, 
.timeline-item:not(.item-activo):hover .timeline-tarjeta-contenido span, 
.timeline-item:not(.item-activo):hover .timeline-tarjeta-contenido div { color: var(--col-desc-hov, #333) !important; }

.timeline-item:not(.item-activo):hover .timeline-tarjeta-icono .ico-normal { display: none; }
.timeline-item:not(.item-activo):hover .timeline-tarjeta-icono .ico-hover { display: block; }
.timeline-item:not(.item-activo):hover .timeline-tarjeta-icono svg { width: var(--size-ico-hov, 36px); height: var(--size-ico-hov, 36px); fill: var(--c-ico-hov, #FACC15) !important; }
.timeline-item:not(.item-activo):hover .timeline-tarjeta-icono i { font-size: var(--size-ico-hov, 36px); color: var(--c-ico-hov, #FACC15) !important; }

.timeline-item:not(.item-activo):hover .timeline-numero { background-color: var(--bg-mar-hov, #a0a0b8) !important; color: var(--txt-mar-hov, #fff) !important; }
.timeline-item:not(.item-activo):hover .timeline-numero svg { fill: var(--txt-mar-hov, #fff) !important; }
.timeline-item:not(.item-activo):hover .timeline-numero i { color: var(--txt-mar-hov, #fff) !important; }

/* ==========================================================================
   ESTADO ACTIVO (Al hacer Scroll)
   ========================================================================== */
.timeline-item.item-activo .timeline-tarjeta { background-color: var(--bg-tar-act, #FACC15) !important; border-color: var(--borde-tar-act, #FACC15) !important; }
.timeline-item.item-activo .timeline-subtitulo { color: var(--col-sub-act, #111) !important; }
.timeline-item.item-activo .timeline-tarjeta h3 { color: var(--col-tit-act, #111) !important; }
.timeline-item.item-activo .timeline-tarjeta-contenido p, 
.timeline-item.item-activo .timeline-tarjeta-contenido span, 
.timeline-item.item-activo .timeline-tarjeta-contenido div { color: var(--col-desc-act, #111) !important; }

.timeline-item.item-activo .timeline-tarjeta-icono .ico-normal, .timeline-item.item-activo .timeline-tarjeta-icono .ico-hover { display: none; }
.timeline-item.item-activo .timeline-tarjeta-icono .ico-activo { display: block; }
.timeline-item.item-activo .timeline-tarjeta-icono svg { width: var(--size-ico-norm, 32px); height: var(--size-ico-norm, 32px); fill: var(--c-ico-act, #fff) !important; }
.timeline-item.item-activo .timeline-tarjeta-icono i { font-size: var(--size-ico-norm, 32px); color: var(--c-ico-act, #fff) !important; }

.timeline-item.item-activo .timeline-numero { background-color: var(--bg-mar-act, #FACC15) !important; color: var(--txt-mar-act, #fff) !important; }
.timeline-item.item-activo .timeline-numero svg { fill: var(--txt-mar-act, #fff) !important; }
.timeline-item.item-activo .timeline-numero i { color: var(--txt-mar-act, #fff) !important; }

/* ==========================================================================
   Responsivo
   ========================================================================== */
@media (max-width: 768px) {
    .timeline-rail { left: 20px; transform: none; }
    .timeline-numero { left: calc(20px + (var(--grosor-linea, 4px) / 2)); transform: translateX(-50%); }
    .timeline-item { justify-content: flex-end; }
    .timeline-tarjeta { width: calc(100% - var(--gap-horizontal, 40px) - 20px); }
}