/* =======================================================
   1. CONTENEDOR INFALIBLE (100% DE TU PANTALLA)
======================================================= */
.tm-contenedor-absoluto, .tm-contenedor-absoluto * {
    box-sizing: border-box !important;
}

.tm-contenedor-absoluto {
    width: 100% !important; 
    max-width: 100vw !important;
    background: #f4f7f6 !important;
    overflow: hidden !important; /* Bloquea permanentemente el desplazador horizontal */
    padding: 0 20px !important;
    
    /* El contenedor ahora usa el 100% del alto de la ventana visible (Viewport Height) */
    height: 100vh !important; 
    min-height: 600px !important;
    max-height: none !important;
    
    display: flex !important;
    align-items: center !important;
    font-family: 'Montserrat', 'Poppins', -apple-system, sans-serif !important;
}

.tm-track-eventos {
    display: flex !important;
    width: 100% !important;
    flex-direction: row !important;
    align-items: center !important;
    position: relative !important;
}

/* =======================================================
   2. EVENTOS FLUIDOS Y CONEXIÓN PERFECTA
======================================================= */
.tm-evento {
    flex: 1 !important;
    position: relative !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    height: 2px !important;
}

.tm-evento::after {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 100% !important;
    /* Reducimos la altura de la onda para darle más espacio a las tarjetas */
    height: 40px !important; 
    transform: translateY(-50%) !important;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 60' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0,30 C30,-15 70,75 100,30' fill='none' stroke='%23cbd5e1' stroke-width='3' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") !important;
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
    z-index: 1 !important;
    pointer-events: none !important;
}

.tm-evento:last-child::after { display: none !important; }

/* =======================================================
   3. PIN Y TALLO (MATEMÁTICA ABSOLUTA)
======================================================= */
.tm-pin {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 18px !important;
    height: 18px !important;
    border-radius: 50% !important;
    border: 4px solid #fff !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2) !important;
    z-index: 10 !important;
}

.tm-tallo {
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 3px !important;
    height: 40px !important; /* Tallo acortado para no empujar la tarjeta fuera del borde */
    z-index: 9 !important;
}

.tm-posicion-arriba .tm-tallo { bottom: 50% !important; }
.tm-posicion-abajo .tm-tallo { top: 50% !important; }

/* =======================================================
   4. TARJETAS
======================================================= */
.tm-tarjeta {
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 90% !important;
    min-width: 120px !important;
    max-width: 250px !important;
    background: #ffffff !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 20px rgba(0,0,0,0.08) !important;
    border-top-width: 4px !important;
    border-top-style: solid !important;
    z-index: 11 !important;
    transition: transform 0.3s ease !important;
}

.tm-tarjeta:hover { transform: translate(-50%, -4px) !important; }
.tm-posicion-arriba .tm-tarjeta { bottom: calc(50% + 40px) !important; }
.tm-posicion-abajo .tm-tarjeta { top: calc(50% + 40px) !important; }

/* =======================================================
   5. CONTENIDO INTERNO
======================================================= */
.tm-tarjeta-cabecera { padding: 8px !important; text-align: center !important; }
.tm-tarjeta-cabecera h3 { 
    margin: 0 !important; color: #fff !important; 
    font-size: clamp(12px, 1.2vw, 18px) !important; 
    font-weight: 700 !important; 
}

.tm-tarjeta-cuerpo { 
    padding: 10px !important; 
    display: flex !important;
    flex-direction: column !important; 
}

.tm-titulo { 
    margin: 0 0 6px 0 !important; 
    font-size: clamp(10px, 1vw, 13px) !important; 
    font-weight: 800 !important; 
    text-transform: uppercase !important; 
}

.tm-texto { 
    color: #555 !important; 
    line-height: 1.3 !important; 
    font-size: clamp(9px, 0.9vw, 13px) !important; 
    width: 100% !important;
    display: block !important;
}

/* =======================================================
   6. IMÁGENES DEPENDIENTES DE LA ALTURA DE LA PANTALLA
======================================================= */
.tm-imagen-lightbox {
    width: 100% !important;
    /* Aquí está la clave: La foto se encoge automáticamente si la pantalla es de menor altura */
    height: 16vh !important; 
    min-height: 80px !important;
    max-height: 130px !important;
    object-fit: cover !important;
    border-radius: 4px !important;
    margin-bottom: 8px !important;
    cursor: zoom-in !important;
    transition: transform 0.2s ease, opacity 0.2s ease !important;
    display: block !important;
}

.tm-imagen-lightbox:hover { transform: scale(1.03) !important; opacity: 0.9 !important; }

/* =======================================================
   7. LIGHTBOX (PANTALLA COMPLETA)
======================================================= */
.tm-lightbox-overlay {
    position: fixed !important;
    top: 0 !important; left: 0 !important;
    width: 100vw !important; height: 100vh !important;
    background: rgba(10, 15, 30, 0.95) !important;
    z-index: 2147483647 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    opacity: 0 !important; visibility: hidden !important;
    transition: opacity 0.3s ease !important;
}

.tm-lightbox-overlay.tm-activo { opacity: 1 !important; visibility: visible !important; }

.tm-lightbox-img {
    max-width: 90vw !important; max-height: 90vh !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.8) !important;
    object-fit: contain !important;
    transform: scale(0.9) !important;
    transition: transform 0.3s ease !important;
}

.tm-lightbox-overlay.tm-activo .tm-lightbox-img { transform: scale(1) !important; }

.tm-lightbox-cerrar {
    position: absolute !important;
    top: 20px !important; right: 30px !important;
    color: #fff !important; font-size: 45px !important; cursor: pointer !important;
}

/* =======================================================
   8. ANIMACIONES
======================================================= */
.tm-oculto .tm-tarjeta, .tm-oculto .tm-pin { opacity: 0 !important; transition: all 0.6s ease-out !important; }
.tm-posicion-arriba.tm-oculto .tm-tarjeta { transform: translate(-50%, 20px) !important; }
.tm-posicion-abajo.tm-oculto .tm-tarjeta { transform: translate(-50%, -20px) !important; }
.tm-evento.tm-animado .tm-tarjeta { opacity: 1 !important; transform: translate(-50%, 0) !important; }
.tm-evento.tm-animado .tm-pin { opacity: 1 !important; transform: translate(-50%, -50%) !important; }

/* =======================================================
   9. VERSIÓN MÓVIL (INTACTA)
======================================================= */
@media (max-width: 900px) {
    .tm-contenedor-absoluto { padding: 40px 15px !important; height: auto !important; max-height: none !important; }
    .tm-track-eventos { flex-direction: column !important; align-items: flex-start !important; gap: 40px !important; }
    .tm-evento { width: 100% !important; height: auto !important; justify-content: flex-start !important; }
    
    .tm-evento::after { display: none !important; }
    .tm-track-eventos::before {
        content: '' !important; position: absolute !important; top: 0 !important; left: 25px !important;
        width: 3px !important; height: 100% !important; background: #cbd5e1 !important;
    }
    
    .tm-pin { top: 20px !important; left: 26px !important; transform: translate(-50%, 0) !important; }
    .tm-tallo { display: none !important; }
    
    .tm-tarjeta {
        position: relative !important;
        left: 55px !important; top: auto !important; bottom: auto !important;
        width: calc(100% - 60px) !important; max-width: 100% !important; transform: none !important;
    }
    
    .tm-tarjeta-cabecera h3 { font-size: 18px !important; }
    .tm-titulo { font-size: 16px !important; white-space: normal !important; overflow: visible !important; }
    .tm-texto { font-size: 14px !important; line-height: 1.5 !important; -webkit-line-clamp: unset !important; }
    
    .tm-posicion-arriba.tm-oculto .tm-tarjeta, .tm-posicion-abajo.tm-oculto .tm-tarjeta { transform: translateX(20px) !important; }
    .tm-evento.tm-animado .tm-tarjeta { transform: translateX(0) !important; }
    .tm-evento.tm-animado .tm-pin { transform: translate(-50%, 0) !important; }
}